Fix sidebar overlap and add localization

Fixed sidebar overlap issue that appeared after styling. Ensured all pages have language support.

Author: lovable-dev[bot]

src/components/AppSidebar.tsx

@@ -84,7 +84,7 @@ export default function AppSidebar() {
   };
 
   return (
-    <Sidebar className={`border-r bg-gradient-to-b from-background to-muted/20 ${collapsed ? "w-16" : "w-72"}`}>
+    <Sidebar className="border-r bg-gradient-to-b from-background to-muted/20" collapsible="icon">
       {/* Header */}
       <SidebarHeader className="border-b border-border/50 p-4">
         <div className="flex items-center gap-3">

src/contexts/LanguageContext.tsx

@@ -63,6 +63,12 @@ const translations = {
     'settings.purple': 'Mor',
     'settings.red': 'Kırmızı',
 
+    // Theme and Search
+    'theme.light': 'Açık',
+    'theme.dark': 'Koyu', 
+    'theme.system': 'Sistem',
+    'search.placeholder': 'Ara...',
+    
     // Profile
     'profile.personalInfo': 'Kişisel Bilgiler',
     'profile.contactInfo': 'İletişim Bilgileri',
@@ -389,6 +395,12 @@ const translations = {
     'settings.purple': 'Purple',
     'settings.red': 'Red',
 
+    // Theme and Search
+    'theme.light': 'Light',
+    'theme.dark': 'Dark',
+    'theme.system': 'System',
+    'search.placeholder': 'Search...',
+    
     // Profile
     'profile.personalInfo': 'Personal Information',
     'profile.contactInfo': 'Contact Information',

src/layouts/AppLayout.tsx

@@ -71,19 +71,21 @@ export default function AppLayout() {
     }
   };
 
+  const { t } = useLanguage();
+
   return (
     <SidebarProvider>
       <Helmet>
         <title>React19 Admin – Modern React Admin Template</title>
         <meta name="description" content="Modern React admin template with dashboard, tables, forms and user management." />
       </Helmet>
 
-      <div className="min-h-screen flex w-full">
+      <div className="flex min-h-screen w-full">
         <AppSidebar />
 
-        <div className="flex-1 flex min-h-screen flex-col">
-          <header className="h-14 flex items-center gap-3 px-4 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <SidebarTrigger className="" />
+        <div className="flex flex-1 flex-col">
+          <header className="sticky top-0 z-50 h-14 flex items-center gap-3 px-4 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <SidebarTrigger />
             <div className="flex items-center gap-2 font-semibold">
               <span className="hidden sm:inline">React19 Admin</span>
             </div>
@@ -112,22 +114,22 @@ export default function AppLayout() {
                   <SelectContent>
                     <SelectItem value="light" className="flex items-center gap-2">
                       <Sun className="h-4 w-4" />
-                      Açık
+                      {t('theme.light')}
                     </SelectItem>
                     <SelectItem value="dark" className="flex items-center gap-2">
                       <Moon className="h-4 w-4" />
-                      Koyu
+                      {t('theme.dark')}
                     </SelectItem>
                     <SelectItem value="system" className="flex items-center gap-2">
                       <Monitor className="h-4 w-4" />
-                      Sistem
+                      {t('theme.system')}
                     </SelectItem>
                   </SelectContent>
                 </Select>
               </div>
 
               <div className="hidden md:flex items-center">
-                <Input placeholder="Ara..." className="w-64" />
+                <Input placeholder={t('search.placeholder')} className="w-64" />
               </div>
 
               <NotificationBell