Merge pull request #396 from IBM/374-header-hamburger-persistence

feat(UIShell): add persistentHamburgerMenu prop to Header

docs/src/pages/components/UIShell.svx

@@ -36,4 +36,8 @@ components: ["Header",
 
 ### Header with utilities
 
-<FileSource src="/framed/UIShell/HeaderUtilities" />
+<FileSource src="/framed/UIShell/HeaderUtilities" />
+
+### Header with persisted hamburger menu
+
+<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />

docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte

@@ -0,0 +1,65 @@
+<script>
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header
+  persistentHamburgerMenu="{true}"
+  company="IBM"
+  platformName="Carbon Svelte"
+  bind:isSideNavOpen
+>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

src/UIShell/GlobalHeader/Header.svelte

@@ -36,6 +36,12 @@
    */
   export let platformName = "";
 
+  /**
+   * Specify Hamburger Menu persistance
+   * @type {boolean} [persistentHamburgerMenu=false]
+   */
+  export let persistentHamburgerMenu = false;
+
   /**
    * Obtain a reference to the HTML anchor element
    * @type {null | HTMLAnchorElement} [ref=null]
@@ -46,7 +52,8 @@
 
   let winWidth = undefined;
 
-  $: isSideNavOpen = expandedByDefault && winWidth >= 1056;
+  $: isSideNavOpen =
+    expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu;
   $: ariaLabel = company
     ? `${company} `
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
@@ -56,7 +63,7 @@
 
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
-  {#if winWidth < 1056}
+  {#if winWidth < 1056 || persistentHamburgerMenu}
     <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
   {/if}
   <a

src/UIShell/SideNav/SideNav.svelte

@@ -33,7 +33,7 @@
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
   class:bx--side-nav--expanded="{isOpen}"
-  class:bx--side-nav--collapsed="{!isOpen && fixed}"
+  class:bx--side-nav--collapsed="{!isOpen}"
   {...$$restProps}
 >
   <slot />