From a417cee48139c6d6fb36fe9a4901b45a2c8dbc88 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Wed, 18 Nov 2020 08:53:55 -0600
Subject: [PATCH] docs(UIShell): add example for persisted hamburger menu

---
 docs/src/pages/components/UIShell.svx         |  6 +-
 .../src/pages/framed/UIShell/HeaderNav.svelte |  7 +-
 .../UIShell/PersistedHamburgerMenu.svelte     | 65 +++++++++++++++++++
 3 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte

diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx
index b4f2050e..46eea0ee 100644
--- a/docs/src/pages/components/UIShell.svx
+++ b/docs/src/pages/components/UIShell.svx
@@ -36,4 +36,8 @@ components: ["Header",
 
 ### Header with utilities
 
-<FileSource src="/framed/UIShell/HeaderUtilities" />
\ No newline at end of file
+<FileSource src="/framed/UIShell/HeaderUtilities" />
+
+### Header with persisted hamburger menu
+
+<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/UIShell/HeaderNav.svelte b/docs/src/pages/framed/UIShell/HeaderNav.svelte
index 5a8ce687..1e229526 100644
--- a/docs/src/pages/framed/UIShell/HeaderNav.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNav.svelte
@@ -19,12 +19,7 @@
   let isSideNavOpen = false;
 </script>
 
-<Header
-  persistentHamburgerMenu="{true}"
-  company="IBM"
-  platformName="Carbon Svelte"
-  bind:isSideNavOpen
->
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
   <div slot="skip-to-content">
     <SkipToContent />
   </div>
diff --git a/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte b/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
new file mode 100644
index 00000000..5a8ce687
--- /dev/null
+++ b/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>