diff --git a/dashboard/src/components/Layout.css b/dashboard/src/components/Layout.css
index 0db1288..c5f6863 100644
--- a/dashboard/src/components/Layout.css
+++ b/dashboard/src/components/Layout.css
@@ -195,6 +195,100 @@
color: var(--text-primary);
}
+.language-select-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.6rem 0.9rem;
+ color: var(--text-secondary);
+ background: none;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.language-select-wrapper:hover {
+ background: var(--bg-light);
+ color: var(--text-primary);
+}
+
+.language-icon {
+ flex-shrink: 0;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.language-select {
+ width: 100%;
+ border: none;
+ background: transparent;
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ cursor: pointer;
+ outline: none;
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ padding-right: 1.2rem;
+ padding-left: 0;
+ z-index: 2;
+}
+
+.language-select option {
+ background: var(--bg-white);
+ color: var(--text-primary);
+}
+
+.language-arrow {
+ position: absolute;
+ right: 0.9rem;
+ font-size: 0.6rem;
+ color: var(--text-muted);
+ pointer-events: none;
+ transition: transform 0.2s;
+ z-index: 1;
+}
+
+/* RTL styles */
+[dir="rtl"] .language-select {
+ padding-right: 0;
+ padding-left: 1.2rem;
+}
+
+[dir="rtl"] .language-arrow {
+ right: auto;
+ left: 0.9rem;
+}
+
+/* Collapsed sidebar styles */
+.sidebar.collapsed .language-select-wrapper {
+ justify-content: center;
+ padding: 0.6rem;
+ width: auto;
+ overflow: visible;
+}
+
+.sidebar.collapsed .language-select {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+}
+
+.sidebar.collapsed .language-arrow {
+ display: none;
+}
+
.logout-btn {
display: flex;
align-items: center;
diff --git a/dashboard/src/components/Layout.tsx b/dashboard/src/components/Layout.tsx
index f2815bb..3c34a68 100644
--- a/dashboard/src/components/Layout.tsx
+++ b/dashboard/src/components/Layout.tsx
@@ -22,7 +22,7 @@ import {
} from 'lucide-react';
import { useTheme } from '../hooks/useTheme';
import { type UserRole } from '../hooks/useRole';
-import { supportedLanguages, type SupportedLanguage } from '../i18n';
+import { type SupportedLanguage } from '../i18n';
import './Layout.css';
interface LayoutProps {
@@ -80,12 +80,9 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
const toggleMobile = () => setIsMobileOpen(!isMobileOpen);
const currentLang = (i18n.resolvedLanguage || i18n.language || 'en').split('-')[0] as SupportedLanguage;
- const cycleLanguage = () => {
- const idx = supportedLanguages.indexOf(currentLang);
- const next = supportedLanguages[(idx + 1) % supportedLanguages.length];
- void i18n.changeLanguage(next);
+ const handleLanguageChange = (lang: string) => {
+ void i18n.changeLanguage(lang);
};
- const languageLabel = currentLang === 'he' ? 'עברית' : 'EN';
const isRtl = currentLang === 'he';
return (
@@ -151,15 +148,20 @@ export function Layout({ onLogout, userRole }: LayoutProps) {
-
+
+
+
+ {!isCollapsed && ▼}
+