console: Add onMenuClick to open drawer

TheThingsNetwork · Dec 27, 2023 · 438a3d5 · 438a3d5
1 parent d564957
commit 438a3d5
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 71 deletions.
diff --git a/pkg/webui/components/dropdown-v2/dropdown.styl b/pkg/webui/components/dropdown-v2/dropdown.styl
@@ -29,8 +29,8 @@ ul.dropdown
   transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s
 
   &.open
-    opacity: 1;
-    visibility: visible;
+    opacity: 1
+    visibility: visible
     transition: opacity 0.2s ease-in-out, visibility 0s linear
 
   &.below

diff --git a/pkg/webui/components/header-v2/index.js b/pkg/webui/components/header-v2/index.js
@@ -33,6 +33,7 @@ const Header = ({
   starDropdownItems,
   profileDropdownItems,
   user,
+  onMenuClick,
   ...rest
 }) => {
   const addRef = useRef(null)
@@ -44,7 +45,7 @@ const Header = ({
     <header {...rest} className={classnames(className, style.container)}>
       <Breadcrumbs className="s:d-none" breadcrumbs={breadcrumbs} />
       <div className="d-none s:d-flex al-center gap-cs-xs">
-        <Button secondary icon="menu" />
+        <Button secondary icon="menu" onClick={onMenuClick} />
         <Link to="/" className="d-flex">
           <img {...logo} className={style.logo} />
         </Link>
@@ -63,7 +64,7 @@ const Header = ({
         <ProfileDropdown
           brandLogo={brandLogo}
           data-test-id="profile-dropdown"
-          profilePicture={user.profile_picture}
+          profilePicture={user?.profile_picture}
         >
           {profileDropdownItems}
         </ProfileDropdown>
@@ -87,6 +88,8 @@ Header.propTypes = {
   /** The classname applied to the component. */
   className: PropTypes.string,
   logo: imgPropType.isRequired,
+  /** A handler for when the menu button is clicked. */
+  onMenuClick: PropTypes.func.isRequired,
   /** The dropdown items when the profile button is clicked. */
   profileDropdownItems: PropTypes.node.isRequired,
   /** The dropdown items when the star button is clicked. */

diff --git a/pkg/webui/console/containers/side-bar/index.js b/pkg/webui/console/containers/side-bar/index.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import classnames from 'classnames'
 
@@ -22,6 +22,7 @@ import SearchButton from '@ttn-lw/components/sidebar/search-button'
 import SideFooter from '@ttn-lw/components/sidebar/side-footer'
 
 import getCookie from '@ttn-lw/lib/cookie'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import SidebarNavigation from './navigation'
 import SidebarContext from './context'
@@ -33,13 +34,11 @@ import style from './side-bar.styl'
 const getViewportWidth = () =>
   Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
 
-const Sidebar = () => {
+const Sidebar = ({ isDrawerOpen }) => {
   const viewportWidth = getViewportWidth()
   const isMobile = viewportWidth <= LAYOUT.BREAKPOINTS.M
   const { pathname } = useLocation()
   const [isMinimized, setIsMinimized] = useState(false)
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
-  const node = useRef()
 
   const onMinimizeToggle = useCallback(async () => {
     setIsMinimized(prev => !prev)
@@ -66,45 +65,6 @@ const Sidebar = () => {
     },
   )
 
-  const closeDrawer = useCallback(() => {
-    setIsDrawerOpen(false)
-    document.body.classList.remove(style.scrollLock)
-  }, [])
-
-  const openDrawer = useCallback(() => {
-    setIsDrawerOpen(true)
-    document.body.classList.add(style.scrollLock)
-  }, [])
-
-  useEffect(() => {
-    const onClickOutside = e => {
-      if (isDrawerOpen && node.current && !node.current.contains(e.target)) {
-        closeDrawer()
-      }
-    }
-
-    if (isDrawerOpen) {
-      document.addEventListener('mousedown', onClickOutside)
-      return () => document.removeEventListener('mousedown', onClickOutside)
-    }
-  }, [isDrawerOpen, closeDrawer])
-
-  const onDrawerExpandClick = useCallback(() => {
-    if (!isDrawerOpen) {
-      openDrawer()
-    } else {
-      closeDrawer()
-    }
-  }, [isDrawerOpen, openDrawer, closeDrawer])
-
-  // TODO: Add this function in the header component to close and open the drawer sidebar.
-  // To be done after the merge of the header component.
-  const onLeafItemClick = useCallback(() => {
-    if (isDrawerOpen) {
-      onDrawerExpandClick()
-    }
-  }, [isDrawerOpen, onDrawerExpandClick])
-
   return (
     <div className={sidebarClassnames} id="sidebar-v2">
       <SidebarContext.Provider value={{ topEntities, onMinimizeToggle, isMinimized }}>
@@ -122,4 +82,12 @@ const Sidebar = () => {
   )
 }
 
+Sidebar.propTypes = {
+  isDrawerOpen: PropTypes.bool,
+}
+
+Sidebar.defaultProps = {
+  isDrawerOpen: false,
+}
+
 export default Sidebar
diff --git a/pkg/webui/console/views/app/index.js b/pkg/webui/console/views/app/index.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   Route,
@@ -27,7 +27,7 @@ import classnames from 'classnames'
 import { ToastContainer } from '@ttn-lw/components/toast'
 import sidebarStyle from '@ttn-lw/components/navigation/side/side.styl'
 
-import SideBar from '@ttn-lw/containers/side-bar'
+import Footer from '@ttn-lw/containers/footer'
 
 import GenericNotFound from '@ttn-lw/lib/components/full-view-error/not-found'
 import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
@@ -84,38 +84,74 @@ const Layout = () => {
   const siteTitle = selectApplicationSiteTitle()
   const siteName = selectApplicationSiteName()
 
+  // For the mobile side menu drawer functionality.
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const node = useRef()
+
+  const openDrawer = useCallback(() => {
+    setIsDrawerOpen(true)
+    document.body.classList.add(style.scrollLock)
+  }, [])
+
+  const closeDrawer = useCallback(() => {
+    setIsDrawerOpen(false)
+    document.body.classList.remove(style.scrollLock)
+  }, [])
+
+  useEffect(() => {
+    const onClickOutside = e => {
+      if (isDrawerOpen && node.current && !node.current.contains(e.target)) {
+        closeDrawer()
+      }
+    }
+
+    if (isDrawerOpen) {
+      document.addEventListener('mousedown', onClickOutside)
+      return () => document.removeEventListener('mousedown', onClickOutside)
+    }
+  }, [isDrawerOpen, closeDrawer])
+
+  // Pass this function to the header prop `onMenuClick`.
+  const onDrawerExpandClick = useCallback(() => {
+    if (!isDrawerOpen) {
+      openDrawer()
+    } else {
+      closeDrawer()
+    }
+  }, [isDrawerOpen, openDrawer, closeDrawer])
+  // End of mobile side menu drawer functionality
+
   return (
     <>
       <ScrollRestoration getKey={getScrollRestorationKey} />
       <ErrorView errorRender={errorRender}>
-        <div>
+        <div className="w-full h-full">
           <IntlHelmet
             titleTemplate={`%s - ${siteTitle ? `${siteTitle} - ` : ''}${siteName}`}
             defaultTitle={siteName}
           />
           <div id="modal-container" />
-          <div className="grid">
-            <SideBar />
-            <main className={classnames(style.main, 'w-full', 'h-full', 'item-8', 'item-start-4')}>
-              <WithAuth
-                user={user}
-                fetching={fetching}
-                error={error}
-                errorComponent={FullViewErrorInner}
-                rights={rights}
-                isAdmin={isAdmin}
-              >
-                <div className={classnames('breadcrumbs', style.mobileBreadcrumbs)} />
-                <div id="sidebar" className={sidebarStyle.container} />
-                <div className={style.content}>
-                  <div className={classnames('breadcrumbs', style.desktopBreadcrumbs)} />
-                  <div className={style.stage} id="stage">
-                    <Outlet />
-                  </div>
+          <Header />
+          <main className={style.main}>
+            <WithAuth
+              user={user}
+              fetching={fetching}
+              error={error}
+              errorComponent={FullViewErrorInner}
+              rights={rights}
+              isAdmin={isAdmin}
+            >
+              <div className={classnames('breadcrumbs', style.mobileBreadcrumbs)} />
+              <div id="sidebar" className={sidebarStyle.container} />
+              <div className={style.content}>
+                <div className={classnames('breadcrumbs', style.desktopBreadcrumbs)} />
+                <div className={style.stage} id="stage">
+                  <Outlet />
                 </div>
-              </WithAuth>
-            </main>
-          </div>
+              </div>
+            </WithAuth>
+          </main>
+          <Footer className={style.footer} />
         </div>
       </ErrorView>
     </>