Navigation (#850)

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -1,12 +1,11 @@
 @use '../../../theme/mixins' as *;
 
-$menu-bg: $gray-1200;
 $menu-hover-bg: $gray-1350;
 $menu-focus-bg: $gray-1300;
 
 $icon-color: $ui-white;
 $button-bg: $gray-1050;
-$button-size: 48px;
+$button-size: 3rem;
 
 .buttonContainer {
   display: flex;
@@ -21,7 +20,7 @@ $button-size: 48px;
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 2;
+  z-index: 12;
 
   &.hidden {
     opacity: 0;
@@ -29,7 +28,7 @@ $button-size: 48px;
 }
 
 .button {
-  font-size: 24px;
+  font-size: 1.5rem;
   color: $icon-color;
   background-color: $button-bg;
   width: $button-size;
@@ -44,31 +43,10 @@ $button-size: 48px;
   z-index: 3;
 }
 
-.menuContainer {
-  top: 0;
-  left: 0;
-  height: fit-content;
-  position: absolute;
-  background-color: $menu-bg;
-  min-width: 200px;
-  border-radius: 0 0 24px 0;
-  border-right: 1px solid $border-color-ondark;
-
-  box-shadow: $box-shadow-l2;
-  padding-bottom: 1rem;
-
-  max-height: 100vh;
-  overflow-y: auto;
-}
-
-.buttonsContainer {
-  margin-top: calc(56px + 1rem);
-}
-
 .link {
   @include action-link;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1.5rem;
 
   &:hover {
     background-color: $menu-hover-bg;

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

@@ -1,39 +1,36 @@
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation, useSearchParams } from 'react-router-dom';
-import { useDisclosure } from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoContract } from '@react-icons/all-files/io5/IoContract';
-import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
-import { IoPencilSharp } from '@react-icons/all-files/io5/IoPencilSharp';
-import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
-import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
-import { useViewOptionsStore } from '../../stores/viewOptions';
-import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
+import { debounce } from '../../utils/debounce';
 
 import style from './NavigationMenu.module.scss';
 
-function NavigationMenu() {
-  const location = useLocation();
+interface NavigationMenuProps {
+  editCallback: () => void;
+}
+
+function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
+  const { children, editCallback } = props;
 
-  const { fullscreen, toggle } = useFullscreen();
-  const { toggleMirror } = useViewOptionsStore();
   const [showButton, setShowButton] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [showMenu, setShowMenu] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const menuRef = useRef<HTMLDivElement | null>(null);
 
-  useClickOutside(menuRef, () => setShowMenu(false));
+  useClickOutside(menuRef, () => onClose);
 
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const toggleMenu = () => setShowMenu((prev) => !prev);
+  const toggleMenu = () => (isOpen ? onClose() : onOpen());
 
   // show on mouse move
   useEffect(() => {
@@ -45,98 +42,49 @@ function NavigationMenu() {
       }
       fadeOut = setTimeout(() => setShowButton(false), 3000);
     };
-    document.addEventListener('mousemove', setShowMenuTrue);
+
+    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
+
+    document.addEventListener('mousemove', debouncedShowMenu);
     return () => {
-      document.removeEventListener('mousemove', setShowMenuTrue);
+      document.removeEventListener('mousemove', debouncedShowMenu);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
     };
   }, []);
 
-  const handleFullscreen = () => toggle();
-  const handleMirror = () => toggleMirror();
-
-  const showEditFormDrawer = () => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  };
-
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef}>
-      <RenameClientModal isOpen={isOpen} onClose={onClose} />
-      <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
-        <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>
+      <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={showEditFormDrawer}>
-          <IoPencilSharp />
+        <button
+          className={style.button}
+          onClick={editCallback}
+          aria-label='toggle settings'
+          data-testid='navigation__toggle-settings'
+        >
+          <IoSettingsOutline />
         </button>
-        {showMenu && (
-          <div className={style.menuContainer} data-testid='navigation-menu'>
-            <div className={style.buttonsContainer}>
-              <div
-                className={style.link}
-                tabIndex={0}
-                role='button'
-                onClick={handleFullscreen}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && handleFullscreen();
-                }}
-              >
-                Toggle Fullscreen
-                {fullscreen ? <IoContract /> : <IoExpand />}
-              </div>
-              <div
-                className={style.link}
-                tabIndex={0}
-                role='button'
-                onClick={handleMirror}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && handleMirror();
-                }}
-              >
-                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} />
-            <Link to='/cuesheet' className={style.link} tabIndex={0}>
-              Cuesheet
-              <IoArrowUp className={style.linkIcon} />
-            </Link>
-            <Link to='/op' className={style.link} tabIndex={0}>
-              Operator
-              <IoArrowUp className={style.linkIcon} />
-            </Link>
-            <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>
-            ))}
-          </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>
     </div>,
