diff --git a/.changeset/kind-cows-mix.md b/.changeset/kind-cows-mix.md
new file mode 100644
index 000000000..2a0951efa
--- /dev/null
+++ b/.changeset/kind-cows-mix.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Update storybook stories to work with new sidenav display logic
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 9ce178254..f9c6b4d75 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/packages/pharos/src/components/layout/PharosLayout.react.stories.jsx b/packages/pharos/src/components/layout/PharosLayout.react.stories.jsx
index 3aa8dd00e..707d897da 100644
--- a/packages/pharos/src/components/layout/PharosLayout.react.stories.jsx
+++ b/packages/pharos/src/components/layout/PharosLayout.react.stories.jsx
@@ -75,7 +75,7 @@ export const OneColumnWithSidenav = {
         gridTemplateColumns: 'max-content 1fr',
       }}
     >
-      <PharosSidenav style={{ gridArea: 'sidenav' }}>
+      <PharosSidenav open={true} style={{ gridArea: 'sidenav' }}>
         <PharosLink slot="top" href="/" id="jstor-logo">
           <img src={logo} alt="Pharos Home" width="72" height="100" />
         </PharosLink>
@@ -98,7 +98,7 @@ export const OneColumnWithSidenavAndComfySpacing = {
         gridTemplateColumns: 'max-content 1fr',
       }}
     >
-      <PharosSidenav style={{ gridArea: 'sidenav' }}>
+      <PharosSidenav open={true} style={{ gridArea: 'sidenav' }}>
         <PharosLink slot="top" href="/" id="jstor-logo">
           <img src={logo} alt="Pharos Home" width="72" height="100" />
         </PharosLink>
