create hamburger menu and fix responsiveness (Codehagen#218)

digitalapplied · Mar 21, 2024 · aaab29a · aaab29a
1 parent bb221ac
commit aaab29a
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 7 deletions.
diff --git a/apps/www/app/(dashboard)/(workspaceId)/_components/sidebar-nav.tsx b/apps/www/app/(dashboard)/(workspaceId)/_components/sidebar-nav.tsx
@@ -122,3 +122,5 @@ export function SidebarNav({ isCollapsed }: { isCollapsed: boolean }) {
     </nav>
   );
 }
+
+export { ExpandedItem };
diff --git a/apps/www/app/(dashboard)/(workspaceId)/banking/page.tsx b/apps/www/app/(dashboard)/(workspaceId)/banking/page.tsx
@@ -14,7 +14,7 @@ export default function Page(_props: { params: { workspaceId: string } }) {
       <CardsStats />
       {/* <div className="ml-6 mt-6 flex gap-4"> */}
 
-      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-2">
         <TransactionsReviewTable />
         <TopCategoriesTable />
       </div>

diff --git a/apps/www/app/(dashboard)/(workspaceId)/dashboard/_components/dashboard-1.tsx b/apps/www/app/(dashboard)/(workspaceId)/dashboard/_components/dashboard-1.tsx
@@ -46,7 +46,7 @@ export function Dashboard({
             sizes,
           )}`;
         }}
-        className="h-full max-h-[1200px] items-stretch"
+        className="h-full items-stretch"
       >
         <ResizablePanel
           defaultSize={defaultLayout[0]}
@@ -62,7 +62,8 @@ export function Dashboard({
           }}
           className={cn(
             isCollapsed &&
-              "min-w-[50px] transition-all duration-300 ease-in-out",
+            "min-w-[50px] transition-all duration-300 ease-in-out",
+            "hidden lg:block"
           )}
         >
           <SidebarNav isCollapsed={isCollapsed} />

diff --git a/apps/www/app/(dashboard)/(workspaceId)/dashboard/page.tsx b/apps/www/app/(dashboard)/(workspaceId)/dashboard/page.tsx
@@ -14,7 +14,7 @@ export default function Page(_props: { params: { workspaceId: string } }) {
       <CardsStats />
       {/* <div className="ml-6 mt-6 flex gap-4"> */}
 
-      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-2">
         <TransactionsReviewTable />
         <TopCategoriesTable />
       </div>

diff --git a/apps/www/app/(dashboard)/_components/dashboard-shell.tsx b/apps/www/app/(dashboard)/_components/dashboard-shell.tsx
@@ -4,6 +4,7 @@ import { Separator } from "@/components/ui/separator";
 import { NavItem } from "@/app/config";
 
 import { Breadcrumbs } from "./breadcrumbs";
+import HamburgerMenu from "./hamburger-menu";
 
 export function DashboardShell(props: {
   title: string;
@@ -17,7 +18,8 @@ export function DashboardShell(props: {
     <div>
       <nav className="flex h-[52px] items-center justify-between p-4">
         <div className="flex items-center gap-4">
-          <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none md:inline">
+          <HamburgerMenu />
+          <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none md:inline ml-4">
             {props.title}
           </h1>
           {props.breadcrumbItems && (

diff --git a/apps/www/app/(dashboard)/_components/hamburger-menu.tsx b/apps/www/app/(dashboard)/_components/hamburger-menu.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+
+import { AlignJustify } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { sideNavItems, siteConfig } from "@/app/config";
+import { Icons } from "@/components/shared/icons";
+import { ExpandedItem } from "../(workspaceId)/_components/sidebar-nav";
+import { useParams, usePathname } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
+
+export default function HamburgerMenu() {
+  const params = useParams<{ workspaceId: string }>();
+  const path = usePathname();
+
+  const pathname = path.replace(`/${params.workspaceId}`, "") || "/";
+  const [_, currentPath] = pathname.split("/");
+
+  return (
+    <div className="flex lg:hidden">
+      <Sheet>
+        <SheetTrigger>
+          <AlignJustify />
+        </SheetTrigger>
+        <SheetContent side={"left"}>
+          <SheetHeader>
+            <SheetTitle className="flex items-center space-x-2">
+              <Icons.logo />
+              <span className="inline-block font-urban text-xl font-bold">
+                {siteConfig.name}
+              </span>
+            </SheetTitle>
+          </SheetHeader>
+
+          {sideNavItems.map((group) => {
+            return (
+              <>
+                <Separator className="mb-2 mt-2" />
+                <div className="flex flex-col gap-1 p-2" key={group.group}>
+                  {group.items.map((link, idx) => {
+                    return (
+                      <ExpandedItem
+                        key={link.href + idx}
+                        item={link}
+                        currentPath={"/" + currentPath}
+                      />
+                    )
+                  })}
+                </div>
+              </>
+            );
+          })}
+        </SheetContent>
+      </Sheet>
+    </div>
+  )
+}
diff --git a/apps/www/components/new-dashboard/components/dashboard-1.tsx b/apps/www/components/new-dashboard/components/dashboard-1.tsx
@@ -81,7 +81,7 @@ export function Dashboard({
           }}
           className={cn(
             isCollapsed &&
-              "min-w-[50px] transition-all duration-300 ease-in-out",
+            "min-w-[50px] transition-all duration-300 ease-in-out",
           )}
         >
           <div

diff --git a/apps/www/components/ui/resizable.tsx b/apps/www/components/ui/resizable.tsx
@@ -33,7 +33,7 @@ const ResizableHandle = ({
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="z-10 h-4 w-3 items-center justify-center rounded-sm border bg-border hidden lg:block">
         <DragHandleDots2Icon className="h-2.5 w-2.5" />
       </div>
     )}
-Original file line number
+Diff line change
@@ Expand Up @@
         </nav>
       );
     }
+    export { ExpandedItem };