Navigation3 (#860)

apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
+
+import { debounce } from '../../utils/debounce';
+
+import style from './NavigationMenu.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings: () => void;
+}
+
+export default function FloatingNavigation(props: FloatingNavigationProps) {
+  const { toggleMenu, toggleSettings } = props;
+  const [showButton, setShowButton] = useState(false);
+
+  // show on mouse move
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setShowButton(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setShowButton(false), 3000);
+    };
+
+    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
+
+    document.addEventListener('mousemove', debouncedShowMenu);
+    return () => {
+      document.removeEventListener('mousemove', debouncedShowMenu);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={`${style.buttonContainer} ${!showButton ? style.hidden : ''}`}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={style.navButton}
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </button>
+      <button
+        className={style.button}
+        onClick={toggleSettings}
+        aria-label='toggle settings'
+        data-testid='navigation__toggle-settings'
+      >
+        <IoSettingsOutline />
+      </button>
+    </div>
+  );
+}

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,89 +1,33 @@
-import { memo, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { memo, PropsWithChildren, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import {
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { IoApps } from '@react-icons/all-files/io5/IoApps';
-import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
+import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay } from '@chakra-ui/react';
 
 import useClickOutside from '../../hooks/useClickOutside';
-import { debounce } from '../../utils/debounce';
-
-import style from './NavigationMenu.module.scss';
 
 interface NavigationMenuProps {
-  editCallback: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
 function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
-  const { children, editCallback } = props;
+  const { children, isOpen, onClose } = props;
 
-  const [showButton, setShowButton] = useState(false);
-  const { isOpen, onOpen, onClose } = useDisclosure();
   const menuRef = useRef<HTMLDivElement | null>(null);
 
   useClickOutside(menuRef, () => onClose);
 
-  const toggleMenu = () => (isOpen ? onClose() : onOpen());
-
-  // show on mouse move
-  useEffect(() => {
-    let fadeOut: NodeJS.Timeout | null = null;
-    const setShowMenuTrue = () => {
-      setShowButton(true);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-      fadeOut = setTimeout(() => setShowButton(false), 3000);
-    };
-
-    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
-
-    document.addEventListener('mousemove', debouncedShowMenu);
-    return () => {
-      document.removeEventListener('mousemove', debouncedShowMenu);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-    };
-  }, []);
-
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef}>
-      <div className={`${style.buttonContainer} ${!showButton && !isOpen ? style.hidden : ''}`}>
-        <button
-          onClick={toggleMenu}
-          aria-label='toggle menu'
-          className={style.navButton}
-          data-testid='navigation__toggle-menu'
-        >
-          <IoApps />
-        </button>
-        <button
-          className={style.button}
-          onClick={editCallback}
-          aria-label='toggle settings'
-          data-testid='navigation__toggle-settings'
-        >
-          <IoSettingsOutline />
-        </button>
-        <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerHeader>
-              <DrawerCloseButton size='lg' />
-              Ontime
-            </DrawerHeader>
-            <DrawerBody padding={0}>{children}</DrawerBody>
-          </DrawerContent>
-        </Drawer>
-      </div>
+      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerCloseButton size='lg' />
+            Ontime
+          </DrawerHeader>
+          <DrawerBody padding={0}>{children}</DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </div>,
     document.body,
   );

apps/client/src/common/components/navigation-menu/ProductionNavigationMenu.tsx

@@ -15,16 +15,18 @@ import NavigationMenu from './NavigationMenu';
 import style from './NavigationMenu.module.scss';
 
 interface ProductionNavigationMenuProps {
-  handleSettings: () => void;
+  isMenuOpen: boolean;
+  onMenuClose: () => void;
 }
 
-function ProductionNavigationMenu({ handleSettings }: ProductionNavigationMenuProps) {
+function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
+  const { isMenuOpen, onMenuClose } = props;
   const location = useLocation();
   const { fullscreen, toggle } = useFullscreen();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
-    <NavigationMenu editCallback={handleSettings}>
+    <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose}>
       <RenameClientModal isOpen={isOpen} onClose={onClose} />
       <div className={style.buttonsContainer}>
         <div

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -12,6 +12,7 @@ import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
 
 import RenameClientModal from './rename-client-modal/RenameClientModal';
+import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
 
 import style from './NavigationMenu.module.scss';
@@ -21,66 +22,72 @@ function ViewNavigationMenu() {
   const { fullscreen, toggle } = useFullscreen();
   const { toggleMirror } = useViewOptionsStore();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
+  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
 
   const showEditFormDrawer = useCallback(() => {
     searchParams.set('edit', 'true');
     setSearchParams(searchParams);
   }, [searchParams, setSearchParams]);
 
+  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
+
   return (
-    <NavigationMenu editCallback={showEditFormDrawer}>
-      <RenameClientModal isOpen={isOpen} onClose={onClose} />
-      <div className={style.buttonsContainer}>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={toggle}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && toggle();
-          }}
-        >
-          Toggle Fullscreen
-          {fullscreen ? <IoContract /> : <IoExpand />}
+    <>
+      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose}>
+        <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
+        <div className={style.buttonsContainer}>
+          <div
+            className={style.link}
+            tabIndex={0}
+            role='button'
+            onClick={toggle}
+            onKeyDown={(event) => {
+              isKeyEnter(event) && toggle();
+            }}
+          >
+            Toggle Fullscreen
+            {fullscreen ? <IoContract /> : <IoExpand />}
+          </div>
+          <div
+            className={style.link}
+            tabIndex={0}
+            role='button'
+            onClick={() => toggleMirror()}
+            onKeyDown={(event) => {
+              isKeyEnter(event) && toggleMirror();
+            }}
+          >
+            Flip Screen
+            <IoSwapVertical />
+          </div>
+          <div
+            className={style.link}
+            tabIndex={0}
+            role='button'
+            onClick={onRenameOpen}
+            onKeyDown={(event) => {
+              isKeyEnter(event) && onRenameOpen();
+            }}
+          >
+            Rename Client
+          </div>
         </div>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={() => toggleMirror()}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && toggleMirror();
-          }}
-        >
-          Flip Screen
-          <IoSwapVertical />
-        </div>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={onOpen}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && onOpen();
-          }}
-        >
-          Rename Client
-        </div>
-      </div>
-      <hr className={style.separator} />
-      {navigatorConstants.map((route) => (
-        <Link
-          key={route.url}
-          to={route.url}
-          className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
-          tabIndex={0}
-        >
-          {route.label}
-          <IoArrowUp className={style.linkIcon} />
-        </Link>
-      ))}
-    </NavigationMenu>
+        <hr className={style.separator} />
+        {navigatorConstants.map((route) => (
+          <Link
+            key={route.url}
+            to={route.url}
+            className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
+            tabIndex={0}
+          >
+            {route.label}
+            <IoArrowUp className={style.linkIcon} />
+          </Link>
+        ))}
+      </NavigationMenu>
+    </>
   );
 }