Nav bar front end is done

package.json

@@ -44,6 +44,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
     "server-only": "^0.0.1",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"

pnpm-lock.yaml

@@ -89,6 +89,9 @@ importers:
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
+      sonner:
+        specifier: ^1.5.0
+        version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.4.0
         version: 2.4.0
@@ -2847,6 +2850,12 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  sonner@1.5.0:
+    resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -5805,6 +5814,11 @@ snapshots:
 
   slash@3.0.0: {}
 
+  sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   source-map-js@1.2.0: {}
 
   source-map-support@0.5.21:

src/app/page.tsx

@@ -6,6 +6,8 @@ import Title from "~/components/home/Title"
 import Avatar_Popover from "~/components/auth/AvatarPopover"
 import First_Sign_In_Form from "~/components/auth/FirstSignInForm"
 import Hero from "~/components/home/Hero"
+import Breadcrumb_Home from "~/components/home/breadcrumb/BreadcrumbHome"
+import Nav_Bar from "~/components/home/NavBar"
 
 export default async function HomePage() {
   const session = await auth();
@@ -27,18 +29,22 @@ export default async function HomePage() {
     return (
       <main className="min-h-screen">
         < First_Sign_In_Form users_name={users_name} users_email={users_email} />
-        <div className="w-11/12 flex flex-row p-4 mx-auto">
-          < Hero />
-          <div className="w-full p-3 flex flex-row justify-end items-end">
-            <div className="my-auto flex flex-row justify-end items-end">
-              <div className="pb-1 px-4">
-                <Theme_Toggle />
-              </div>
-              <div className="pl-2">
-                <Avatar_Popover />
+        <div className="w-11/12 flex flex-col mx-auto">
+          <div className="w-full flex flex-row p-4">
+            < Hero />
+            < Breadcrumb_Home />
+            <div className="w-full p-3 flex flex-row justify-end items-end">
+              <div className="my-auto flex flex-row justify-end items-end">
+                <div className="pb-1 px-4">
+                  <Theme_Toggle />
+                </div>
+                <div className="pl-2">
+                  <Avatar_Popover />
+                </div>
               </div>
             </div>
           </div>
+          <Nav_Bar />
         </div>
       </main>
     );

src/components/home/NavBar.tsx

@@ -0,0 +1,71 @@
+import { Outfit as FontSans } from "next/font/google";
+import { cn } from "~/lib/utils"
+import Link from "next/link"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card"
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+export default function Nav_Bar() {
+  return (
+    <div className={cn("flex flex-col justify-start items-start " + 
+      "py-6 text-2xl font-semibold font-sans antialiased", fontSans.variable)}
+    >
+      <Card className="p-6">
+        <CardHeader>
+        </CardHeader>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Dashboard
+          </Link>
+        </CardContent>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Make Payment
+          </Link>
+        </CardContent>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Auto-Payment
+          </Link>
+        </CardContent>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Payment Methods
+          </Link>
+        </CardContent>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Payment History
+          </Link>
+        </CardContent>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Workorders
+          </Link>
+        </CardContent>
+        <CardContent className="pb-12">
+          <Link href="/">
+            Messages
+          </Link>
+        </CardContent>
+        <CardContent>
+          <Link href="/">
+            Documents
+          </Link>
+        </CardContent>
+        <CardFooter>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};

src/components/home/breadcrumb/BreadcrumbHome.tsx

@@ -0,0 +1,22 @@
+import { 
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+} from "~/components/ui/breadcrumb"
+import Link from "next/link"
+
+export default function Breadcrumb_Home() {
+  return (
+    <Breadcrumb className="w-full m-auto flex flex-row justify-center items-center">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <Link href="/">
+            <h1 className="text-3xl font-bold text-center font-sans antialiased">
+              Dashboard
+            </h1>
+          </Link>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};

src/components/theme/theme_toggle.tsx

@@ -15,7 +15,7 @@ export default function Theme_Toggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline" size="icon" className="border-none">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }