p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make TopNav responsive

Browse Source
This commit is contained in:
p-sw 2024-06-01 20:48:18 +09:00
parent 91ccb82929
commit 10d4da7626
1 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/react/src/MainLayout.tsx
View File

@ -4,6 +4,13 @@ import { Button } from "../components/Button";
import RouteObject from "./RouteObject";
import { Toaster } from "@components/Toast";
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
import {
DrawerClose,
DrawerContent,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
} from "@components/Drawer";
type Theme = "light" | "dark" | "system";
@ -86,7 +93,10 @@ function TopNav() {
data-role="wrapper"
className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"
>
<div data-role="links" className="flex flex-row items-center gap-3">
<div
data-role="links"
className="hidden md:flex flex-row items-center gap-3"
>
<Link to="/" className="font-bold">
PSW/UI
</Link>
@ -103,6 +113,75 @@ function TopNav() {
);
})}
</div>
<div data-role="mobile-links" className="flex md:hidden">
<DrawerRoot>
<DrawerTrigger>
<Button preset="ghost" size="icon">
{/* mdi:menu */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
/>
</svg>
</Button>
</DrawerTrigger>
<DrawerOverlay>
<DrawerContent className="w-[300px]">
<DrawerClose className="absolute top-2 right-2">
<Button preset="default" size="icon">
{/* mdi:close */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19 6.41L17.59 5 12 9.27 6.41 5 5 6.41 9.27 11 5 17.59 6.41 19 12 14.73 17.59 19 19 17.59 13.41 12 19 6.41"
/>
</svg>
</Button>
</DrawerClose>
<div className="flex flex-col justify-start items-start gap-6 text-lg">
<div className="flex flex-col justify-start items-start gap-3">
<Link to="/" className="font-extrabold">
PSW/UI
</Link>
{RouteObject.mainNav.map((link) => {
return <Link to={link.path}>{link.name}</Link>;
})}
</div>
{Object.entries(RouteObject.sideNav).map(
([categoryName, links]) => {
return (
<div className="flex flex-col justify-start items-start gap-3">
<h2 className="font-bold">{categoryName}</h2>
{links.map((link) => {
return (
<Link
to={link.path}
className="text-base opacity-75"
>
{link.name}
</Link>
);
})}
</div>
);
}
)}
</div>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
</div>
<div data-role="controls" className="flex flex-row items-center">
<ThemeButton />
</div>