From fd9108e77fd8c0f4db5840512f1f0e9a73bce4d3 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sun, 5 May 2024 14:53:01 +0800 Subject: [PATCH] refactor: improve mobile layout navbar display if have much features --- pnpm-lock.yaml | 17 ++++ src/client/components/ui/drawer.tsx | 116 +++++++++++++++++++++++ src/client/package.json | 1 + src/client/pages/Layout/MobileLayout.tsx | 44 ++++++++- 4 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 src/client/components/ui/drawer.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc8bb8f..4e82a2c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -329,6 +329,9 @@ importers: uuid: specifier: ^9.0.1 version: 9.0.1 + vaul: + specifier: ^0.9.0 + version: 0.9.0(@types/react-dom@18.2.7)(@types/react@18.2.78)(react-dom@18.2.0)(react@18.2.0) zod: specifier: ^3.22.2 version: 3.22.2 @@ -27255,6 +27258,20 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + /vaul@0.9.0(@types/react-dom@18.2.7)(@types/react@18.2.78)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.78)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + dev: false + /vfile-location@3.2.0: resolution: {integrity: sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==} dev: false diff --git a/src/client/components/ui/drawer.tsx b/src/client/components/ui/drawer.tsx new file mode 100644 index 0000000..35fb815 --- /dev/null +++ b/src/client/components/ui/drawer.tsx @@ -0,0 +1,116 @@ +import * as React from "react" +import { Drawer as DrawerPrimitive } from "vaul" + +import { cn } from "@/utils/style" + +const Drawer = ({ + shouldScaleBackground = true, + ...props +}: React.ComponentProps) => ( + +) +Drawer.displayName = "Drawer" + +const DrawerTrigger = DrawerPrimitive.Trigger + +const DrawerPortal = DrawerPrimitive.Portal + +const DrawerClose = DrawerPrimitive.Close + +const DrawerOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName + +const DrawerContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + +
+ {children} + + +)) +DrawerContent.displayName = "DrawerContent" + +const DrawerHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DrawerHeader.displayName = "DrawerHeader" + +const DrawerFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DrawerFooter.displayName = "DrawerFooter" + +const DrawerTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerTitle.displayName = DrawerPrimitive.Title.displayName + +const DrawerDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerDescription.displayName = DrawerPrimitive.Description.displayName + +export { + Drawer, + DrawerPortal, + DrawerOverlay, + DrawerTrigger, + DrawerClose, + DrawerContent, + DrawerHeader, + DrawerFooter, + DrawerTitle, + DrawerDescription, +} diff --git a/src/client/package.json b/src/client/package.json index 1ed1cc5..9aa352d 100644 --- a/src/client/package.json +++ b/src/client/package.json @@ -93,6 +93,7 @@ "str2int": "^1.1.0", "tailwind-merge": "^2.2.1", "uuid": "^9.0.1", + "vaul": "^0.9.0", "zod": "^3.22.2", "zustand": "^4.4.1" }, diff --git a/src/client/pages/Layout/MobileLayout.tsx b/src/client/pages/Layout/MobileLayout.tsx index bc21f38..974716c 100644 --- a/src/client/pages/Layout/MobileLayout.tsx +++ b/src/client/pages/Layout/MobileLayout.tsx @@ -4,7 +4,9 @@ import { LuFilePieChart, LuMenu, LuMonitorDot, + LuMoreVertical, LuServer, + LuTableProperties, LuWifi, } from 'react-icons/lu'; import { useTranslation } from '@i18next-toolkit/react'; @@ -17,6 +19,16 @@ import { UserConfig } from './UserConfig'; import { ScrollArea } from '@/components/ui/scroll-area'; import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { Button } from '@/components/ui/button'; +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from '@/components/ui/drawer'; export const MobileLayout: React.FC = React.memo((props) => { const { t } = useTranslation(); @@ -69,8 +81,32 @@ export const MobileLayout: React.FC = React.memo((props) => { to="/monitor" /> - + + + +
+ +
{t('More')}
+
+ + +
+ + +
+ +
@@ -82,6 +118,7 @@ const MobileNavItem: React.FC<{ title: string; icon: IconType; to: string; + extraModal?: boolean; }> = React.memo((props) => { const pathname = useRouterState({ select: (state) => state.location.pathname, @@ -92,10 +129,11 @@ const MobileNavItem: React.FC<{ return (