Updated navbar

app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/toaster'
-import Navbar from '@/components/Navbar'
+import { Navbar } from '@/components/Navbar'
 
 const inter = Inter({ subsets: ['latin'] })
 

app/page.tsx

@@ -4,6 +4,8 @@ import { CardTitle, Card, CardDescription, CardHeader, CardContent, CardFooter }
 import RouteCards from '@/components/RouteCards';
 import { Button } from '@/components/ui/button';
 import { useRoutes } from '@/lib/clientActions';
+import Image from 'next/image';
+import Loading from '@/components/Loading';
 
 
 export default function Home() {
@@ -12,33 +14,31 @@ export default function Home() {
   let routesMap: Route[] = routes as Route[];
 
   if (error) return <div>Error loading routes</div>
-  if (isLoading) return (
+  if(isLoading) return (
-    <div className='justify-center'>
+    <Loading />
-      Loading...
-    </div>
   )
 
-  return (
+   return (
-    <main>
+     <main>
-      <div className='flex items-center justify-center p-2'>
+       <div className='flex items-center justify-center p-6'>
-        <Card className='flex'>
+         <Card className='flex'>
-          <CardHeader>
+           <CardHeader>
-            <CardTitle>Active Routes</CardTitle>
+             <CardTitle>Active Routes</CardTitle>
-            <CardDescription>Amount of configured routes</CardDescription>
+             <CardDescription>Amount of configured routes</CardDescription>
-          </CardHeader>
+           </CardHeader>
-          <CardContent className='flex items-center'>
+           <CardContent className='flex items-center'>
-            <div>
+             <div>
-              <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
+               <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
-            </div>
+             </div>
-          </CardContent>
+           </CardContent>
-          <CardFooter>
+           <CardFooter>
-            <Button className='translate-y-2.5'>Create</Button>
+             <Button className='translate-y-2.5'>Create</Button>
-          </CardFooter>
+           </CardFooter>
-        </Card>
+         </Card>
-      </div>
+       </div>
-      <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
+       <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
-        <RouteCards routes={routes as Route[]} />
+         <RouteCards routes={routes as Route[]} />
-      </div>
+       </div>
-    </main>
+     </main>
-  )
+   )
 }

components/Navbar.tsx

@@ -1,7 +1,52 @@
-export default function Navbar() {
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
+    navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu"
+import ListItem from "./ListItem"
+import { Avatar, AvatarFallback } from "./ui/avatar"
+
+export function Navbar() {
     return (
-        <div className='bg-red-500 flex items-center justify-center h-12'>
+        <div className="flex justify-center h-12 translate-y-2">
-            <p>Navbar</p>
+            <NavigationMenu className="border rounded p-4 h-14">
+                <NavigationMenuList>
+                    <NavigationMenuItem>
+                        <NavigationMenuTrigger>Caddy</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                                <ListItem
+                                    title="Route Manager"
+                                    href={'/'}>
+                                    Easy add, edit, and delete routes all from one place.
+                                </ListItem>
+                            </ul>
+                        </NavigationMenuContent>
+                    </NavigationMenuItem>
+                    <NavigationMenuItem>
+                        <NavigationMenuTrigger>Panel</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                                <ListItem
+                                    title="Route Manager"
+                                    href={'/'}>
+                                    Easy add, edit, and delete routes all from one place.
+                                </ListItem>
+                            </ul>
+                        </NavigationMenuContent>
+                    </NavigationMenuItem>
+                </NavigationMenuList>
+            </NavigationMenu>
         </div>
     )
 }

lib/serverActions.ts

@@ -21,21 +21,15 @@
     return server;
   }
   
-  export async function deleteRoute(route: Route, index: number = 0) {
+  export async function deleteRoute(url: any, { arg }: { arg: Route }) {
-    let res = await fetch("http://localhost:3000/api/caddy/routes", {
+    return fetch(url, {
       method: 'DELETE',
       headers: {
         'Content-Type': 'application/json'
       },
       cache: 'no-cache',
-      body: JSON.stringify(route)
+      body: JSON.stringify(arg)
-  
+    }).then((res) => res.json());
-    }).catch((e) => {
-      console.log(e)
-      throw new Error('Failed to remove route. Please check the network and try again.');
-    });
-
-    return res.json();
   }
   
   export async function getUpstreamRequests(route: Route) {

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",