From e331ae377c3672a24ce55a195a6c9e7a51cd26bb Mon Sep 17 00:00:00 2001 From: mehedi-hasan Date: Fri, 12 Apr 2024 17:44:19 +0600 Subject: [PATCH] feat: scrollable mobile sidebar --- README.md | 36 -- src/app/(dashboard)/layout.tsx | 3 +- src/components/docs-sidebar-nav.tsx | 84 ----- src/components/hamburger-menu.tsx | 20 +- src/components/sidebar-nav.tsx | 4 +- src/components/top-nav.tsx | 22 +- src/components/user-nav.tsx | 6 +- src/config.ts | 498 ---------------------------- src/config/nav.ts | 137 ++++++++ src/config/site.ts | 6 + 10 files changed, 173 insertions(+), 643 deletions(-) delete mode 100644 src/components/docs-sidebar-nav.tsx create mode 100644 src/config/nav.ts create mode 100644 src/config/site.ts diff --git a/README.md b/README.md index c403366..e69de29 100644 --- a/README.md +++ b/README.md @@ -1,36 +0,0 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index 2ba93be..1b1f2b4 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -1,7 +1,6 @@ // import { SyncActiveOrgFromUrl } from "./sync-active-org-from-url"; import { Dashboard } from "@/components/dashboard"; import { TopNav } from "@/components/top-nav"; -import { topNavItems } from "@/config"; import { cookies } from "next/headers"; export default function WorkspaceLayout(props: { @@ -22,7 +21,7 @@ export default function WorkspaceLayout(props: { {/* TODO: Nuke it when we can do it serverside in Clerk! */} {/* */}
- +
- {items.map((item, index) => ( -
-

- {item.title} -

- {item?.items?.length && ( - - )} -
- ))} -
- ) : null -} - -interface DocsSidebarNavItemsProps { - items: SidebarNavItem[] - pathname: string | null -} - -export function DocsSidebarNavItems({ - items, - pathname, -}: DocsSidebarNavItemsProps) { - return items?.length ? ( -
- {items.map((item, index) => - item.href && !item.disabled ? ( - - {item.title} - {item.label && ( - - {item.label} - - )} - - ) : ( - - {item.title} - {item.label && ( - - {item.label} - - )} - - ) - )} -
- ) : null -} \ No newline at end of file diff --git a/src/components/hamburger-menu.tsx b/src/components/hamburger-menu.tsx index 1cea2dd..8c1a18e 100644 --- a/src/components/hamburger-menu.tsx +++ b/src/components/hamburger-menu.tsx @@ -3,21 +3,21 @@ 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 { useParams, usePathname } from "next/navigation"; import { Separator } from "@/components/ui/separator"; import { Icons } from "./icons"; -import { sideNavItems, siteConfig } from "@/config"; import { ExpandedItem } from "./sidebar-nav"; import { Fragment } from "react"; +import { sideNavItems } from "@/config/nav"; +import { siteConfig } from "@/config/site"; +import { buttonVariants } from "./ui/button"; +import { ScrollArea, ScrollBar } from "./ui/scroll-area"; export default function HamburgerMenu() { const params = useParams<{ workspaceId: string }>(); @@ -29,10 +29,13 @@ export default function HamburgerMenu() { return (
- + - + + @@ -41,7 +44,8 @@ export default function HamburgerMenu() { - + + {sideNavItems.map((group, i) => { return ( @@ -60,6 +64,8 @@ export default function HamburgerMenu() { ); })} + +
diff --git a/src/components/sidebar-nav.tsx b/src/components/sidebar-nav.tsx index 87d4f23..cf0e683 100644 --- a/src/components/sidebar-nav.tsx +++ b/src/components/sidebar-nav.tsx @@ -12,9 +12,9 @@ import { } from "@/components/ui/tooltip"; // import { WorkspaceSwitcher } from "../../_components/workspace-switcher"; -import { NavItem, sideNavItems } from "@/config"; import { Fragment } from "react"; import { ScrollArea, ScrollBar } from "./ui/scroll-area"; +import { NavItem, sideNavItems } from "@/config/nav"; const CollapsedItem = ({ item, @@ -61,7 +61,7 @@ const ExpandedItem = ({ href={item.href} className={cn( buttonVariants({ variant: "ghost" }), - "justify-start", + "justify-start text-muted-foreground", currentPath === item.href ? "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground" : "transparent", diff --git a/src/components/top-nav.tsx b/src/components/top-nav.tsx index b7334b0..6f6dfb1 100644 --- a/src/components/top-nav.tsx +++ b/src/components/top-nav.tsx @@ -1,26 +1,26 @@ -import Link from "next/link"; - -import { cn } from "@/lib/utils"; import { UserNav } from "@/components/user-nav"; -import { Icons } from "./icons"; -import { NavItem, siteConfig } from "@/config"; import HamburgerMenu from "./hamburger-menu"; +import { ThemeToggle } from "./theme-toggle"; +import { NavItem } from "@/config/nav"; +import { siteConfig } from "@/config/site"; -export const TopNav = ({ navItems }: { navItems: NavItem[] }) => { +export const TopNav = () => { return ( -