Type fixes & Docker

components/app-sidebar.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import Image from "next/image"
-
 import { AppWindow, Settings, LayoutDashboardIcon, Briefcase, Server, Network } from "lucide-react"
 import {
   Sidebar,
@@ -16,40 +15,47 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar"
 import { Button } from "@/components/ui/button"
-
 import Link from "next/link"
-import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
+import Cookies from "js-cookie"
+import { useRouter } from "next/navigation"
 
-const data = {
+// Typdefinitionen
+interface NavItem {
+  title: string
+  icon?: React.ComponentType<any>
+  url: string
+  isActive?: boolean
+  items?: NavItem[]
+}
+
+const data: { navMain: NavItem[] } = {
   navMain: [
     {
-        title: "Dashboard",
-        icon: LayoutDashboardIcon,
-        url: "/dashboard"
+      title: "Dashboard",
+      icon: LayoutDashboardIcon,
+      url: "/dashboard"
     },
     {
-        title: "My Infrastructure",
-        url: "#",
-        icon: Briefcase,
-        items: [
-          {
-            title: "Servers",
-            icon: Server,
-            url: "/dashboard/servers",
-          },
-          {
-            title: "Applications",
-            icon: AppWindow,
-            url: "/dashboard/applications",
-          },
-          {
-            title: "Network",
-            icon: Network,
-            url: "/dashboard/network",
-          },          
+      title: "My Infrastructure",
+      url: "#",
+      icon: Briefcase,
+      items: [
+        {
+          title: "Servers",
+          icon: Server,
+          url: "/dashboard/servers",
+        },
+        {
+          title: "Applications",
+          icon: AppWindow,
+          url: "/dashboard/applications",
+        },
+        {
+          title: "Network",
+          icon: Network,
+          url: "/dashboard/network",
+        },          
       ],
-      
     },
     {
       title: "Settings",
@@ -58,14 +64,16 @@ const data = {
     },
   ],
 }
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-    const router = useRouter()
-    const logout = async () => {
-        Cookies.remove('token')
-        router.push("/")
-    }
 
-    return (
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const router = useRouter()
+  
+  const logout = async () => {
+    Cookies.remove('token')
+    router.push("/")
+  }
+
+  return (
     <Sidebar {...props}>
       <SidebarHeader>
         <SidebarMenu>
@@ -82,44 +90,48 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
+      
       <SidebarContent className="flex flex-col h-full">
         <SidebarGroup className="flex-grow">
-            <SidebarMenu>
+          <SidebarMenu>
             {data.navMain.map((item) => (
-                <SidebarMenuItem key={item.title}>
+              <SidebarMenuItem key={item.title}>
                 <SidebarMenuButton asChild>
-                    <Link href={item.url} className="font-medium">
+                  <Link href={item.url} className="font-medium">
                     {item.icon && <item.icon className="mr-2" />}
                     {item.title}
-                    </Link>
+                  </Link>
                 </SidebarMenuButton>
-                {item.items?.length ? (
-                    <SidebarMenuSub>
+                {item.items?.length && (
+                  <SidebarMenuSub>
                     {item.items.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                        <SidebarMenuSubButton asChild isActive={subItem.isActive}>
-                            <Link href={subItem.url}>
+                      <SidebarMenuSubItem key={subItem.title}>
+                        <SidebarMenuSubButton 
+                          asChild 
+                          isActive={subItem.isActive ?? false}
+                        >
+                          <Link href={subItem.url}>
                             {subItem.icon && <subItem.icon className="mr-2" />}
                             {subItem.title}
-                            </Link>
+                          </Link>
                         </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
+                      </SidebarMenuSubItem>
                     ))}
-                    </SidebarMenuSub>
-                ) : null}
-                </SidebarMenuItem>
+                  </SidebarMenuSub>
+                )}
+              </SidebarMenuItem>
             ))}
-            </SidebarMenu>
+          </SidebarMenu>
         </SidebarGroup>
 
         <div className="p-4">
-            <Button variant="destructive" className="w-full" onClick={logout}>
+          <Button variant="destructive" className="w-full" onClick={logout}>
             Logout
-            </Button>
+          </Button>
         </div>
-        </SidebarContent>
+      </SidebarContent>
 
       <SidebarRail />
     </Sidebar>
   )
-}
+}