Merge pull request #630 from danskernesdigitalebibliotek/release/brah…

…ma-15-1 Merge Release/brahma-15-1 into develop
danskernesdigitalebibliotek · May 14, 2024 · bb61928 · bb61928
2 parents 2408026 + 6fd4f4c
commit bb61928
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss
@@ -16,6 +16,10 @@ $_menu_animation_delay: 0.2s;
   transform: translateX(-100%);
   transition: transform $_transition_speed $_bezier_transition;
 
+  @include media-query__small {
+    display: none;
+  }
+
   ul.header__menu-navigation {
     padding: 0;
     display: flex;

diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.stories.tsx b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.stories.tsx
@@ -27,6 +27,11 @@ export default {
       defaultValue: "open",
       control: { type: "select", options: ["open", "closed"] },
     },
+    isStorybookContext: {
+      name: "Are we in storybook?",
+      defaultValue: true,
+      control: { type: "none" },
+    },
   },
 } as ComponentMeta<typeof HeaderSidebarNav>;
 

diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.tsx b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.tsx
@@ -6,19 +6,27 @@ import MenuItemList from "../header-menu-list/HeaderMenuList";
 export type HeaderSidebarNavProps = {
   menuLinks: MenuItemsProps[];
   menuOpen?: "open" | "closed";
+  isStorybookContext?: boolean;
 };
 
 const HeaderSidebarNav: React.FC<HeaderSidebarNavProps> = ({
   menuLinks,
   menuOpen = "closed",
+  isStorybookContext = false,
 }) => {
   useEffect(() => {
     /* eslint-disable-next-line global-require */
     require("./header-sidebar-nav-js");
   }, []);
 
   return (
-    <div className="header-sidebar-nav" data-open={menuOpen}>
+    <div
+      className="header-sidebar-nav"
+      data-open={menuOpen}
+      // The sidebar normally isn't displayed on larger screens (otherwise it's
+      // accessible using keyboard on desktop), but we want to show it in Storybook.
+      style={isStorybookContext ? { display: "block" } : undefined}
+    >
       <div className="header-sidebar-nav__background-wrapper">
         <div className="header-sidebar-nav__menu-wrapper">
           <div