-
     document.body,
   );
 }

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

@@ -0,0 +1,91 @@
+import { memo } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+
+import { navigatorConstants } from '../../../viewerConfig';
+import { isKeyEnter } from '../../utils/keyEvent';
+
+import RenameClientModal from './rename-client-modal/RenameClientModal';
+import NavigationMenu from './NavigationMenu';
+
+import style from './NavigationMenu.module.scss';
+
+interface ProductionNavigationMenuProps {
+  handleSettings: () => void;
+}
+
+function ProductionNavigationMenu({ handleSettings }: ProductionNavigationMenuProps) {
+  const location = useLocation();
+  const { fullscreen, toggle } = useFullscreen();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <NavigationMenu editCallback={handleSettings}>
+      <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 />}
+        </div>
+        <div
+          className={style.link}
+          tabIndex={0}
+          role='button'
+          onClick={onOpen}
+          onKeyDown={(event) => {
+            isKeyEnter(event) && onOpen();
+          }}
+        >
+          Rename Client
+        </div>
+      </div>
+      <hr className={style.separator} />
+      <Link
+        to='/editor'
+        className={`${style.link} ${'/editor' === location.pathname ? style.current : ''}`}
+        tabIndex={0}
+      >
+        Editor
+        <IoArrowUp className={style.linkIcon} />
+      </Link>
+      <Link
+        to='/cuesheet'
+        className={`${style.link} ${'/cuesheet' === location.pathname ? style.current : ''}`}
+        tabIndex={0}
+      >
+        Cuesheet
+        <IoArrowUp className={style.linkIcon} />
+      </Link>
+      <Link to='/op' className={`${style.link} ${'/op' === location.pathname ? style.current : ''}`} tabIndex={0}>
+        Operator
+        <IoArrowUp className={style.linkIcon} />
+      </Link>
+      <hr className={style.separator} />
+      {navigatorConstants.map((route) => (
+        <Link
+          key={route.url}
+          to={route.url}
+          className={`${style.link} ${route.url === location.pathname ? style.current : ''}`}
+          tabIndex={0}
+        >
+          {route.label}
+          <IoArrowUp className={style.linkIcon} />
+        </Link>
+      ))}
+    </NavigationMenu>
+  );
+}
+
+export default memo(ProductionNavigationMenu);

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

@@ -0,0 +1,87 @@
+import { memo, useCallback } from 'react';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+
+import { navigatorConstants } from '../../../viewerConfig';
+import { useViewOptionsStore } from '../../stores/viewOptions';
+import { isKeyEnter } from '../../utils/keyEvent';
+
+import RenameClientModal from './rename-client-modal/RenameClientModal';
+import NavigationMenu from './NavigationMenu';
+
+import style from './NavigationMenu.module.scss';
+
+function ViewNavigationMenu() {
+  const location = useLocation();
+  const { fullscreen, toggle } = useFullscreen();
+  const { toggleMirror } = useViewOptionsStore();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
+  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 />}
+        </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>
+  );
+}
+
+export default memo(ViewNavigationMenu);

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.module.scss

@@ -1,5 +0,0 @@
-.modalBody {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.tsx

@@ -13,8 +13,6 @@ import {
 import { setClientName } from '../../../hooks/useSocket';
 import { useSocketClientName } from '../../../stores/connectionName';
 
-import style from './RenameClientModal.module.scss';
-
 interface RenameClientModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -45,18 +43,18 @@ export default function RenameClientModal({ isOpen, onClose }: RenameClientModal
       motionPreset='slideInBottom'
       scrollBehavior='inside'
       preserveScrollBarGap
-      variant='ontime-small'
+      variant='ontime'
     >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>Rename client</ModalHeader>
         <ModalCloseButton />
-        <ModalBody className={style.modalBody}>
+        <ModalBody>
           <Input
             placeholder='Connection must have a name'
             defaultValue={newName}
             onChange={(e) => setNewName(e.target.value)}
-            variant='ontime-filled-on-light'
+            variant='ontime-filled'
           />
           <Button
             isDisabled={newName === clientName || !newName}