fix(sidenav): fix storybook

ithaka · Mar 1, 2024 · 4de5602 · 4de5602
1 parent fda9018
commit 4de5602
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/packages/pharos/src/pages/reports/wc/reports.pages.stories.ts b/packages/pharos/src/pages/reports/wc/reports.pages.stories.ts
@@ -19,19 +19,37 @@ export default {
     },
   },
 };
+//1055px is the old breakpoint for the table to be scrollable
 
-export const Reports = {
-  render: (): TemplateResult => html`
+export const Reports = (): TemplateResult => {
+  function setIsMobile() {
+    return window.innerWidth <= 1055;
+  }
+  let isMobile = setIsMobile(); // Trigger displaying a close button
+  let sidenavDisplayed = !isMobile;
+
+  window.addEventListener('resize', () => {
+    isMobile = setIsMobile();
+    sidenavDisplayed = !isMobile;
+    console.log(window.innerWidth, sidenavDisplayed);
+  });
+
+  return html`
     <div class="reports-page__container">
-      ${Sidenav()}
+      ${Sidenav(sidenavDisplayed, isMobile)}
       <main id="main-content">
         <storybook-pharos-layout
           preset="1-col--sidenav"
           class="reports-page__container--main-content"
         >
           <div class="reports-page__container--top" slot="top">
             <div class="reports-page__container--nav-header">
-              <storybook-pharos-sidenav-button></storybook-pharos-sidenav-button>
+              <storybook-pharos-button
+                data-sidenav-id="report-sidenav"
+                variant="subtle"
+                a11yLabel="Open side navigation"
+                icon="menu"
+              ></storybook-pharos-button>
               <img src="${logo}" alt="logo" width="96" height="24" />
               <span class="reports-page__separator">/</span>
               <storybook-pharos-heading level="1" preset="4" no-margin
@@ -85,5 +103,5 @@ export const Reports = {
     </div>
     <storybook-pharos-toaster></storybook-pharos-toaster>
     ${CreateReportModal()}
-  `,
+  `;
 };
diff --git a/packages/pharos/src/pages/reports/wc/sidenav.ts b/packages/pharos/src/pages/reports/wc/sidenav.ts
@@ -3,8 +3,14 @@ import type { TemplateResult } from 'lit';
 
 import logo from '@config/assets/images/jstor-logo-inverse.svg';
 
-export const Sidenav = (): TemplateResult => html`
-  <storybook-pharos-sidenav class="reports-page__sidenav" main-content-id="main-content">
+export const Sidenav = (open: boolean, showCloseButton: boolean): TemplateResult => html`
+  <storybook-pharos-sidenav
+    class="reports-page__sidenav"
+    id="report-sidenav"
+    main-content-id="main-content"
+    ?open="${open}"
+    ?has-close-button="${showCloseButton}"
+  >
     <storybook-pharos-link slot="top" href="/" id="jstor-logo">
       <img src="${logo}" alt="Pharos Home" width="72" height="100" />
     </storybook-pharos-link>