Close sidebar on tap

m-danya · Jan 31, 2025 · c51233b · c51233b
1 parent 9701396
commit c51233b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/frontend/components/left-panel/logo.tsx b/frontend/components/left-panel/logo.tsx
@@ -1,10 +1,14 @@
 import Image from "next/image";
 import Link from "next/link";
+import { useSidebar } from "@/components/ui/sidebar";
+
 export function Logo() {
+  const { setOpenMobile } = useSidebar();
+
   return (
     <div className="flex justify-center w-full">
       <div className="w-40">
-        <Link href="/">
+        <Link href="/" onClick={() => setOpenMobile(false)}>
           <Image
             src="/logo_hor.png"
             className="w-full h-auto"

diff --git a/frontend/components/left-panel/nav-main.tsx b/frontend/components/left-panel/nav-main.tsx
@@ -6,6 +6,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import Link from "next/link";
 
@@ -19,12 +20,14 @@ export function NavMain({
     isActive?: boolean;
   }[];
 }) {
+  const { setOpenMobile } = useSidebar();
+
   return (
     <SidebarMenu>
       {items.map((item) => (
         <SidebarMenuItem key={item.title}>
           <SidebarMenuButton asChild isActive={item.isActive}>
-            <Link href={item.url}>
+            <Link href={item.url} onClick={() => setOpenMobile(false)}>
               <item.icon />
               <span>{item.title}</span>
             </Link>

diff --git a/frontend/components/left-panel/nav-secondary.tsx b/frontend/components/left-panel/nav-secondary.tsx
@@ -7,6 +7,7 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
 
 import Link from "next/link";
@@ -23,14 +24,16 @@ export function NavSecondary({
     badge?: React.ReactNode;
   }[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  const { setOpenMobile } = useSidebar();
+
   return (
     <SidebarGroup {...props}>
       <SidebarGroupContent>
         <SidebarMenu>
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton asChild>
-                <Link href={item.url}>
+                <Link href={item.url} onClick={() => setOpenMobile(false)}>
                   <item.icon />
                   <span>{item.title}</span>
                 </Link>

diff --git a/frontend/components/left-panel/nav-sections.tsx b/frontend/components/left-panel/nav-sections.tsx
@@ -18,6 +18,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ArrowDownUp, ChevronRight, Pencil, Plus, Trash } from "lucide-react";
@@ -267,9 +268,11 @@ const TreeElement = ({
   const displayFullIdent = !withChevron && withIdentIfNoChevron;
   const displayMiniIdent = !withChevron && !withIdentIfNoChevron;
   const router = useRouter();
+  const { setOpenMobile } = useSidebar();
 
   const handleClick = () => {
     if (clickable) {
+      setOpenMobile(false);
       router.push(`/section/${section.id}`);
     }
   };

diff --git a/frontend/components/ui/sidebar.tsx b/frontend/components/ui/sidebar.tsx
@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
@@ -196,6 +196,7 @@ const Sidebar = React.forwardRef<
     if (isMobile) {
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetTitle className="hidden"></SheetTitle>
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"