From 5816c4cd905c77455b7abd9dd1d9cde8582c8dfe Mon Sep 17 00:00:00 2001
From: Daniel Lorigan <daniellrgn@gmail.com>
Date: Fri, 8 Nov 2024 17:34:33 -0800
Subject: [PATCH] Consolidate site navbar functionality into one reusable
 component

---
 src/lib/components/layout/Header.svelte | 188 ++++++++++++++++++++++++
 src/lib/utils/types.ts                  |   6 +
 src/routes/(app)/+layout.svelte         | 122 +--------------
 src/routes/(viewer)/+layout.svelte      |  48 +-----
 src/routes/+layout.svelte               |  43 ------
 5 files changed, 204 insertions(+), 203 deletions(-)
 create mode 100644 src/lib/components/layout/Header.svelte

diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
new file mode 100644
index 00000000..90b186e0
--- /dev/null
+++ b/src/lib/components/layout/Header.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+  import {
+    Col,
+    Collapse,
+    Dropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Icon,
+    Image,
+    Nav,
+    Navbar,
+    NavbarBrand,
+    NavbarToggler,
+    NavLink,
+    NavItem,
+    Row
+  } from 'sveltestrap';
+  import { getContext, onMount, setContext } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { writable, type Writable } from 'svelte/store';
+  import { NavLinks } from '$lib/utils/types';
+  import LanguageMenu from '$lib/components/layout/LanguageMenu.svelte';
+  import type { SHLAdminParams } from '$lib/utils/managementClient';
+
+  export let content: NavLinks[] = [];
+
+  let shlStore: Writable<SHLAdminParams[]> = getContext('shlStore');
+
+  let mode: Writable<string> = getContext('mode');
+
+  let isOpen = false;
+
+  function closeNav() {
+    isOpen = false;
+  }
+
+  let checkingClick = false;
+  document.addEventListener('click', (event) => {
+    checkingClick = true;
+    let cn = event.target?.className;
+    let isNavToggler = cn?.indexOf('navbar-toggler') !== -1;
+    let isNavDropdown = cn?.indexOf('dropdown-toggle nav-link') !== -1;
+    if (!isNavToggler && !isNavDropdown) {
+      closeNav();
+    }
+    setTimeout(() => checkingClick = false, 500);
+  });
+  document.addEventListener('keydown', (event) => {
+    closeNav();
+  });
+  window.addEventListener('scroll', (event) => {
+    if (checkingClick) return;
+    closeNav();
+  });
+
+  onMount(() => {
+    window.onscroll = function() {scrollFunction()};
+    scrollFunction();
+    closeNav();
+  });
+
+  function scrollFunction() {
+    if (window.scrollY > 40) {
+      document.getElementById("nav-image")?.classList.add("scrolling");
+      document.getElementsByClassName("navbar")[0].classList.add("scrolling");
+      let es = document.getElementsByClassName("nav-text");
+      for(let i = 0; i < es.length; i++) {
+        es[i].classList.add("scrolling");
+      }
+    } else if (window.scrollY == 0) {
+      document.getElementById("nav-image")?.classList.remove("scrolling");
+      document.getElementsByClassName("navbar")[0].classList.remove("scrolling");
+      let es = document.getElementsByClassName("nav-text");
+      for(let i = 0; i < es.length; i++) {
+        es[i].classList.remove("scrolling");
+      }
+    }
+  }
+
+  function handleUpdate(event:any) {
+    isOpen = event.detail.isOpen;
+  }
+</script>
+
+<Navbar class="sticky-top" color="light" light expand="md" style="border-bottom: 1px solid rgb(204, 204, 204);">
+  <NavbarBrand href="https://doh.wa.gov/" target="_blank">
+    <Row>
+      <Col>
+        <Image id="nav-image" alt="Washington State Department of Health Logo" src="/img/doh_logo_doh-black.png"/>
+      </Col>
+      <Col style="vertical-align:middle" class="d-none d-sm-block align-items-center">
+        <div class="nav-text mt-2">
+          <span>Washington State</span>
+          <p style="margin: 10px; padding: 0px: line-height: 0;"></p>
+          <span>Department of Health</span>
+        </div>
+      </Col>
+    </Row>
+  </NavbarBrand>
+  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
+  <Collapse isOpen={isOpen} navbar expand="md" on:update={handleUpdate}>
+    <Nav class="ms-auto" navbar>
+      {#if content.includes(NavLinks.Home)}
+        <NavItem>
+          <NavLink href="/home">Home</NavLink>
+        </NavItem>
+      {/if}
+      {#if content.includes(NavLinks.Actions)}
+        <Dropdown nav inNavbar size="sm" direction="down">
+          <DropdownToggle color="primary" nav caret>Actions</DropdownToggle>
+          <DropdownMenu end style="max-height: 500px; overflow:auto">
+            <DropdownItem
+              on:click={() => {
+                goto("/create");
+              }}>Add New SHLink</DropdownItem>
+            <DropdownItem
+              on:click={() => {
+                $shlStore = [];
+                goto('/');
+              }}>Reset Demo</DropdownItem>
+              <DropdownItem divider />
+              <DropdownItem
+                on:click={() => {
+                  $mode = ($mode === 'advanced' ? 'normal' : 'advanced');
+              }}>
+                <Row class="mr-0" style="min-width:240px">
+                  <Col class="d-flex justify-content-start align-items-center pe-0">
+                    {$mode === "advanced" ? "Hide" : "Show"} Advanced Features
+                  </Col>
+                  <Col class="d-flex justify-content-end ps-0">
+                    {#if $mode == 'advanced'}
+                    <Icon class="text-primary" name="toggle-on"></Icon>
+                    {:else}
+                    <Icon class="text-secondary" name="toggle-off"></Icon>
+                    {/if}
+                  </Col>
+                </Row>
+              </DropdownItem>
+            {#if $shlStore.length > 0}
+              <DropdownItem divider />
+              <DropdownItem header>View Stored SHLinks</DropdownItem>
+              {#each $shlStore as shl, i}
+                <DropdownItem
+                  on:click={() => {
+                  goto('/view/' + shl.id);
+                }}>{shl.label || `SHLink ${i + 1}`}</DropdownItem>
+              {/each}
+            {/if}
+          </DropdownMenu>
+        </Dropdown>
+      {/if}
+      {#if content.includes(NavLinks.Languages)}
+        <LanguageMenu />
+      {/if}
+    </Nav>
+  </Collapse>
+</Navbar>
+
+<style>
+  :global(#nav-image) {
+    width: 240px;
+    -webkit-transition: all 0.06s linear;
+    -moz-transition: all 0.06s linear;
+    -o-transition: all 0.06s linear;
+    transition: all 0.06s linear;
+  }
+  :global(.nav-text) {
+    font-size:medium;
+    -webkit-transition: all 0.06s linear;
+    -moz-transition: all 0.06s linear;
+    -o-transition: all 0.06s linear;
+    transition: all 0.06s linear;
+  }
+  :global(#nav-image.scrolling) {
+    width: 160px !important;
+    margin-left: 10px;
+  }
+  :global(.nav-text.scrolling)  {
+    font-size: xx-small;
+    color: #000; /* Fallback for older browsers */
+    color: rgba(0, 0, 0, 0.0);
+  }
+  :global(.navbar.scrolling) {
+    padding: 0px !important;
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
index f255c7af..0f45ca47 100644
--- a/src/lib/utils/types.ts
+++ b/src/lib/utils/types.ts
@@ -66,3 +66,9 @@ export interface Language {
   lang: string;
   code: string;
 }
+
+export enum NavLinks {
+  Home = "home",
+  Actions = "actions",
+  Languages = "languages"
+}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 597f87b7..af6c7e1d 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,26 +1,13 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import { getContext, onMount, setContext } from 'svelte';
-  import { writable, type Writable } from 'svelte/store';
   import {
-    Dropdown,
     Col,
-    Collapse,
-    DropdownItem,
-    DropdownMenu,
-    DropdownToggle,
-    Icon,
-    Image,
-    Nav,
-    Navbar,
-    NavbarBrand,
-    NavItem,
-    NavLink,
-    NavbarToggler,
     Row
   } from 'sveltestrap';
+  import { getContext, setContext } from 'svelte';
+  import { writable, type Writable } from 'svelte/store';
   import { SHLClient, type SHLAdminParams } from '$lib/utils/managementClient';
-  import LanguageMenu from '$lib/components/layout/LanguageMenu.svelte';
+  import { NavLinks } from '$lib/utils/types';
+  import Header from '$lib/components/layout/Header.svelte';
   import Banner from '$lib/components/layout/Banner.svelte';
 
   const LOCAL_STORAGE_KEY = 'shlips_store_shls';
@@ -36,110 +23,15 @@
   let reset = writable(0);
   setContext('reset', reset);
 
-  let isOpen: Writable<boolean> = getContext('isOpen');
-
-  let mode: Writable<string> = getContext('mode');
+  // let navIsOpen: Writable<boolean> = getContext('isOpen');
 
   $: {
     if ($shlStore) window.localStorage[LOCAL_STORAGE_KEY] = JSON.stringify($shlStore);
   }
 
-  onMount(() => {
-    window.onscroll = function() {scrollFunction()};
-    scrollFunction();
-    $isOpen = false;
-  });
-
-  function scrollFunction() {
-    if (window.scrollY > 40) {
-      document.getElementById("nav-image")?.classList.add("scrolling");
-      document.getElementsByClassName("navbar")[0].classList.add("scrolling");
-      let es = document.getElementsByClassName("nav-text");
-      for(let i = 0; i < es.length; i++) {
-        es[i].classList.add("scrolling");
-      }
-    } else if (window.scrollY == 0) {
-      document.getElementById("nav-image")?.classList.remove("scrolling");
-      document.getElementsByClassName("navbar")[0].classList.remove("scrolling");
-      let es = document.getElementsByClassName("nav-text");
-      for(let i = 0; i < es.length; i++) {
-        es[i].classList.remove("scrolling");
-      }
-    }
-  }
-
-  function handleUpdate(event: any) {
-    $isOpen = event.detail.isOpen;
-  }
-
 </script>
-<Navbar class="sticky-top" color="light" light expand="md" style="border-bottom: 1px solid rgb(204, 204, 204);">
-  <NavbarBrand href="https://doh.wa.gov/" target="_blank">
-    <Row>
-      <Col>
-        <Image id="nav-image" alt="Washington State Department of Health Logo" src="/img/doh_logo_doh-black.png"/>
-      </Col>
-      <Col style="vertical-align:middle" class="d-none d-sm-block align-items-center">
-        <div class="nav-text mt-2">
-          <span>Washington State</span>
-          <p style="margin: 10px; padding: 0px: line-height: 0;"></p>
-          <span>Department of Health</span>
-        </div>
-      </Col>
-    </Row>
-  </NavbarBrand>
-  <NavbarToggler on:click={() => ($isOpen = !$isOpen)} />
-  <Collapse isOpen={$isOpen} navbar expand="md" on:update={handleUpdate}>
-    <Nav class="ms-auto" navbar>
-      <NavItem>
-        <NavLink href="/home">Home</NavLink>
-      </NavItem>
-      <Dropdown nav inNavbar size="sm" direction="down">
-        <DropdownToggle color="primary" nav caret>Actions</DropdownToggle>
-        <DropdownMenu end style="max-height: 500px; overflow:auto">
-          <DropdownItem
-            on:click={() => {
-              goto("/create");
-            }}>Add New SHLink</DropdownItem>
-          <DropdownItem
-            on:click={() => {
-              $shlStore = [];
-              goto('/');
-            }}>Reset Demo</DropdownItem>
-            <DropdownItem divider />
-            <DropdownItem
-              on:click={() => {
-                $mode = ($mode === 'advanced' ? 'normal' : 'advanced');
-            }}>
-              <Row class="mr-0" style="min-width:240px">
-                <Col class="d-flex justify-content-start align-items-center pe-0">
-                  {$mode === "advanced" ? "Hide" : "Show"} Advanced Features
-                </Col>
-                <Col class="d-flex justify-content-end ps-0">
-                  {#if $mode == 'advanced'}
-                  <Icon class="text-primary" name="toggle-on"></Icon>
-                  {:else}
-                  <Icon class="text-secondary" name="toggle-off"></Icon>
-                  {/if}
-                </Col>
-              </Row>
-            </DropdownItem>
-          {#if $shlStore.length > 0}
-            <DropdownItem divider />
-            <DropdownItem header>View Stored SHLinks</DropdownItem>
-            {#each $shlStore as shl, i}
-              <DropdownItem
-                on:click={() => {
-                goto('/view/' + shl.id);
-              }}>{shl.label || `SHLink ${i + 1}`}</DropdownItem>
-            {/each}
-          {/if}
-        </DropdownMenu>
-      </Dropdown>
-      <LanguageMenu />
-    </Nav>
-  </Collapse>
-</Navbar>
+
+<Header content={[NavLinks.Home, NavLinks.Actions, NavLinks.Languages]}/>
 <Banner title="International Patient Summary Prototype"/>
 <Row class="main-row">
   <Col>
diff --git a/src/routes/(viewer)/+layout.svelte b/src/routes/(viewer)/+layout.svelte
index 0abf268d..3dbcdb22 100644
--- a/src/routes/(viewer)/+layout.svelte
+++ b/src/routes/(viewer)/+layout.svelte
@@ -1,57 +1,15 @@
 <script lang="ts">
   import {
     Col,
-    Collapse,
-    Image,
-    Nav,
-    Navbar,
-    NavbarBrand,
-    NavItem,
-    NavLink,
-    NavbarToggler,
     Row
   } from 'sveltestrap';
-  import LanguageMenu from '$lib/components/layout/LanguageMenu.svelte';
+  import Header from '$lib/components/layout/Header.svelte';
   import Banner from '$lib/components/layout/Banner.svelte';
+  import { NavLinks } from '$lib/utils/types';
 
-  let isOpen = false;
-  function handleUpdate(event: any) {
-    isOpen = event.detail.isOpen;
-  }
-  function closeNav() {
-    isOpen = false;
-  }
 </script>
 
-<Navbar color="light" light expand="md" style="border-bottom: 1px solid rgb(204, 204, 204);">
-  <NavbarBrand href="https://doh.wa.gov/" target="_blank">
-    <Row>
-      <Col>
-        <Image
-          id="nav-image"
-          alt="Washington State Department of Health Logo"
-          src="/img/doh_logo_doh-black.png"
-        />
-      </Col>
-      <Col style="vertical-align:middle" class="d-none d-sm-block align-items-center">
-        <div class="nav-text mt-2">
-          <span>Washington State</span>
-          <p style="margin: 10px; padding: 0px: line-height: 0;" />
-          <span>Department of Health</span>
-        </div>
-      </Col>
-    </Row>
-  </NavbarBrand>
-  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
-  <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
-    <Nav class="ms-auto" navbar>
-      <NavItem>
-        <NavLink href="/home" on:click={closeNav}>Home</NavLink>
-      </NavItem>
-      <LanguageMenu />
-    </Nav>
-  </Collapse>
-</Navbar>
+<Header content={[NavLinks.Home, NavLinks.Languages]}/>
 <Banner title="International Patient Summary Viewer"/>
 <Row class="main-row">
   <Col>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 02537b65..b24aed2a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -73,22 +73,6 @@
   let mode = writable('normal');
   window.localStorage[MODE_KEY] ? mode.set(JSON.parse(window.localStorage[MODE_KEY])) : mode.set('normal');
 
-  let isOpen = writable(false);
-  setContext('isOpen', isOpen);
-  function closeNav() {
-    $isOpen = false;
-  }
-
-  document.addEventListener('click', (event) => {
-    closeNav();
-  });
-  document.addEventListener('keydown', (event) => {
-    closeNav();
-  });
-  window.addEventListener('scroll', (event) => {
-    closeNav();
-  });
-
   $: {
     if ($mode) window.localStorage[MODE_KEY] = JSON.stringify($mode);
   }
@@ -130,33 +114,6 @@
 </Container>
 
 <style>
-  :global(#nav-image) {
-    width: 240px;
-    -webkit-transition: all 0.06s linear;
-    -moz-transition: all 0.06s linear;
-    -o-transition: all 0.06s linear;
-    transition: all 0.06s linear;
-  }
-  :global(.nav-text) {
-    font-size:medium;
-    -webkit-transition: all 0.06s linear;
-    -moz-transition: all 0.06s linear;
-    -o-transition: all 0.06s linear;
-    transition: all 0.06s linear;
-  }
-  :global(#nav-image.scrolling) {
-    width: 160px !important;
-    margin-left: 10px;
-  }
-  :global(.nav-text.scrolling)  {
-    font-size: xx-small;
-    color: #000; /* Fallback for older browsers */
-    color: rgba(0, 0, 0, 0.0);
-  }
-  :global(.navbar.scrolling) {
-    padding: 0px !important;
-  }
-
   :global(.main-row) {
     flex-grow: 1;
   }