From 2746249d98a9e00170b45add48bea7bf889ca11b Mon Sep 17 00:00:00 2001
From: "adan.ulloa" <adan.ulloa@gmail.com>
Date: Mon, 13 Jan 2020 19:01:37 -0600
Subject: [PATCH] hamburger menu working

---
 src/components/UIShell/UIShell.svelte         | 19 ++++++++++--
 .../UIShellSideNav/HamburgerMenu.svelte       |  5 ++--
 .../UIShellSideNavWrapper.svelte              | 29 +++++++++----------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/UIShell/UIShell.svelte b/src/components/UIShell/UIShell.svelte
index a1277911..ffc9ba78 100644
--- a/src/components/UIShell/UIShell.svelte
+++ b/src/components/UIShell/UIShell.svelte
@@ -15,11 +15,26 @@
   import UIShellSideNavItem from './UIShellSideNav/UIShellSideNavItem.svelte';
   import HamburgerMenu from './UIShellSideNav/HamburgerMenu.svelte';
 
+  let isSideNavOpen = undefined;
+  let winWidth = window.innerWidth;
+
+  window.addEventListener('resize', () => {
+    winWidth = window.innerWidth;
+    
+    if (winWidth >= 1056) {
+      isSideNavOpen = true;
+    } else {
+      isSideNavOpen = false;
+    }
+  });
+
   $: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
 </script>
 
 <header aria-label={ariaLabel} class={cx('--header')} role="banner">
-  <HamburgerMenu />
+  {#if winWidth < 1056}
+    <HamburgerMenu bind:isOpen={isSideNavOpen} />
+  {/if}
   <a class={cx('--header__name')} {href}>
     <span class={cx('--header__name--prefix')}>{company}</span>
     &nbsp;{platformName}
@@ -35,7 +50,7 @@
     <UIShellRightPanel {rightPanel} on:inputSearch />
   {/if}
   {#if sideNavMenu}
-    <UIShellSideNavWrapper>
+    <UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth={winWidth}>
       <UIShellSideNavItem />
     </UIShellSideNavWrapper>
   {/if}
diff --git a/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte b/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
index 678b1445..10c41748 100644
--- a/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
+++ b/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
@@ -1,13 +1,13 @@
 <script>
   export let ariaLabel = undefined;
+  export let isOpen = false;
 
   import { cx } from '../../../lib';
   import Menu20 from 'carbon-icons-svelte/lib/Menu20';
   import Icon from '../../Icon/Icon.svelte';
+  import { fly } from "svelte/transition";
   import { closeIcon } from '../constants';
 
-  let isOpen = false;
-
   $: iconProps = !isOpen ? {
       class: undefined,
       skeleton: false,
@@ -20,6 +20,7 @@
 </script>
 
 <button
+  transition:fly={{ x: -200, delay: 50, duration: 250 }}
   aria-label={ariaLabel}
   class={cx('--header__action', '--header__menu-trigger', '--header__menu-toggle')}
   title="Open menu"
diff --git a/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte b/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte
index bac554d6..b62be452 100644
--- a/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte
+++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte
@@ -1,29 +1,26 @@
 <script>
   export let ariaLabel = undefined;
+  export let isOpen = undefined;
 
   import { cx } from '../../../lib';
+  import Icon from '../../Icon/Icon.svelte';
+  import { closeIcon } from '../constants';
+
+  $: footerSpanText = isOpen ? 'Open' : 'Close';
 </script>
 
-<nav class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux')} aria-label={ariaLabel}>
+<nav
+  class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux', isOpen && '--side-nav--expanded')}
+  aria-label={ariaLabel}>
   <ul class={cx('--side-nav__items')}>
     <slot />
   </ul>
-  <footer class="bx--side-nav__footer">
-    <button class="bx--side-nav__toggle" type="button" title="Open">
-      <div class="bx--side-nav__icon">
-        <svg
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 32 32"
-          aria-hidden="true"
-          style="will-change: transform;">
-          <path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z" />
-        </svg>
+  <footer class={cx('--side-nav__footer')}>
+    <button class={cx('--side-nav__toggle')} type="button" title="Open">
+      <div class={cx('--side-nav__icon')}>
+        <Icon {...closeIcon} />
       </div>
-      <span class="bx--assistive-text">Open</span>
+      <span class={cx('--assistive-text')}>{footerSpanText}</span>
     </button>
   </footer>
 </nav>