fix: mobile sheet ui fix (#20)

This commit is contained in:
San45600 2024-02-09 11:11:58 +08:00 committed by GitHub
parent 4c32248d86
commit 1939ff4153
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 3 deletions

View File

@ -29,6 +29,7 @@ export function Navbar() {
const { organization } = useOrganization(); const { organization } = useOrganization();
const _isDesktop = useMediaQuery("(min-width: 1024px)"); const _isDesktop = useMediaQuery("(min-width: 1024px)");
const [isDesktop, setIsDesktop] = useState(true); const [isDesktop, setIsDesktop] = useState(true);
const [isSheetOpen, setSheetOpen] = useState(false);
useEffect(() => { useEffect(() => {
setIsDesktop(_isDesktop); setIsDesktop(_isDesktop);
}, [_isDesktop]); }, [_isDesktop]);
@ -36,7 +37,7 @@ export function Navbar() {
<> <>
<div className="flex flex-row items-center gap-4"> <div className="flex flex-row items-center gap-4">
{!isDesktop && ( {!isDesktop && (
<Sheet> <Sheet open={isSheetOpen} onOpenChange={(open) => setSheetOpen(open)}>
<SheetTrigger asChild> <SheetTrigger asChild>
<button className="flex items-center justify-center w-8 h-8 p-2"> <button className="flex items-center justify-center w-8 h-8 p-2">
<Menu /> <Menu />
@ -47,7 +48,10 @@ export function Navbar() {
<SheetTitle className="text-start">Comfy Deploy</SheetTitle> <SheetTitle className="text-start">Comfy Deploy</SheetTitle>
</SheetHeader> </SheetHeader>
<div className="grid h-full grid-rows-[1fr_auto]"> <div className="grid h-full grid-rows-[1fr_auto]">
<NavbarMenu className=" h-full" /> <NavbarMenu
className=" h-full"
closeSheet={() => setSheetOpen(false)}
/>
{/* <OrganizationSwitcher {/* <OrganizationSwitcher
appearance={{ appearance={{
elements: { elements: {

View File

@ -9,7 +9,13 @@ import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useMediaQuery } from "usehooks-ts"; import { useMediaQuery } from "usehooks-ts";
export function NavbarMenu({ className }: { className?: string }) { export function NavbarMenu({
className,
closeSheet,
}: {
className?: string;
closeSheet?: () => void;
}) {
const _isDesktop = useMediaQuery("(min-width: 1024px)"); const _isDesktop = useMediaQuery("(min-width: 1024px)");
const [isDesktop, setIsDesktop] = useState(true); const [isDesktop, setIsDesktop] = useState(true);
useEffect(() => { useEffect(() => {
@ -68,6 +74,9 @@ export function NavbarMenu({ className }: { className?: string }) {
<Link <Link
key={page.name} key={page.name}
href={page.path} href={page.path}
onClick={() => {
if (!!closeSheet) closeSheet();
}}
className="p-2 hover:bg-gray-100/20 hover:underline" className="p-2 hover:bg-gray-100/20 hover:underline"
> >
{page.name} {page.name}