Merge pull request #3007 from clari182/fix/mobile-side-menu

setNavCollapsed for quick access
responsible-ai-collaborative · Aug 16, 2024 · 58c20a2 · 58c20a2
2 parents beb7ca6 + 4730374
commit 58c20a2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/site/gatsby-site/src/components/discover/QuickAccess.js b/site/gatsby-site/src/components/discover/QuickAccess.js
@@ -4,7 +4,11 @@ import { Trans } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faPlus } from '@fortawesome/free-solid-svg-icons';
 
-export default function DiscoverQuickAccess({ className = '', isCollapsed = false }) {
+export default function DiscoverQuickAccess({
+  className = '',
+  isCollapsed = false,
+  setNavCollapsed = null,
+}) {
   return (
     <div
       className={`${className || ''} ${
@@ -16,6 +20,7 @@ export default function DiscoverQuickAccess({ className = '', isCollapsed = fals
         className={`test-[#001934] fs-5 border-1 border-transparent rounded cursor-pointer inline-block text-base font-normal text-center no-underline select-none align-middle transition-btn shadow w-1/2 ${
           isCollapsed ? 'py-1 px-1' : 'pb-2 py-1.5 px-2 h-16 text-black'
         }  bg-white hover:bg-blue-700 hover:text-white`}
+        onClick={() => setNavCollapsed && setNavCollapsed(true)}
       >
         <div className={`${isCollapsed ? '' : 'text-2xl'}`}>
           <FontAwesomeIcon icon={faSearch} />
@@ -33,6 +38,7 @@ export default function DiscoverQuickAccess({ className = '', isCollapsed = fals
         className={`ml-3 fs-5 border-1 border-transparent rounded cursor-pointer inline-block text-base font-normal text-center no-underline select-none align-middle transition-btn shadow w-1/2 ${
           isCollapsed ? 'py-1 px-1' : 'pb-2 py-1.5 px-2 h-16 text-black'
         }  bg-white hover:bg-blue-700 hover:text-white`}
+        onClick={() => setNavCollapsed && setNavCollapsed(true)}
       >
         <div className={`${isCollapsed ? '' : 'text-2xl'}`}>
           <FontAwesomeIcon icon={faPlus} />

diff --git a/site/gatsby-site/src/components/sidebar/index.js b/site/gatsby-site/src/components/sidebar/index.js
@@ -198,7 +198,7 @@ const Sidebar = ({ defaultCollapsed = false, location = null, setNavCollapsed })
         }}
       >
         <span className="md:border-b-1 md:border-b-gray-200">
-          <QuickAccess isCollapsed={isCollapsed} />
+          <QuickAccess isCollapsed={isCollapsed} setNavCollapsed={setNavCollapsed} />
         </span>
 
         <ul