chore: lift components folder

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let ariaLabel = undefined;
+  export let isOpen = false;
+
+  import { fly } from "svelte/transition";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Menu20 from "carbon-icons-svelte/lib/Menu20";
+  import { Icon } from "../../Icon";
+</script>
+
+<button
+  type="button"
+  title="Open menu"
+  aria-label={ariaLabel}
+  class:bx--header__action={true}
+  class:bx--header__menu-trigger={true}
+  class:bx--header__menu-toggle={true}
+  {...$$restProps}
+  transition:fly={{ x: -200, delay: 50, duration: 250 }}
+  on:click
+  on:click={() => (isOpen = !isOpen)}>
+  <Icon
+    title={isOpen ? 'Close' : 'Open Menu'}
+    render={isOpen ? Close20 : Menu20} />
+</button>

src/UIShell/SideNav/SideNav.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let ariaLabel = undefined;
+  export let isOpen = undefined;
+</script>
+
+<nav
+  aria-label={ariaLabel}
+  class:bx--side-nav__navigation={true}
+  class:bx--side-nav={true}
+  class:bx--side-nav--ux={true}
+  class:bx--side-nav--expanded={isOpen}
+  {...$$restProps}>
+  <slot />
+</nav>

src/UIShell/SideNav/SideNavItems.svelte

@@ -0,0 +1,3 @@
+<ul class:bx--side-nav__items={true}>
+  <slot />
+</ul>

src/UIShell/SideNav/SideNavLink.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let isSelected = false;
+  export let href = undefined;
+  export let text = undefined;
+  export let icon = undefined;
+
+  import { Icon } from "../../Icon";
+</script>
+
+<li class:bx--side-nav__item={true}>
+  <a
+    aria-current={isSelected ? 'page' : ''}
+    {href}
+    class:bx--side-nav__link={true}
+    class:bx--side-nav__link--current={isSelected}
+    {...$$restProps}
+    on:click>
+    <div class:bx--side-nav__icon={true} class:bx--side-nav__icon--small={true}>
+      {#if icon}
+        <Icon {...icon} />
+      {/if}
+    </div>
+    <span class:bx--side-nav__link-text={true}>{text}</span>
+  </a>
+</li>

src/UIShell/SideNav/SideNavMenu.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let expanded = false;
+  export let text = undefined;
+  export let icon = undefined;
+
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import { Icon } from "../../Icon";
+</script>
+
+<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={true}>
+  <button
+    type="button"
+    aria-haspopup="true"
+    aria-expanded={expanded}
+    class:bx--side-nav__submenu={true}
+    {...$$restProps}
+    on:click
+    on:click={() => {
+      expanded = !expanded;
+    }}>
+    <div class:bx--side-nav__icon={true}>
+      {#if icon}
+        <Icon {...icon} />
+      {/if}
+    </div>
+    <span class:bx--side-nav__submenu-title={true}>{text}</span>
+    <div
+      class:bx--side-nav__icon={true}
+      class:bx--side-nav__icon--small={true}
+      class:bx--side-nav__submenu-chevron={true}>
+      <Icon title="Open Menu" tabindex="0" render={ChevronDown16} />
+    </div>
+  </button>
+  <ul role="menu" class:bx--side-nav__menu={true}>
+    <slot />
+  </ul>
+</li>

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let isSelected = undefined;
+  export let href = undefined;
+  export let text = undefined;
+</script>
+
+<li role="none" class:bx--side-nav__menu-item={true}>
+  <a
+    role="menuitem"
+    aria-current={isSelected ? 'page' : ''}
+    {href}
+    class:bx--side-nav__link={true}
+    {...$$restProps}
+    on:click>
+    <span class:bx--side-nav__link-text={true}>{text}</span>
+  </a>
+</li>