admin-panel layout

src/app/styles/global-styles.scss

@@ -332,4 +332,71 @@
 	@media (max-width: 1624px) {
 		grid-template-columns: 1fr;
 	}
+}
+
+.language-switcher {
+	position: relative;
+
+	.switcher-btn {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: v.$p-color;
+		background-color: v.$white;
+		border: 2px solid v.$p-color;
+		border-radius: 0.375rem;
+		box-shadow: 0 1px 2px 0 v.$shadow-1;
+		transition: background-color 0.2s;
+
+		&:hover {
+			background-color: #f9fafb;
+		}
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	.switcher-list {
+		position: absolute;
+		right: 0;
+		z-index: 10;
+		width: 100%;
+		margin-top: 0.5rem;
+		transform-origin: top right;
+		background-color: v.$white;
+		border: 2px solid v.$p-color;
+		border-radius: 0.375rem;
+
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+		&:focus {
+			outline: none;
+		}
+
+		.language-btn {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			padding: 0.5rem 1rem;
+			font-size: 0.875rem;
+			text-align: left;
+			transition: background-color 0.2s ease;
+			color: v.$p-color;
+
+			&:hover {
+				background-color: #dbeafe;
+			}
+
+			&.active {
+				background-color: #eff6ff;
+				font-weight: 700;
+			}
+		}
+	}
 }