Merge pull request #782 from trash-lobster/next

Close sidebar when clicking on bottom icon buttons when in mobile
HolodexNet · Aug 31, 2024 · e12eaa0 · e12eaa0
2 parents d7a137d + 5839ef2
commit e12eaa0
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
@@ -29,6 +29,7 @@ export function Sidebar() {
 
   const floating = useAtomValue(isSidebarFloatingAtom);
   const [open, setOpen] = useAtom(isSidebarOpenAtom);
+  const isMobile = useAtomValue(isMobileAtom);
   const toggle = useSetAtom(toggleSidebarAtom);
   const fs = useAtomValue(sidebarShouldBeFullscreenAtom);
 
@@ -147,7 +148,13 @@ export function Sidebar() {
           </Tooltip>
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
-              <Button variant="ghost" className="p-2" size="icon-lg" asChild>
+              <Button
+                variant="ghost"
+                className="p-2"
+                size="icon-lg"
+                asChild
+                onClick={isMobile ? toggle : undefined}
+              >
                 <Link to="/settings">
                   <span className="i-heroicons:cog-6-tooth" />
                 </Link>
@@ -157,7 +164,13 @@ export function Sidebar() {
           </Tooltip>{" "}
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
-              <Button variant="ghost" className="p-2" size="icon-lg" asChild>
+              <Button
+                variant="ghost"
+                className="p-2"
+                size="icon-lg"
+                asChild
+                onClick={isMobile ? toggle : undefined}
+              >
                 <Link to="/about">
                   <span className="i-heroicons:question-mark-circle" />
                 </Link>