Make background darker so tables are more clearly readable. Try some things with the header bar

resources/js/components/AppSidebar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/sidebar';
 import { dashboard, crm, offers, invoices, timesheets, customers, leads, achievements } from '@/routes';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Kbd } from '@/components/ui/kbd'
 import { edit } from '@/routes/profile';
 import { type NavItem, type NavGroup } from '@/types';
 import { Link } from '@inertiajs/vue3';
@@ -35,7 +37,7 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Erfolge',
                 href: achievements(),
                 icon: Trophy,
-                color: 'text-yellow-500',
+                color: 'text-amber-500',
             },
         ],
     },
@@ -46,7 +48,7 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Angebote',
                 href: offers(),
                 icon: Calculator,
-                color: 'text-cyan-500',
+                color: 'text-cyan-600',
             },
             {
                 title: 'Rechnungen',
@@ -58,7 +60,7 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Zeiterfassung',
                 href: timesheets(),
                 icon: Timer,
-                color: 'text-green-500',
+                color: 'text-lime-600',
             },
         ],
     }
@@ -69,7 +71,7 @@ const footerNavItems: NavItem[] = [
         title: 'Einstellungen',
         href: edit(),
         icon: Settings,
-        color: 'text-gray-400',
+        color: 'text-gray-500',
     }
 ];
 </script>
@@ -78,9 +80,26 @@ const footerNavItems: NavItem[] = [
     <Sidebar collapsible="icon" variant="inset">
 
         <SidebarHeader>
-            <Link :href="dashboard()" class="flex row items-center gap-1 h-12 mb-4">
-            <AppLogo />
+            <Link :href="dashboard()" class="flex row items-center">
+                <AppLogo />
             </Link>
+
+            <TooltipProvider>
+                <Tooltip :delay-duration="666">
+                    <TooltipTrigger class="w-fit absolute -right-0">
+                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <p>Seitenleiste schließen
+                            <KbdGroup>
+                                <Kbd>Ctrl</Kbd>
+                                <span>+</span>
+                                <Kbd>B</Kbd>
+                            </KbdGroup>
+                        </p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
         </SidebarHeader>
 
         <SidebarContent>