Merge pull request #15 from m-danya/frontend-mobile-fixes

Frontend mobile fixes

Author: m-danya

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"

frontend/components/left-panel/main-sidebar-wrapper.tsx

@@ -16,12 +16,11 @@ export function MainSidebarWrapper({
       <AppSidebar />
       <SidebarInset>
         <header className="flex h-14 shrink-0 items-center gap-2">
-          <div className="flex flex-1 items-center gap-2 px-3">
+          <div className="flex flex-1 items-center gap-2 px-5">
             <SidebarTrigger />
           </div>
-          <div className="ml-auto px-3">{/* <NavActions /> */}</div>
         </header>
-        <div>{children}</div>
+        <div className="px-5">{children}</div>
       </SidebarInset>
     </SidebarProvider>
   );

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>

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>

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}`);
     }
   };

frontend/components/tasks/section.tsx

@@ -58,9 +58,13 @@ export function Section({ sectionId }: { sectionId: string }) {
   }, [section]);
 
   const dndSensors = useSensors(
-    useSensor(MouseSensor),
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
     useSensor(TouchSensor, {
-      activationConstraint: { distance: 5, delay: 100 },
+      activationConstraint: { distance: 5, delay: 500 },
     })
   );
 

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"