feat: add breakpoints for header

IATI · Oct 22, 2024 · ad22266 · ad22266
1 parent 6e044f9
commit ad22266
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 56 deletions.
diff --git a/src/scss/components/title-bar/_title-bar.scss b/src/scss/components/title-bar/_title-bar.scss
@@ -8,6 +8,7 @@
   flex-direction: column;
   gap: 0.8rem;
   padding-inline-start: 1rem;
+  margin-block-end: 1.5rem;
   border-inline-start: $border-width solid $color-blue-50;
   & > * {
     margin: 0;

diff --git a/src/scss/layout/header/_header.scss b/src/scss/layout/header/_header.scss
@@ -58,8 +58,12 @@
 }
 
 .iati-header__nav {
-  margin-block-start: 1.5rem;
   border-block-start: 1px solid #fff;
+  display: none;
+
+  @media (min-width: $mobile_nav_breakpoint) {
+    display: block;
+  }
 }
 
 .iati-header__logo {
@@ -71,6 +75,12 @@
 }
 
 .iati-header__general-nav {
+  display: none;
+
+  @media (min-width: $mobile_nav_breakpoint) {
+    display: block;
+  }
+
   a {
     font-family: $font-stack-heading;
     text-decoration: none;
@@ -84,3 +94,9 @@
     }
   }
 }
+
+.iati-header .iati-menu-toggle--open {
+  @media (min-width: $mobile_nav_breakpoint) {
+    display: none;
+  }
+}
diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts
@@ -16,12 +16,6 @@ const meta: Meta = {
   parameters: {
     layout: "fullscreen",
   },
-  argTypes: {
-    open: {
-      defaultValue: true,
-      control: { type: "boolean" },
-    },
-  },
 };
 
 export default meta;
@@ -33,8 +27,9 @@ const logo = html`
   </a>
 `;
 
-export const WithHorizontalNav: Story = {
-  render: (args) => html`
+export const Header: Story = {
+  render: (args, context) => html`
+    ${MobileNav.render({ ...args }, context)}
     <header class="iati-header">
       <div class="iati-header__section iati-header__section--first">
         <div class="iati-header__container">
@@ -61,6 +56,7 @@ export const WithHorizontalNav: Story = {
             ${CountrySwitcher.render?.call({ ...args })}
             ${InfoButton.render?.call({ ...args })}
             ${SearchButton.render?.call({ ...args })}
+            ${MenuToggle.render?.call({ ...args })}
           </div>
           ${TitleBar.render?.call({ ...args })}
           <div class="iati-header__nav">
@@ -69,37 +65,6 @@ export const WithHorizontalNav: Story = {
         </div>
       </div>
     </header>
-  `,
-};
-
-export const WithMobileNav: Story = {
-  parameters: {
-    viewport: {
-      defaultviewport: "tablet",
-    },
-  },
-  render: (args, context) => html`
-    ${MobileNav.render({ ...args }, context)}
-    <header class="iati-header">
-      <div class="iati-header__section iati-header__section--first">
-        <div class="iati-header__container">
-          ${logo}
-        </div>
-      </div>
-      <div class="iati-header__section iati-header__section--last iati-brand-background">
-        <div class="iati-header__container iati-brand-background__content">
-          <div class="iati-header__actions">
-            ${CountrySwitcher.render?.call({ ...args })}
-            ${SearchButton.render?.call({ ...args })}
-            ${MenuToggle.render?.call({ ...args })}
-          </div>
-          ${TitleBar.render?.call({ ...args })}
-          <div class="iati-header__nav" hidden>
-            ${ToolNav.render?.call({ ...args })}
-          </div>
-        <div>
-      </div>
-    </header>
     <script src="js/header.js"></script>
   `,
 };
diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts
@@ -4,7 +4,7 @@ import { html } from "lit";
 import { Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories";
 import { Notice as MessageNotice } from "../../components/message/message.stories";
 import { Footer } from "../footer/footer.stories";
-import { WithHorizontalNav, WithMobileNav } from "../header/header.stories";
+import { Header } from "../header/header.stories";
 
 const meta: Meta = {
   title: "Layout/Page",
@@ -16,22 +16,9 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const HorizontalNav: Story = {
+export const Page: Story = {
   render: (args) => html`
-    ${WithHorizontalNav.render?.call({ ...args })}
-    <main class="iati-main">
-      ${Breadcrumb.render?.call({ ...args })}
-      ${MessageNotice.render?.call({ ...args })}
-      <h1>Page heading</h1>
-      <p>Page contents</p>
-    </main>
-    ${Footer.render?.call({ ...args })}
-  `,
-};
-
-export const MobileNav: Story = {
-  render: (args) => html`
-    ${WithMobileNav.render?.call({ ...args })}
+    ${Header.render?.call({ ...args })}
     <main class="iati-main">
       ${Breadcrumb.render?.call({ ...args })}
       ${MessageNotice.render?.call({ ...args })}

diff --git a/src/scss/tokens/_screens.scss b/src/scss/tokens/_screens.scss
@@ -3,3 +3,5 @@ $screen-md: 768px;
 $screen-lg: 1024px;
 $screen-xl: 1280px;
 $screen-2xl: 1536px;
+
+$mobile_nav_breakpoint: $screen-sm;