clean up nav format

quantuminformation · Sep 4, 2024 · 75a3e55 · 75a3e55
1 parent fe17438
commit 75a3e55
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 149 deletions.
diff --git a/backends/WebSocketsVideoBroadcast/package.json b/backends/WebSocketsVideoBroadcast/package.json
diff --git a/backends/WebSocketsVideoBroadcast/public/broadcast.html b/backends/WebSocketsVideoBroadcast/public/broadcast.html
diff --git a/backends/WebSocketsVideoBroadcast/public/styles.css b/backends/WebSocketsVideoBroadcast/public/styles.css
diff --git a/backends/WebSocketsVideoBroadcast/public/watch.js b/backends/WebSocketsVideoBroadcast/public/watch.js
diff --git a/backends/WebSocketsVideoBroadcast/server.js b/backends/WebSocketsVideoBroadcast/server.js
diff --git a/backends/webrtc/signalling-server.ts b/backends/webrtc/signalling-server.ts
diff --git a/js/components/nav.js b/js/components/nav.js
@@ -1,143 +1,125 @@
-//stored in /components/nav.js
+// stored in /components/nav.js
 
 /**
- * IMPORTANT This component assumes a single parent wrapper alongside a main sibling for content so
- * that it can change the flex direction of the parent
- * @param hostComponent
+ * IMPORTANT: This component assumes a single parent wrapper alongside a main sibling for content
+ * so that it can change the flex direction of the parent.
  *
- * @example
- * in sidebar mode
- *       <nav data-component="nav" data-header-bar="true"></nav>
+ * @param {HTMLElement} hostComponent
  *
+ * @example
+ * In sidebar mode:
+ * <nav data-component="nav" data-header-bar="true"></nav>
  */
