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 && } +