Added language selection and translation files

frontend/src/components/Navbar.tsx

@@ -1,8 +1,11 @@
 import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { useAuth } from '@/hooks'
+import LanguageSelector from './LanguageSelector'
 
 export default function Navbar() {
   const { user, isAuthenticated, login, logout } = useAuth()
+  const { t } = useTranslation('navbar')
 
   return (
     <nav className="border-b border-gray-200 bg-white shadow-sm">
@@ -27,23 +30,26 @@ export default function Navbar() {
                 <rect x="9" y="3" width="6" height="4" rx="1" />
                 <path d="M9 12l2 2 4-4" />
               </svg>
-              <span>Requirements Periodic Table</span>
+              <span>{t('brand')}</span>
             </Link>
           </div>
 
           {/* Navigation Links */}
           <div className="flex items-center gap-4">
+            {/* Language Selector */}
+            <LanguageSelector compact />
+            
             {isAuthenticated ? (
               <>
                 <Link
                   to="/dashboard"
                   className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                 >
-                  Dashboard
+                  {t('dashboard')}
                 </Link>
                 <div className="flex items-center gap-3">
                   <span className="text-sm text-gray-600">
-                    Hello,{' '}
+                    {t('hello')},{' '}
                     <span className="font-medium text-gray-900">
                       {user?.full_name || user?.preferred_username}
                     </span>
@@ -52,7 +58,7 @@ export default function Navbar() {
                     onClick={logout}
                     className="rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
                   >
-                    Logout
+                    {t('logout')}
                   </button>
                 </div>
               </>
@@ -61,7 +67,7 @@ export default function Navbar() {
                 onClick={login}
                 className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
               >
-                Login
+                {t('login')}
               </button>
             )}
           </div>