diff --git a/packages/pharos/src/components/layout/pharos-layout.wc.stories.jsx b/packages/pharos/src/components/layout/pharos-layout.wc.stories.jsx
index 3b9ddcd11..af91ee8f9 100644
--- a/packages/pharos/src/components/layout/pharos-layout.wc.stories.jsx
+++ b/packages/pharos/src/components/layout/pharos-layout.wc.stories.jsx
@@ -64,7 +64,7 @@ export const OneColumnWithSidenav = {
       <div
         style="display: grid; grid-template-areas: 'sidenav main'; grid-template-columns: max-content 1fr"
       >
-        <storybook-pharos-sidenav style="grid-area: sidenav">
+        <storybook-pharos-sidenav open="true" style="grid-area: sidenav">
           <storybook-pharos-link slot="top" href="/" id="jstor-logo">
             <img src="${logo}" alt="Pharos Home" width="72" height="100" />
           </storybook-pharos-link>
@@ -85,7 +85,7 @@ export const OneColumnWithSidenavAndComfySpacing = {
       <div
         style="display: grid; grid-template-areas: 'sidenav main'; grid-template-columns: max-content 1fr"
       >
-        <storybook-pharos-sidenav style="grid-area: sidenav">
+        <storybook-pharos-sidenav open="true" style="grid-area: sidenav">
           <storybook-pharos-link slot="top" href="/" id="jstor-logo">
             <img src="${logo}" alt="Pharos Home" width="72" height="100" />
           </storybook-pharos-link>
diff --git a/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx b/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx
index fa400389e..cb0f9ccfa 100644
--- a/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx
+++ b/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx
@@ -115,6 +115,6 @@ export const Base = {
       </PharosSidenav>
     </Fragment>
   ),
-  args: { open: false, hasCloseButton: false },
+  args: { open: false, hasCloseButton: true },
   parameters: {},
 };
diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx b/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx
index 0b433e32d..37c743bca 100644
--- a/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx
+++ b/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx
@@ -99,7 +99,7 @@ export const Base = {
         </storybook-pharos-sidenav-section>
       </storybook-pharos-sidenav>
     `,
-  args: { open: false, hasCloseButton: false },
+  args: { open: false, hasCloseButton: true },
   parameters: {
     chromatic: { viewports: [320, 1200] },
   },
diff --git a/packages/pharos/src/pages/reports/react/ReportExample.tsx b/packages/pharos/src/pages/reports/react/ReportExample.tsx
new file mode 100644
index 000000000..b3d963bb3
--- /dev/null
+++ b/packages/pharos/src/pages/reports/react/ReportExample.tsx
@@ -0,0 +1,113 @@
+import { useEffect, type FC, useState, useRef } from 'react';
+import { Sidenav } from './Sidenav';
+import { CreateReportModal } from './CreateReportModal';
+import { ReportsTable } from './ReportsTable';
+import { historyTable, scheduledTable } from '../mocks';
+import logo from '@config/assets/images/reports/jstor-horizontal.svg';
+
+import {
+  PharosHeading,
+  PharosLink,
+  PharosButton,
+  PharosTabs,
+  PharosTab,
+  PharosTabPanel,
+  PharosToaster,
+  PharosLayout,
+} from '../../../react-components';
+
+export const ReportExample: FC = () => {
+  const mobileBreakpoint = 1055;
+  const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth < mobileBreakpoint);
+  const [isSidenavDisplayed, setIsSidenavDisplayed] = useState<boolean>(!isMobile);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const currentRef = containerRef.current;
+    const resizeObserver = new ResizeObserver(() => {
+      const windowWidth = window.innerWidth;
+      setIsSidenavDisplayed(windowWidth >= mobileBreakpoint);
+      setIsMobile(windowWidth < mobileBreakpoint);
+    });
+
+    if (currentRef) {
+      resizeObserver.observe(currentRef);
+    }
+
+    return () => {
+      if (currentRef) {
+        resizeObserver.unobserve(currentRef);
+      }
+    };
+  }, []);
+  return (
+    <>
+      <div className="reports-page__container" ref={containerRef}>
+        <Sidenav open={isSidenavDisplayed} showCloseButton={isMobile} />
+        <main id="main-content">
+          <PharosLayout preset="1-col--sidenav" className="reports-page__container--main-content">
+            <div className="reports-page__container--top" slot="top">
+              <div className="reports-page__container--nav-header">
+                <PharosButton
+                  variant="subtle"
+                  icon="menu"
+                  data-sidenav-id="report-sidenav"
+                  a11yLabel="Open side navigation"
+                />
+                <img src={logo} alt="logo" width="96" height="24" />
+                <span className="reports-page__separator">/</span>
+                <PharosHeading level={1} preset="4" noMargin>
+                  Admin
+                </PharosHeading>
+              </div>
+              <PharosButton
+                variant="subtle"
+                iconRight="chevron-down"
+                className="reports-page__button--user"
+              >
+                Gerry Larry Burla
+              </PharosButton>
+            </div>
+            <div className="reports-page__container--disclaimer">
+              <PharosHeading level={2} preset="5--bold">
+                COUNTER 5 Usage Reports
+              </PharosHeading>
+              <p>
+                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
+                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
+                reports are still available for usage from January 2017 - April 2019 from the{' '}
+                <PharosLink href="#">COUNTER 4 reporting service</PharosLink>. Please visit our
+                COUNTER 5 <PharosLink href="#">support page</PharosLink> for more information on
+                JSTOR usage reports.
+              </p>
+            </div>
+            <div className="reports-page__container--table">
+              <PharosButton
+                className="reports-page__button--create"
+                data-modal-id="create-report-modal"
+              >
+                Create Report
+              </PharosButton>
+              <PharosTabs>
+                <PharosTab id="tab-1" data-panel-id="panel-1">
+                  Report History
+                </PharosTab>
+                <PharosTab id="tab-2" data-panel-id="panel-2">
+                  Scheduled Reports
+                </PharosTab>
+                <PharosTabPanel id="panel-1" slot="panel" style={{ overflow: 'visible' }}>
+                  {ReportsTable(historyTable)}
+                </PharosTabPanel>
+                <PharosTabPanel id="panel-2" slot="panel">
+                  {ReportsTable(scheduledTable)}
+                </PharosTabPanel>
+              </PharosTabs>
+            </div>
+          </PharosLayout>
+        </main>
+      </div>
+      <PharosToaster></PharosToaster>
+      <CreateReportModal />
+    </>
+  );
+};
diff --git a/packages/pharos/src/pages/reports/react/Sidenav.tsx b/packages/pharos/src/pages/reports/react/Sidenav.tsx
index 0eab03263..3c36e34b3 100644
--- a/packages/pharos/src/pages/reports/react/Sidenav.tsx
+++ b/packages/pharos/src/pages/reports/react/Sidenav.tsx
@@ -6,9 +6,19 @@ import { PharosSidenavSection } from '../../../react-components/sidenav/pharos-s
 import { PharosSidenavLink } from '../../../react-components/sidenav/pharos-sidenav-link';
 import { PharosSidenavMenu } from '../../../react-components/sidenav/pharos-sidenav-menu';
 import logo from '@config/assets/images/jstor-logo-inverse.svg';
+export interface SideNavProps {
+  open: boolean;
+  showCloseButton: boolean;
+}
 
-export const Sidenav: FC = () => (
-  <PharosSidenav className="reports-page__sidenav" mainContentId="main-content">
+export const Sidenav: FC<SideNavProps> = ({ open, showCloseButton }) => (
+  <PharosSidenav
+    className="reports-page__sidenav"
+    mainContentId="main-content"
+    id="report-sidenav"
+    open={open}
+    hasCloseButton={showCloseButton}
+  >
     <PharosLink slot="top" href="/" id="jstor-logo">
       <img src={logo} alt="Pharos Home" width="72" height="100" />
     </PharosLink>
diff --git a/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx b/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
index 597f8344d..11d07d4d7 100644
--- a/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
+++ b/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
@@ -2,23 +2,8 @@ import type { Meta } from '@storybook/react';
 
 import '../reports.scss';
 import { viewports } from '../../shared/viewports';
-import { Sidenav } from './Sidenav';
-import { CreateReportModal } from './CreateReportModal';
-import { ReportsTable } from './ReportsTable';
-import { historyTable, scheduledTable } from '../mocks';
-import logo from '@config/assets/images/reports/jstor-horizontal.svg';
-
-import {
-  PharosHeading,
-  PharosLink,
-  PharosButton,
-  PharosTabs,
-  PharosTab,
-  PharosTabPanel,
-  PharosToaster,
-  PharosLayout,
-} from '../../../react-components';
 import { PharosContext } from '../../../utils/PharosContext';
+import { ReportExample } from './ReportExample';
 
 export default {
   title: 'Pages/Reports',
@@ -40,66 +25,7 @@ export default {
 export const Reports = {
   render: () => (
     <>
-      <div className="reports-page__container">
-        <Sidenav />
-        <main id="main-content">
-          <PharosLayout preset="1-col--sidenav" className="reports-page__container--main-content">
-            <div className="reports-page__container--top" slot="top">
-              <div className="reports-page__container--nav-header">
-                <img src={logo} alt="logo" width="96" height="24" />
-                <span className="reports-page__separator">/</span>
-                <PharosHeading level={1} preset="4" noMargin>
-                  Admin
-                </PharosHeading>
-              </div>
-              <PharosButton
-                variant="subtle"
-                iconRight="chevron-down"
-                className="reports-page__button--user"
-              >
-                Gerry Larry Burla
-              </PharosButton>
-            </div>
-            <div className="reports-page__container--disclaimer">
-              <PharosHeading level={2} preset="5--bold">
-                COUNTER 5 Usage Reports
-              </PharosHeading>
-              <p>
-                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
-                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
-                reports are still available for usage from January 2017 - April 2019 from the{' '}
-                <PharosLink href="#">COUNTER 4 reporting service</PharosLink>. Please visit our
-                COUNTER 5 <PharosLink href="#">support page</PharosLink> for more information on
-                JSTOR usage reports.
-              </p>
-            </div>
-            <div className="reports-page__container--table">
-              <PharosButton
-                className="reports-page__button--create"
-                data-modal-id="create-report-modal"
-              >
-                Create Report
-              </PharosButton>
-              <PharosTabs>
-                <PharosTab id="tab-1" data-panel-id="panel-1">
-                  Report History
-                </PharosTab>
-                <PharosTab id="tab-2" data-panel-id="panel-2">
-                  Scheduled Reports
-                </PharosTab>
-                <PharosTabPanel id="panel-1" slot="panel" style={{ overflow: 'visible' }}>
-                  {ReportsTable(historyTable)}
-                </PharosTabPanel>
-                <PharosTabPanel id="panel-2" slot="panel">
-                  {ReportsTable(scheduledTable)}
-                </PharosTabPanel>
-              </PharosTabs>
-            </div>
-          </PharosLayout>
-        </main>
-      </div>
-      <PharosToaster></PharosToaster>
-      <CreateReportModal />
+      <ReportExample />
     </>
   ),
 };
diff --git a/packages/pharos/src/pages/reports/wc/reports-example.ts b/packages/pharos/src/pages/reports/wc/reports-example.ts
new file mode 100644
index 000000000..2cdb33a9d
--- /dev/null
+++ b/packages/pharos/src/pages/reports/wc/reports-example.ts
@@ -0,0 +1,124 @@
+import { LitElement, html } from 'lit';
+import { ReportsTable } from './reports-table';
+import { historyTable, scheduledTable } from '../mocks';
+import { CreateReportModal } from './create-report-modal';
+import { Sidenav } from './sidenav';
+import logo from '@config/assets/images/reports/jstor-horizontal.svg';
+export class ReportsExample extends LitElement {
+  override createRenderRoot() {
+    // Keep example element in the light DOM to allow sharing styles with React story
+    return this;
+  }
+  readonly #mobileBreakpoint = 1055;
+  resizeObserver: ResizeObserver;
+  isMobile: boolean;
+  isSidenavDisplayed: boolean;
+
+  static override get properties() {
+    return {
+      isMobile: { type: Boolean },
+      isSidenavDisplayed: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.isMobile = window.innerWidth < this.#mobileBreakpoint;
+    this.isSidenavDisplayed = window.innerWidth >= this.#mobileBreakpoint;
+    this.resizeObserver = new ResizeObserver(() => {
+      const windowWidth = window.innerWidth;
+      this.isSidenavDisplayed = windowWidth >= this.#mobileBreakpoint;
+      this.isMobile = windowWidth < this.#mobileBreakpoint;
+    });
+  }
+
+  override firstUpdated() {
+    super.connectedCallback();
+    const container = this.renderRoot.querySelector('.reports-page__container');
+    if (container) {
+      this.resizeObserver.observe(container);
+    }
+  }
+
+  override disconnectedCallback() {
+    this.resizeObserver.disconnect();
+    super.disconnectedCallback();
+  }
+
+  resizeHandler() {
+    const windowWidth = window.innerWidth;
+    this.isSidenavDisplayed = windowWidth >= this.#mobileBreakpoint;
+    this.isMobile = windowWidth < this.#mobileBreakpoint;
+  }
+
+  override render() {
+    return html`<div class="reports-page__container">
+        ${Sidenav(this.isSidenavDisplayed, this.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-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
+                  >Admin</storybook-pharos-heading
+                >
+              </div>
+              <storybook-pharos-button
+                variant="subtle"
+                icon-right="chevron-down"
+                class="reports-page__button--user"
+                >Gerry Larry Burla
+              </storybook-pharos-button>
+            </div>
+            <div class="reports-page__container--disclaimer">
+              <storybook-pharos-heading level="2" preset="5--bold"
+                >COUNTER 5 Usage Reports</storybook-pharos-heading
+              >
+              <p>
+                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
+                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
+                reports are still available for usage from January 2017 - April 2019 from the
+                <storybook-pharos-link href="#">COUNTER 4 reporting service</storybook-pharos-link>.
+                Please visit our COUNTER 5
+                <storybook-pharos-link href="#">support page</storybook-pharos-link>
+                for more information on JSTOR usage reports.
+              </p>
+            </div>
+            <div class="reports-page__container--table">
+              <storybook-pharos-button
+                class="reports-page__button--create"
+                data-modal-id="create-report-modal"
+                >Create Report
+              </storybook-pharos-button>
+              <storybook-pharos-tabs>
+                <storybook-pharos-tab id="tab-1" data-panel-id="panel-1"
+                  >Report History</storybook-pharos-tab
+                >
+                <storybook-pharos-tab id="tab-2" data-panel-id="panel-2"
+                  >Scheduled Reports</storybook-pharos-tab
+                >
+                <storybook-pharos-tab-panel id="panel-1" slot="panel" style="overflow: visible">
+                  ${ReportsTable(historyTable)}
+                </storybook-pharos-tab-panel>
+                <storybook-pharos-tab-panel id="panel-2" slot="panel">
+                  ${ReportsTable(scheduledTable)}
+                </storybook-pharos-tab-panel>
+              </storybook-pharos-tabs>
+            </div>
+          </storybook-pharos-layout>
+        </main>
+      </div>
+      <storybook-pharos-toaster></storybook-pharos-toaster>
+      ${CreateReportModal()}`;
+  }
+}
diff --git a/packages/pharos/src/pages/reports/wc/reports.pages.stories.ts b/packages/pharos/src/pages/reports/wc/reports.pages.stories.ts
index ae2c58055..8eb59bc64 100644
--- a/packages/pharos/src/pages/reports/wc/reports.pages.stories.ts
+++ b/packages/pharos/src/pages/reports/wc/reports.pages.stories.ts
@@ -3,11 +3,7 @@ import type { TemplateResult } from 'lit';
 
 import '../reports.scss';
 import { viewports, breakpoints } from '../../shared/viewports';
-import { Sidenav } from './sidenav';
-import { CreateReportModal } from './create-report-modal';
-import { ReportsTable } from './reports-table';
-import { historyTable, scheduledTable } from '../mocks';
-import logo from '@config/assets/images/reports/jstor-horizontal.svg';
+import { ReportsExample } from './reports-example';
 
 export default {
   title: 'Pages/Reports',
@@ -19,71 +15,7 @@ export default {
     },
   },
 };
-
-export const Reports = {
-  render: (): TemplateResult => html`
-    <div class="reports-page__container">
-      ${Sidenav()}
-      <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>
-              <img src="${logo}" alt="logo" width="96" height="24" />
-              <span class="reports-page__separator">/</span>
-              <storybook-pharos-heading level="1" preset="4" no-margin
-                >Admin</storybook-pharos-heading
-              >
-            </div>
-            <storybook-pharos-button
-              variant="subtle"
-              icon-right="chevron-down"
-              class="reports-page__button--user"
-              >Gerry Larry Burla
-            </storybook-pharos-button>
-          </div>
-          <div class="reports-page__container--disclaimer">
-            <storybook-pharos-heading level="2" preset="5--bold"
-              >COUNTER 5 Usage Reports</storybook-pharos-heading
-            >
-            <p>
-              Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
-              offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4 reports
-              are still available for usage from January 2017 - April 2019 from the
-              <storybook-pharos-link href="#">COUNTER 4 reporting service</storybook-pharos-link>.
-              Please visit our COUNTER 5
-              <storybook-pharos-link href="#">support page</storybook-pharos-link>
-              for more information on JSTOR usage reports.
-            </p>
-          </div>
-          <div class="reports-page__container--table">
-            <storybook-pharos-button
-              class="reports-page__button--create"
-              data-modal-id="create-report-modal"
-              >Create Report
-            </storybook-pharos-button>
-            <storybook-pharos-tabs>
-              <storybook-pharos-tab id="tab-1" data-panel-id="panel-1"
-                >Report History</storybook-pharos-tab
-              >
-              <storybook-pharos-tab id="tab-2" data-panel-id="panel-2"
-                >Scheduled Reports</storybook-pharos-tab
-              >
-              <storybook-pharos-tab-panel id="panel-1" slot="panel" style="overflow: visible">
-                ${ReportsTable(historyTable)}
-              </storybook-pharos-tab-panel>
-              <storybook-pharos-tab-panel id="panel-2" slot="panel">
-                ${ReportsTable(scheduledTable)}
-              </storybook-pharos-tab-panel>
-            </storybook-pharos-tabs>
-          </div>
-        </storybook-pharos-layout>
-      </main>
-    </div>
-    <storybook-pharos-toaster></storybook-pharos-toaster>
-    ${CreateReportModal()}
-  `,
+export const Reports = (): TemplateResult => {
+  customElements.define('reports-example', ReportsExample);
+  return html`<reports-example></reports-example>`;
 };
diff --git a/packages/pharos/src/pages/reports/wc/sidenav.ts b/packages/pharos/src/pages/reports/wc/sidenav.ts
index 207403810..ab96ced7e 100644
--- 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>