URL Params Form (#420)

* feat create form to edit URL params in views

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

@@ -1,6 +1,6 @@
-@use "../../../theme/v2Styles" as *;
-@use "../../../theme/mixins" as *;
-@use "../../../theme/ontimeColours" as *;
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/mixins' as *;
+@use '../../../theme/ontimeColours' as *;
 
 $menu-bg: $gray-1200;
 $menu-hover-bg: $gray-1350;
@@ -14,14 +14,26 @@ $button-size: 48px;
   transform: rotate(180deg);
 }
 
-.navButton {
-  z-index: 2;
-  position: absolute;
-  left: 0.5em;
-  top: 0.5em;
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  padding: 0.5em;
+
   transition-property: opacity;
   transition-duration: 0.3s;
+
   opacity: 1;
+  position: fixed;
+  left: 0;
+  top: 0;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.button {
   font-size: 24px;
   color: $icon-color;
   background-color: $button-bg;
@@ -30,10 +42,11 @@ $button-size: 48px;
   display: grid;
   place-content: center;
   border-radius: 3px;
+}
 
-  &.hidden {
-    opacity: 0;
-  }
+.navButton {
+  @extend .button;
+  z-index: 2;
 }
 
 .menuContainer {

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

@@ -1,10 +1,11 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
 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 { navigatorConstants } from '../../../viewerConfig';
@@ -21,12 +22,13 @@ export default function NavigationMenu() {
   const { isFullScreen, toggleFullScreen } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
   const [showButton, setShowButton] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
   useClickOutside(menuRef, () => setShowMenu(false));
 
   const toggleMenu = () => setShowMenu((prev) => !prev);
-  useKeyDown(toggleMenu, ' ');
+  useKeyDown(toggleMenu, ' ', { isDisabled: searchParams.get('edit') === 'true' });
 
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
@@ -49,63 +51,68 @@ export default function NavigationMenu() {
   const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
   const handleFullscreen = () => toggleFullScreen();
   const handleMirror = () => toggleMirror();
+  const showEditFormDrawer = () => {
+    searchParams.append('edit', 'true');
+    setSearchParams(searchParams);
+  };
 
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef} className={mirror ? style.mirror : ''}>
-      <button
-        onClick={toggleMenu}
-        aria-label='toggle menu'
-        className={`${style.navButton} ${!showButton && !showMenu ? style.hidden : ''}`}
-      >
-        <IoApps />
-      </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
-              {isFullScreen ? <IoContract /> : <IoExpand />}
+      <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
+        <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>
+          <IoApps />
+        </button>
+        <button className={style.button} onClick={showEditFormDrawer}>
+          <IoPencilSharp />
+        </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
+                {isFullScreen ? <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}>*/}
+              {/*  Rename Client*/}
+              {/*</div>*/}
             </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}>*/}
-            {/*  Rename Client*/}
-            {/*</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>
+            ))}
           </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>
-          ))}
-        </div>
-      )}
+        )}
+      </div>
     </div>,
+
     document.body,
   );
 }