+
 export default (hostComponent) => {
   const render = (isHeaderBarMode = false) => {
-    // dont display the nav if we are in header bar mode and modify the parent flex direction
-    let { burgerPx, headerBar } = hostComponent.dataset;
+    // Validate that burgerPx is only used with headerBar
+    const { burgerPx, headerBar } = hostComponent.dataset;
     if (!headerBar && burgerPx) {
-      throw new Error("you do not need burgerPx when headerBar isn't true");
+      throw new Error('burgerPx should only be used when headerBar is true');
     }
 
     // CSS styles for the navigation component
-
-    // language=CSS
     const navStyles = `
       nav {
+        ${
+          burgerPx
+            ? 'animation: 0.5s ease-in-out 0s 1 slideInFromTop;'
+            : 'animation: 0.5s ease-in-out 0s 1 slideInFromLeft;'
+        }
           
-          
-  ${
-    burgerPx
-      ? 'animation: 0.5s ease-in-out 0s 1 slideInFromTop;'
-      : 'animation: 0.5s ease-in-out 0s 1 slideInFromLeft;'
-  }
-          
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 10px 20px;
-  background-color: var(--nav-background-color);
-  min-width: 140px;
-  flex-wrap: wrap;
-
-${
-  !headerBar
-    ? `
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 10px 20px;
+        background-color: var(--nav-background-color);
+        min-width: 140px;
+        flex-wrap: wrap;
 
-          @media (max-width: 600px) {
-    & .text {
-      display: none;
-    }
-    min-width: auto;
-  }
-        `
-    : ''
-}
+        ${
+          !headerBar
+            ? `
+            @media (max-width: 600px) {
+              & .text {
+                display: none;
+              }
+              min-width: auto;
+            }
+          `
+            : ''
+        }
         
-  & button {
-    width: 100%;
-  }
-  &.header-bar-mode {
-    flex-direction: row;
-    justify-content: center;
-    background-color: transparent;
-    & a {
-      color: var(--default-text);
-    }
+        & button {
+          width: 100%;
+        }
 
-    ${
-      burgerPx
-        ? `
-        @media (max-width: ${burgerPx}px) {
-        
-        display: none; 
-        
-    align-items: center;
+        &.header-bar-mode {
+          flex-direction: row;
+          justify-content: center;
+          background-color: transparent;
 
-        flex-direction: column;
-        position: absolute;
-        background-color: var(--nav-background-color);
-        
-          top: 40px;
-          left: 0;
-/*
-          border: 1px solid var(--minor-text);
-*/
-          border-radius: 1rem;
-          &.burger-open {
-            display: flex;
+          & a {
+            color: var(--default-text);
           }
-        `
-        : ``
-    }
-  }
-}`;
 
-    if (hostComponent.dataset.headerBar === 'true') {
+          ${
+            burgerPx
+              ? `
+              @media (max-width: ${burgerPx}px) {
+                display: none;
+                align-items: center;
+                flex-direction: column;
+                position: absolute;
+                background-color: var(--nav-background-color);
+                top: 40px;
+                left: 0;
+                border-radius: 1rem;
+                
+                &.burger-open {
+                  display: flex;
+                }
+              }
+            `
+              : ''
+          }
+        }
+      }
+    `;
+
+    // Add header bar class if applicable
+    if (headerBar === 'true') {
       hostComponent.classList.add('header-bar-mode');
       hostComponent.parentElement.style.flexDirection = 'column';
     }
 
-    // Update the count display and button markup together
-    hostComponent.innerHTML = /* html */ `
-        <style>
-        ${navStyles}
-      </style>
+    // Render the navigation items
+    hostComponent.innerHTML = `
+      <style>${navStyles}</style>
       <a data-nav href="/" title="Home">
         <span class="icon">&#x1F3E0;</span>
-        <!-- Unicode for a house, similar to a home icon -->
         <span class="text">Home</span>
       </a>
       <a data-nav href="/button-badge" title="Button + Badges Design System">
         <span class="icon">&#x1F518;</span>
-        <!-- Unicode for a pencil, similar to an edit or form icon -->
         <span class="text">Button + Badges</span>
       </a>
       <a data-nav href="/form" title="Form Design System">
         <span class="icon">&#x270F;</span>
-        <!-- Unicode for a pencil, similar to an edit or form icon -->
         <span class="text">Form</span>
       </a>
       <a data-nav href="/maps" title="Map example">
         <span class="icon">&#x1F5FA;</span>
-        <!-- Unicode for a pencil, similar to an edit or form icon -->
         <span class="text">Maps</span>
       </a>
-
-      <a
-        data-nav
-        href="/users"
-        title="DB retrival example (requires the deno backend to run - see readme (Optional Backend))">
+      <a data-nav href="/users" title="DB retrieval example">
         <span class="icon">👥</span>
         <span class="text">DB users</span>
       </a>
       <a data-nav href="/calendar" title="Calendar Example">
-        <span class="icon"> 📆 </span>
-        <span class="text"> Calendar</span>
+        <span class="icon">📆</span>
+        <span class="text">Calendar</span>
       </a>
-      <a
-        data-nav
-        href="/multiple-instances"
-        title="Multiple instances of vanilla.js comoonets in action with shared state">
+      <a data-nav href="/multiple-instances" title="Multiple instances">
         <span class="icon">🧬</span>
         <span class="text">Multiple instances</span>
       </a>
@@ -148,30 +130,36 @@ ${
       <a data-nav href="/webrtc-communicator" title="Demo of WebRTC locally with local signalling server">
         <span class="icon">🪄</span>
         <span class="text">WebRTC</span>
-      </a>`;
+      </a>
+    `;
+
+    // Add button styles
     hostComponent.querySelectorAll('a').forEach((navLink) => {
       navLink.classList.add('button', 'secondary', 'squarify');
     });
-    //add burger button to the parent if we are in header bar mode, use inline svg for icon
+
+    // Add burger button for header bar mode
     if (headerBar === 'true' && burgerPx) {
       hostComponent.parentElement.insertAdjacentHTML(
         'afterbegin',
         `
-        <button class="burger-button squarify  outline" >
-        <svg class="icon" viewBox="0 0 100 80" width="20" height="20" fill="currentColor" >
-          <rect width="100" height="20"></rect>
-          <rect y="30" width="100" height="20"></rect>
-          <rect y="60" width="100" height="20"></rect>
-        </svg>
-        </button>
+          <button class="burger-button squarify outline">
+            <svg class="icon" viewBox="0 0 100 80" width="20" height="20" fill="currentColor">
+              <rect width="100" height="20"></rect>
+              <rect y="30" width="100" height="20"></rect>
+              <rect y="60" width="100" height="20"></rect>
+            </svg>
+          </button>
         `,
       );
+
+      // Toggle burger menu visibility
       hostComponent.parentElement.querySelector('.burger-button').addEventListener('click', () => {
         hostComponent.classList.toggle('burger-open');
       });
     }
   };
 
-  // Display the initial count
+  // Initial render
   render();
 };