From e2800674d09d5750cb6a38c8b094715b8d7d115e Mon Sep 17 00:00:00 2001 From: rikhall1515 Date: Fri, 26 Apr 2024 22:09:42 +0200 Subject: [PATCH] feat(dashboard): add layout with sidebar to dashboard pages --- app/(private)/_components/sidebar/index.tsx | 472 ++++++++++++++++++ .../_components/sidebar/sidebarItem.tsx | 51 ++ app/(private)/_components/sidebar/wrapper.tsx | 21 + app/(private)/layout.tsx | 25 + 4 files changed, 569 insertions(+) create mode 100644 app/(private)/_components/sidebar/index.tsx create mode 100644 app/(private)/_components/sidebar/sidebarItem.tsx create mode 100644 app/(private)/_components/sidebar/wrapper.tsx create mode 100644 app/(private)/layout.tsx diff --git a/app/(private)/_components/sidebar/index.tsx b/app/(private)/_components/sidebar/index.tsx new file mode 100644 index 0000000..6d527b7 --- /dev/null +++ b/app/(private)/_components/sidebar/index.tsx @@ -0,0 +1,472 @@ +"use client"; +import { + Book, + Bot, + Code2, + LifeBuoy, + Settings2, + SquareTerminal, + SquareUser, + Triangle, +} from "lucide-react"; +import Image from "next/image"; +import { usePathname } from "next/navigation"; +import { createContext, useState } from "react"; + +import { Button } from "@/components/ui/button"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { cn } from "@/lib/utils"; + +import SideBarItem from "./sidebarItem"; +import SidebarWrapper from "./wrapper"; +export const SidebarContext = createContext({}); +export default function Sidebar() { + const [isOpen, setIsOpen] = useState(true); + const [isExpanded, setIsExpanded] = useState(true); + const sidebarItems = [ + { + icon: ( + + + + + + + + + + + + + + + + + + + ), + text: "Dashboard", + active: true, + alert: false, + href: "/dashboard/overview", + }, + { + icon: ( + + + + ), + text: "Opportunities", + active: false, + alert: false, + href: "/dashboard/opportunities", + }, + { + icon: ( + + + + + ), + text: "My Vizeer", + active: false, + alert: false, + href: "/dashboard/my-vizeer", + }, + // Add more items as needed + ]; + const sidebarBottomItems = [ + { + icon: ( + + + + + ), + text: "Settings", + active: false, + alert: false, + href: "/dashboard/settings", + }, + { + icon: ( + + + + ), + text: "Upgrade", + active: false, + alert: false, + href: "/dashboard/upgrade", + }, + { + icon: ( + + + + + + ), + text: "Help", + active: false, + alert: false, + href: "/dashboard/help", + }, + { + icon: ( + + + + + ), + text: "Log Out", + active: false, + alert: false, + href: "/dashboard/logout", + }, + // Add more items as needed + ]; + const pathname = usePathname(); + return ( + + +
    + {sidebarItems.map((item, index) => ( + + ))} +
+
+
    + {sidebarBottomItems.map((item, index) => ( + + ))} +
+
+ +
+
+ +
sidebar.toggle()} + >
+ + ); +} + +export function Dashboard() { + return ( + + ); +} diff --git a/app/(private)/_components/sidebar/sidebarItem.tsx b/app/(private)/_components/sidebar/sidebarItem.tsx new file mode 100644 index 0000000..66f9e51 --- /dev/null +++ b/app/(private)/_components/sidebar/sidebarItem.tsx @@ -0,0 +1,51 @@ +import Link from "next/link"; +import type { ReactNode } from "react"; +import React from "react"; + +import { cn } from "@/lib/utils"; + +type SideBarItemProps = { + icon: ReactNode; + text: string; + active: boolean; + alert: boolean; + href: string; +}; + +export default function SideBarItem({ + icon, + text, + active, + alert, + href, +}: SideBarItemProps) { + return ( +
  • + +
    +
    {icon}
    + {text} +
    +
    + + +
    • + ); +} diff --git a/app/(private)/_components/sidebar/wrapper.tsx b/app/(private)/_components/sidebar/wrapper.tsx new file mode 100644 index 0000000..8a3b11d --- /dev/null +++ b/app/(private)/_components/sidebar/wrapper.tsx @@ -0,0 +1,21 @@ +import { cn } from "@/lib/utils"; + +export default function SidebarWrapper({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + ); +} diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx new file mode 100644 index 0000000..56e7f0e --- /dev/null +++ b/app/(private)/layout.tsx @@ -0,0 +1,25 @@ +import CookieBanner from "@/components/cookies"; +import { TooltipProvider } from "@/components/ui/tooltip"; + +import { Dashboard } from "./_components/sidebar"; + +export default function PrivateLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + <> + + +
    + {children} +
    + +     + + ); +}