-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor link and menu configuration
- Loading branch information
Showing
7 changed files
with
247 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| "use client"; | ||
|
|
||
| import { usePathname } from "next/navigation"; | ||
| import { useEffect, useState } from "react"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { Menu } from "lucide-react"; | ||
| import UserMenu from "@/components/layout/UserMenu"; | ||
| import { links } from "@/config/menu"; | ||
| import { getLinkClassName } from "@/utils/link"; | ||
|
|
||
| interface HeaderProps { | ||
| onMobileMenuOpen: () => void; | ||
| } | ||
|
|
||
| export default function Header({ onMobileMenuOpen }: HeaderProps) { | ||
| const [isHydrated, setIsHydrated] = useState(false); | ||
| const currentPath = usePathname(); | ||
|
|
||
| useEffect(() => { | ||
| setIsHydrated(true); | ||
| }, []); | ||
|
|
||
| if (!isHydrated) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6"> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| className="md:hidden" | ||
| onClick={onMobileMenuOpen} | ||
| > | ||
| <Menu className="h-6 w-6" /> | ||
| <span className="sr-only">Toggle mobile menu</span> | ||
| </Button> | ||
| <nav className="hidden md:flex flex-col gap-6 text-lg font-medium md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6"> | ||
| <Image src="/logo/512px.png" alt="Divex" width={24} height={24} /> | ||
| {Object.entries(links).map(([href, { label }]) => ( | ||
| <Link | ||
| key={href} | ||
| href={href} | ||
| className={getLinkClassName(href, currentPath)} | ||
| > | ||
| {label} | ||
| </Link> | ||
| ))} | ||
| </nav> | ||
| <UserMenu /> | ||
| </header> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Card, CardDescription, CardFooter } from "@/components/ui/card"; | ||
| import SideLinks from "@/components/layout/SideLinks"; | ||
| import { links } from "@/config/menu"; | ||
|
|
||
| interface MainContentProps { | ||
| children: React.ReactNode; | ||
| currentPath: string; | ||
| sideLinks?: { [href: string]: string }; | ||
| } | ||
|
|
||
| export default function main_content({ | ||
| children, | ||
| currentPath, | ||
| sideLinks, | ||
| }: MainContentProps) { | ||
| return ( | ||
| <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"> | ||
| {sideLinks && ( | ||
| <SideLinks sideLinks={sideLinks} currentPath={currentPath} /> | ||
| )} | ||
| <div className="grid gap-6"> | ||
| <Card> | ||
| <div className="p-6"> | ||
| <CardDescription>{children}</CardDescription> | ||
| </div> | ||
| <CardFooter className="border-t px-6 py-4"> | ||
| <div className="text-sm text-muted-foreground"> | ||
| {links?.[currentPath?.split("/").slice(0, 3).join("/")]?.label + | ||
| " > " + | ||
| sideLinks?.[currentPath]} | ||
| </div> | ||
| </CardFooter> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| "use client"; | ||
|
|
||
| import { usePathname } from "next/navigation"; | ||
| import { useEffect, useState } from "react"; | ||
| import { Drawer, DrawerOverlay, DrawerContent } from "@/components/ui/drawer"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { X } from "lucide-react"; | ||
| import { links } from "@/config/menu"; | ||
| import { getLinkClassName } from "@/utils/link"; | ||
|
|
||
| interface MobileDrawerProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export default function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) { | ||
| const [isHydrated, setIsHydrated] = useState(false); | ||
| const currentPath = usePathname(); | ||
|
|
||
| useEffect(() => { | ||
| setIsHydrated(true); | ||
| }, []); | ||
|
|
||
| if (!isHydrated) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Drawer open={isOpen} onClose={onClose}> | ||
| <DrawerOverlay onClick={onClose} /> | ||
| <DrawerContent> | ||
| <div className="flex items-center justify-between p-4 border-b"> | ||
| <Link | ||
| href="/dashboard" | ||
| className="flex items-center gap-2 text-lg font-semibold md:text-base" | ||
| onClick={onClose} | ||
| > | ||
| <Image | ||
| src="/logo/512px.png" | ||
| alt="Divex" | ||
| width={24} | ||
| height={24} | ||
| className="rounded-full" | ||
| /> | ||
| <span className="sr-only">Divex</span> | ||
| </Link> | ||
| <Button variant="ghost" size="icon" onClick={onClose}> | ||
| <X className="h-6 w-6" /> | ||
| <span className="sr-only">Close menu</span> | ||
| </Button> | ||
| </div> | ||
| <nav className="flex flex-col gap-6 text-lg font-medium p-4"> | ||
| {Object.entries(links).map(([href, { label }]) => ( | ||
| <Link | ||
| key={href} | ||
| href={href} | ||
| className={getLinkClassName(href, currentPath)} | ||
| onClick={onClose} | ||
| > | ||
| {label} | ||
| </Link> | ||
| ))} | ||
| </nav> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import Link from "next/link"; | ||
| import { getLinkClassName } from "@/utils/link"; | ||
|
|
||
| interface SideLinksProps { | ||
| sideLinks: { [href: string]: string }; | ||
| currentPath: string; | ||
| } | ||
|
|
||
| export default function side_links({ sideLinks, currentPath }: SideLinksProps) { | ||
| return ( | ||
| <nav className="grid gap-4 text-sm text-muted-foreground"> | ||
| {Object.entries(sideLinks).map(([href, label]) => ( | ||
| <Link | ||
| key={href} | ||
| href={href} | ||
| className={getLinkClassName(href, currentPath)} | ||
| > | ||
| {label} | ||
| </Link> | ||
| ))} | ||
| </nav> | ||
| ); | ||
| } |
Oops, something went wrong.