From 2f99cf049e65762661a7b63711e4b748d59164b9 Mon Sep 17 00:00:00 2001
From: Johan Ronsse <johan.ronsse@gmail.com>
Date: Mon, 1 Jun 2020 10:19:02 +0200
Subject: [PATCH 1/5] Switch the site over to sidebar layout

---
 scss/_c-header-mobile.scss                    | 16 +++++
 scss/_c-header.scss                           | 14 ----
 scss/_c-hero.scss                             |  2 +-
 scss/_c-logo.scss                             |  6 +-
 scss/_c-main-layout.scss                      | 28 ++++++++
 scss/_c-navigation-mobile.scss                |  1 +
 scss/_c-navigation.scss                       | 17 +++--
 scss/_c-sidebar-nav.scss                      |  7 +-
 scss/_e-base.scss                             |  1 -
 scss/global.scss                              | 20 +++---
 src/components/Header.svelte                  | 51 --------------
 src/components/Sidebar.svelte                 | 11 +++
 src/components/nav/LeftNavLayout.svelte       | 68 +-----------------
 src/components/nav/NavItems.svelte            | 55 +++++++++++----
 src/components/nav/NavItemsMobile.svelte      |  1 -
 src/pages/_layout.svelte                      | 70 +++++++++++++++++--
 .../guide/introduction/getting-started.svelte |  8 +--
 17 files changed, 193 insertions(+), 183 deletions(-)
 create mode 100644 scss/_c-header-mobile.scss
 delete mode 100644 scss/_c-header.scss
 create mode 100644 scss/_c-main-layout.scss
 delete mode 100644 src/components/Header.svelte
 create mode 100644 src/components/Sidebar.svelte

diff --git a/scss/_c-header-mobile.scss b/scss/_c-header-mobile.scss
new file mode 100644
index 0000000..59e0c8e
--- /dev/null
+++ b/scss/_c-header-mobile.scss
@@ -0,0 +1,16 @@
+/* ==========================================================================
+  c-header-mobile
+   ========================================================================== */
+
+.c-header-mobile {
+  display: flex;
+  padding: 2.4rem;
+  justify-content: space-between;
+  @media (min-width: $g-bp-2) {
+    display: none;
+  }
+}
+
+.c-header-mobile__logo img {
+  width: 16rem;
+}
\ No newline at end of file
diff --git a/scss/_c-header.scss b/scss/_c-header.scss
deleted file mode 100644
index d57fb58..0000000
--- a/scss/_c-header.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/* ==========================================================================
-  c-header
-  ---
-  The general header
-   ========================================================================== */
-
-.c-header {
-  padding: 2.4rem 0;
-  > .c-container-horizontal {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-}
diff --git a/scss/_c-hero.scss b/scss/_c-hero.scss
index 8d3c4ad..4a928fe 100644
--- a/scss/_c-hero.scss
+++ b/scss/_c-hero.scss
@@ -12,7 +12,7 @@
   flex-direction: column-reverse;
 
   @media (min-width: $g-bp-2) {
-    padding: 9.6rem 0;
+    padding: 0 0 9.6rem;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
diff --git a/scss/_c-logo.scss b/scss/_c-logo.scss
index b210188..19a5c36 100644
--- a/scss/_c-logo.scss
+++ b/scss/_c-logo.scss
@@ -4,13 +4,11 @@
 
 .c-logo {
   display: flex;
-  width: 12rem;
+  width: 15rem;
+  margin: 0 0 4rem;
 
   img {
     width: 100%;
   }
 
-  @media (min-width: $g-bp-2) {
-    width: 17.2rem;
-  }
 }
diff --git a/scss/_c-main-layout.scss b/scss/_c-main-layout.scss
new file mode 100644
index 0000000..6ca1b30
--- /dev/null
+++ b/scss/_c-main-layout.scss
@@ -0,0 +1,28 @@
+/* ==========================================================================
+  c-main-layout
+   ========================================================================== */
+
+.c-main-layout {
+  display: flex;
+}
+
+.c-main-layout__sidebar {
+  display: none;
+  @media (min-width: $g-bp-2) {
+    display: block;
+  }
+}
+
+.c-main-layout__sidebar {
+  min-width: 32rem;
+  max-width: 32rem;
+  padding: 4.8rem 2.4rem;
+  overflow: scroll;
+  flex: 0 0 32rem;
+  border-right: 0.1rem solid $g-gray-100;
+}
+
+.c-main-layout__content {
+  flex: 1 1 auto;
+  padding: 2.4rem 4.8rem;
+}
\ No newline at end of file
diff --git a/scss/_c-navigation-mobile.scss b/scss/_c-navigation-mobile.scss
index 6f7aa56..1ea876e 100644
--- a/scss/_c-navigation-mobile.scss
+++ b/scss/_c-navigation-mobile.scss
@@ -43,6 +43,7 @@
   color: #1D2C48;
   display: flex;
   padding: 1.6rem;
+  align-items: center;
   justify-content: space-between;
   svg {
     opacity: 0.5;
diff --git a/scss/_c-navigation.scss b/scss/_c-navigation.scss
index e2c7cfb..338b487 100644
--- a/scss/_c-navigation.scss
+++ b/scss/_c-navigation.scss
@@ -3,7 +3,6 @@
    ========================================================================== */
 
 .c-navigation ul {
-  display: flex;
   align-items: center;
 }
 
@@ -18,14 +17,7 @@
     }
   }
   li {
-    margin-right: 0.8rem;
-  }
-  li:nth-last-child(4) {
-    margin-right: 2.4rem;
-  }
-  li:nth-last-child(2),
-  li:nth-last-child(3) {
-    margin-right: 0.2rem;
+    margin-bottom: 0.8rem;
   }
   a {
     display: block;
@@ -47,6 +39,13 @@
   }
 }
 
+.c-navigation__item--icon a {
+  display: flex;
+  .o-svg-icon {
+    margin-right: 1.4rem;
+  }
+}
+
 .c-navigation__item--selected a {
   background-color: #FFE3FF;
   color: $g-pink-700;
diff --git a/scss/_c-sidebar-nav.scss b/scss/_c-sidebar-nav.scss
index 8e6e96e..6849cbf 100644
--- a/scss/_c-sidebar-nav.scss
+++ b/scss/_c-sidebar-nav.scss
@@ -53,6 +53,12 @@
   }
 }
 
+.c-sidebar-nav__item--icon a {
+  display: flex;
+  .o-svg-icon {
+    margin-right: 1.4rem;
+  }
+}
 
 /* ==========================================================================
    c-sidebar-nav-child
@@ -100,4 +106,3 @@
   background: #FFF0FF;
   color: $g-pink-700;
 }
-
diff --git a/scss/_e-base.scss b/scss/_e-base.scss
index 4ca14f7..e32bd0d 100644
--- a/scss/_e-base.scss
+++ b/scss/_e-base.scss
@@ -22,7 +22,6 @@ html {
 }
 
 body {
-  border-top: 0.4rem solid #E938C2;
   background: #FFF;
   color: $g-text-color;
   font-family: $g-text-font-family;
diff --git a/scss/global.scss b/scss/global.scss
index 0297bcc..a1bb173 100644
--- a/scss/global.scss
+++ b/scss/global.scss
@@ -16,33 +16,33 @@
 @import "_o-svg-icon";
 
 // Components
-@import "_c-button";
-@import "_c-button-toolbar";
 @import "_c-blogpost";
+@import "_c-blogpost-author";
 @import "_c-blogpost-layout";
 @import "_c-blogpost-list";
-@import "_c-blogpost-author";
+@import "_c-button";
+@import "_c-button-toolbar";
 @import "_c-container-horizontal";
 @import "_c-container-vertical";
 @import "_c-content";
-@import "_c-contributors";
 @import "_c-contributor";
-@import "_c-footer";
+@import "_c-contributors";
 @import "_c-file-tree";
+@import "_c-footer";
 @import "_c-function-doc";
-@import "_c-header";
-@import "_c-hero";
+@import "_c-header-mobile";
 @import "_c-help-request";
+@import "_c-hero";
 @import "_c-horizontal-list";
 @import "_c-logo";
+@import "_c-main-layout";
 @import "_c-navigation";
 @import "_c-navigation-mobile";
 @import "_c-navigation-mobile-holder";
 @import "_c-navigation-toggle";
 @import "_c-note";
-@import "_c-sidebar-layout";
-@import "_c-sidebar-nav";
 @import "_c-pagination";
+@import "_c-sidebar-nav";
 @import "_c-table";
 @import "_c-tabs";
 @import "_c-tabs-pages";
@@ -62,3 +62,5 @@
 @import "c-styleguide-icon-list"; // might want to separate these styleguide components from the rest
 @import "c-styleguide-icon"; // might want to separate these styleguide components from the rest
 @import "c-styleguide-component"; // might want to separate these styleguide components from the rest
+
+
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
deleted file mode 100644
index 4630b80..0000000
--- a/src/components/Header.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-    import NavItems from './nav/NavItems.svelte';
-    import NavItemsMobile from './nav/NavItemsMobile.svelte';
-    let showMobileNav = false
-    let bodyElement = document.querySelector('body');
-    let htmlElement = document.querySelector('html');
-
-    function handleToggleClick(e) {
-      showMobileNav = !showMobileNav
-    }
-
-    if (showMobileNav) {
-        bodyElement.classList.add('c-mobile-nav-active');
-        htmlElement.classList.add('u-no-scroll');
-    } else {
-        bodyElement.classList.remove('c-mobile-nav-active');
-        htmlElement.classList.remove('u-no-scroll');
-    }
-
-</script>
-
-<header class="c-header">
-  <div class="c-container-horizontal">
-
-    <a href="/" class="c-logo">
-      <img src="/images/logo.svg" alt="Routify">
-    </a>
-
-    <nav class="c-navigation">
-      <NavItems />
-    </nav>
-
-    <a href="#nav"
-      class="c-navigation-toggle"
-      class:c-navigation-toggle--active={showMobileNav === !showMobileNav}
-      on:click|preventDefault={handleToggleClick}
-    >
-      <svg width="40" height="40" viewBox="0 0 40 40">
-        <rect fill="#000" width="18" height="2" x="11" y="19" class="c-navigation-toggle__line1"></rect>
-        <rect fill="#000" width="18" height="2" x="11" y="19" class="c-navigation-toggle__line2"></rect>
-        <rect fill="#000" width="18" height="2" x="11" y="19" class="c-navigation-toggle__line3"></rect>
-      </svg>
-    </a>
-  </div>
-</header>
-
-<div class="c-navigation-mobile-holder" class:c-navigation-mobile-holder--active={showMobileNav}>
-  <nav>
-    <NavItemsMobile bind:showMobileNav />
-  </nav>
-</div>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
new file mode 100644
index 0000000..479420b
--- /dev/null
+++ b/src/components/Sidebar.svelte
@@ -0,0 +1,11 @@
+<script>
+    import NavItems from './nav/NavItems.svelte';
+</script>
+
+<a href="/" class="c-logo">
+  <img src="/images/logo.svg" alt="Routify">
+</a>
+
+<nav class="c-navigation">
+  <NavItems />
+</nav>
diff --git a/src/components/nav/LeftNavLayout.svelte b/src/components/nav/LeftNavLayout.svelte
index 13fbb6b..8969727 100644
--- a/src/components/nav/LeftNavLayout.svelte
+++ b/src/components/nav/LeftNavLayout.svelte
@@ -1,70 +1,6 @@
 <script>
-  import { isActive, url, context, layout } from "@sveltech/routify";
   import HelpRequest from '@/components/HelpRequest.svelte'
-  import { getContext } from "svelte";
-  $: ({ component } = $context);
-  $: list = $layout.children;
-
-  const elements = getContext("hashElements");
-  let currentId = false;
-  let y = 0;
-  let navEl;
-
-  $: handleScroll(y);
-  function handleScroll(y) {
-    if (navEl)
-      navEl.style["max-height"] = `calc(100vh - ${
-        navEl.getBoundingClientRect().top
-      }px)`;
-
-    let smallest = false;
-    elements.forEach(he => {
-      const top = he.getBoundingClientRect().top;
-      if (!smallest || (50 > top && top > smallest)) {
-        smallest = top;
-        currentId = `#${he.id}`;
-      }
-    });
-  }
 </script>
 
-<svelte:window bind:scrollY={y} />
-
-<main class="c-sidebar-layout">
-  <div class="c-sidebar-layout__side">
-    <nav bind:this={navEl}>
-      <ul class="c-sidebar-nav">
-        {#each list as { path, title, children, meta }}
-          <li
-            class="c-sidebar-nav__item "
-            class:c-sidebar-nav__item--selected={$isActive(path)}>
-            <a href={$url(path)}>{title}</a>
-            <ul class="c-sidebar-nav-child">
-              {#if children && children.length && $isActive(path)}
-                {#each children as child}
-                  {#if child.isMeta}
-                    <li
-                      class="c-sidebar-nav-child__item"
-                      class:c-sidebar-nav-child__item--selected={child.path === currentId}>
-                      <a href={$url(child.path)}>{child.title}</a>
-                    </li>
-                  {:else}
-                    <li
-                      class="c-sidebar-nav-child__item"
-                      class:c-sidebar-nav-child__item--selected={$isActive(child.path)}>
-                      <a href={$url(child.path)}>{child.title}</a>
-                    </li>
-                  {/if}
-                {/each}
-              {/if}
-            </ul>
-          </li>
-        {/each}
-      </ul>
-    </nav>
-  </div>
-  <div class="c-sidebar-layout__main">
-    <slot />
-    <HelpRequest />
-  </div>
-</main>
+<slot />
+<HelpRequest />
diff --git a/src/components/nav/NavItems.svelte b/src/components/nav/NavItems.svelte
index f5557bf..b650baf 100644
--- a/src/components/nav/NavItems.svelte
+++ b/src/components/nav/NavItems.svelte
@@ -1,19 +1,44 @@
 <script>
-  import { isActive, url, layout } from "@sveltech/routify";
+
+  import { isActive, url, context, layout } from "@sveltech/routify";
   import Icon from '@/components/Icon.svelte';
 
+  $: list = $layout.children;
+
 </script>
-<ul>
-  {#each $layout.children as {path, title, meta}}
-    <li class:c-navigation__item--selected={$isActive(path)}>
-      {#if meta.icon}
-        <a href={path}>
-            <Icon name={meta.icon} size="24" />
-            <span class="u-sr-only">{title}</span>
-        </a>
-      {:else}
-        <a href={$url(path)}>{title}</a>
-      {/if}
-    </li>
-  {/each}
-</ul>
+
+<nav>
+  <ul class="c-sidebar-nav">
+    {#each list as { path, title, children, meta }}
+      <li
+        class="c-sidebar-nav__item"
+        class:c-sidebar-nav__item--selected={$isActive(path)}
+        class:c-sidebar-nav__item--icon={meta.icon}
+      >
+        {#if meta.icon}
+          <a href={path}>
+              <Icon name={meta.icon} size="24" />
+              {title}
+          </a>
+        {:else}
+          <a href={$url(path)}>{title}</a>
+        {/if}
+        <ul class="c-sidebar-nav-child">
+          {#if children && children.length && $isActive(path)}
+            {#each children as child}
+              {#if child.isMeta}
+                <li class="c-sidebar-nav-child__item">
+                  <a href={$url(child.path)}>{child.title}</a>
+                </li>
+              {:else}
+                <li class="c-sidebar-nav-child__item">
+                  <a href={$url(child.path)}>{child.title}</a>
+                </li>
+              {/if}
+            {/each}
+          {/if}
+        </ul>
+      </li>
+    {/each}
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/src/components/nav/NavItemsMobile.svelte b/src/components/nav/NavItemsMobile.svelte
index 2625576..1648ade 100644
--- a/src/components/nav/NavItemsMobile.svelte
+++ b/src/components/nav/NavItemsMobile.svelte
@@ -13,7 +13,6 @@
 </script>
 
 <div class="c-navigation-mobile-holder c-navigation-mobile-holder--active">
-
   <nav role="navigation">
     <ul class="c-navigation-mobile">
       <Fragment bind:showMobileNav {items} />
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
index 74c93e2..8583529 100644
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@@ -1,10 +1,34 @@
 <script>
-  import Header from "@/components/Header.svelte";
+  import Sidebar from "@/components/Sidebar.svelte";
   import Footer from "@/components/Footer.svelte";
   import { metatags, page } from "@sveltech/routify";
+
   const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
+
   metatags.template("title", title => `${title ? ` ${title} - ` : ""}Routify`);
   $: metatags.title = capitalize($page.title);
+
+
+  // Mobile nav
+
+  import NavItemsMobile from '../components/nav/NavItemsMobile.svelte';
+
+  let showMobileNav = false
+  let bodyElement = document.querySelector('body');
+  let htmlElement = document.querySelector('html');
+
+  function handleToggleClick(e) {
+    showMobileNav = !showMobileNav
+  }
+
+  if (showMobileNav) {
+      bodyElement.classList.add('c-mobile-nav-active');
+      htmlElement.classList.add('u-no-scroll');
+  } else {
+      bodyElement.classList.remove('c-mobile-nav-active');
+      htmlElement.classList.remove('u-no-scroll');
+  }
+
 </script>
 
 <!-- routify:options children=[
@@ -12,10 +36,42 @@
   {title: "Discord", icon:"discord", path: "https://discord.gg/ntKJD5B"},
   {title: "Twitter", icon:"twitter", path: "https://twitter.com/routifyjs"}
 ] -->
-<Header />
-<main>
-  <div class="c-container-horizontal">
-    <slot />
+
+
+<div class="c-header-mobile">
+  <a href="/" class="c-header-mobile__logo">
+    <img src="/images/logo.svg" alt="Routify">
+  </a>
+  
+  <a href="#nav"
+    class="c-navigation-toggle"
+    class:c-navigation-toggle--active={showMobileNav}
+    on:click|preventDefault={handleToggleClick}
+  >
+    <svg width="40" height="40" viewBox="0 0 40 40">
+      <rect fill="#000" width="18" height="2" x="11" y="19" class="c-navigation-toggle__line1"></rect>
+      <rect fill="#000" width="18" height="2" x="11" y="19" class="c-navigation-toggle__line2"></rect>
+      <rect fill="#000" width="18" height="2" x="11" y="19" class="c-navigation-toggle__line3"></rect>
+    </svg>
+  </a>
+</div>
+
+<div class="c-navigation-mobile-holder" class:c-navigation-mobile-holder--active={showMobileNav}>
+  <nav>
+    <NavItemsMobile bind:showMobileNav />
+  </nav>
+</div>
+
+
+
+<div class="c-main-layout">
+  <div class="c-main-layout__sidebar">
+     <Sidebar />
+  </div>
+  <div class="c-main-layout__content">
+    <main>
+      <slot />
+    </main>
+    <Footer />
   </div>
-</main>
-<Footer />
+</div>
diff --git a/src/pages/guide/introduction/getting-started.svelte b/src/pages/guide/introduction/getting-started.svelte
index 62c8b99..fd3bdbb 100644
--- a/src/pages/guide/introduction/getting-started.svelte
+++ b/src/pages/guide/introduction/getting-started.svelte
@@ -8,9 +8,9 @@
 
 <!-- routify:options index=10 -->
 
-<div class="c-content">
-  <div class="c-container-vertical c-container-vertical--small">
-    <h1 class="c-h1">Getting started</h1>
+<div class="c-container-vertical c-container-vertical--small">
+  <h1 class="c-h1">Getting started</h1>
+  <div class="c-content">
     <p>
       The easiest way to try Routify is to visit our
       <a
@@ -29,10 +29,10 @@
       - each of which can be imported, using Codesandbox's "Import from Github"
       feature. In fact, any Routify project can be imported to Codesandbox.
     </p>
-
   </div>
 </div>
 
+
 <div class="c-container-vertical c-container-vertical--small">
   <div class="c-content">
   <h3 class="h3">Installation</h3>

From bed25a4dae2d4d32c9cfca1565fec4a7322590c1 Mon Sep 17 00:00:00 2001
From: Johan Ronsse <johan.ronsse@gmail.com>
Date: Mon, 1 Jun 2020 10:48:58 +0200
Subject: [PATCH 2/5] Improvements

---
 scss/_c-main-layout.scss     | 11 +++++++++++
 src/components/Footer.svelte |  4 +---
 src/pages/_layout.svelte     |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/scss/_c-main-layout.scss b/scss/_c-main-layout.scss
index 6ca1b30..bdd5c14 100644
--- a/scss/_c-main-layout.scss
+++ b/scss/_c-main-layout.scss
@@ -2,8 +2,14 @@
   c-main-layout
    ========================================================================== */
 
+#routify-app {
+  height: 100%;
+}
+
 .c-main-layout {
   display: flex;
+  height: 100%;
+  overflow: hidden;
 }
 
 .c-main-layout__sidebar {
@@ -14,6 +20,7 @@
 }
 
 .c-main-layout__sidebar {
+  height: 100%;
   min-width: 32rem;
   max-width: 32rem;
   padding: 4.8rem 2.4rem;
@@ -25,4 +32,8 @@
 .c-main-layout__content {
   flex: 1 1 auto;
   padding: 2.4rem 4.8rem;
+  overflow: scroll;
+  .c-container-horizontal {
+    margin: 0 auto;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index d759b56..ebab52c 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,5 +1,3 @@
 <footer class="c-footer">
-  <div class="c-container-horizontal">
-    <p>Routify is MIT Licensed.</p>
-  </div>
+  <p>Routify is MIT Licensed.</p>
 </footer>
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
index 8583529..119b16c 100644
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@@ -69,7 +69,7 @@
      <Sidebar />
   </div>
   <div class="c-main-layout__content">
-    <main>
+    <main class="c-container-horizontal">
       <slot />
     </main>
     <Footer />

From ec45967fa8931ede400f81900b77250f71bb0cf8 Mon Sep 17 00:00:00 2001
From: Johan Ronsse <johan.ronsse@gmail.com>
Date: Mon, 1 Jun 2020 11:54:52 +0200
Subject: [PATCH 3/5] Fix selected state nav

---
 src/components/nav/NavItems.svelte | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/nav/NavItems.svelte b/src/components/nav/NavItems.svelte
index b650baf..89f31d0 100644
--- a/src/components/nav/NavItems.svelte
+++ b/src/components/nav/NavItems.svelte
@@ -27,11 +27,17 @@
           {#if children && children.length && $isActive(path)}
             {#each children as child}
               {#if child.isMeta}
-                <li class="c-sidebar-nav-child__item">
+                <li
+                  class="c-sidebar-nav-child__item"
+                  class:c-sidebar-nav-child__item--selected={child.path === currentId}
+                >
                   <a href={$url(child.path)}>{child.title}</a>
                 </li>
               {:else}
-                <li class="c-sidebar-nav-child__item">
+                <li
+                  class="c-sidebar-nav-child__item"
+                  class:c-sidebar-nav-child__item--selected={$isActive(child.path)}
+                >
                   <a href={$url(child.path)}>{child.title}</a>
                 </li>
               {/if}
@@ -41,4 +47,6 @@
       </li>
     {/each}
   </ul>
-</nav>
\ No newline at end of file
+</nav>
+
+

From 0feb9dfed26132566ef0b0f381a4f4b301ad3420 Mon Sep 17 00:00:00 2001
From: Johan Ronsse <johan.ronsse@gmail.com>
Date: Mon, 1 Jun 2020 12:26:06 +0200
Subject: [PATCH 4/5] Use recursive nav for the sidebar

---
 scss/_c-sidebar-nav.scss           | 12 +++++++-----
 src/components/nav/NavItems.svelte | 26 ++++++++++++++++++++++----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/scss/_c-sidebar-nav.scss b/scss/_c-sidebar-nav.scss
index 6849cbf..018f820 100644
--- a/scss/_c-sidebar-nav.scss
+++ b/scss/_c-sidebar-nav.scss
@@ -2,12 +2,13 @@
    c-sidebar-nav
    ========================================================================== */
 
+.c-sidebar-nav .c-sidebar-nav {
+  margin-left: 2rem;
+}
+
 .c-sidebar-nav li {
   list-style: none;
-  margin: 0 0 0.6rem;
-  &:last-child {
-    margin: 0;
-  }
+
 }
 
 .c-sidebar-layout__side nav {
@@ -22,7 +23,8 @@
   a {
     text-decoration: none;
     display: block;
-    padding: 1rem 1.6rem;
+    padding: 0.6rem 1.2rem;
+    margin: 0 0 0.7rem;
     &:link,
     &:visited {
       color: #1D2C48;
diff --git a/src/components/nav/NavItems.svelte b/src/components/nav/NavItems.svelte
index 89f31d0..31c773c 100644
--- a/src/components/nav/NavItems.svelte
+++ b/src/components/nav/NavItems.svelte
@@ -5,10 +5,28 @@
 
   $: list = $layout.children;
 
+  export let node = $layout;
+
 </script>
 
-<nav>
-  <ul class="c-sidebar-nav">
+
+<ul class="c-sidebar-nav">
+  {#each node.children as node}
+  <li
+    class="c-sidebar-nav__item"
+    class:c-sidebar-nav__item--selected={$isActive(node.path)}
+  >
+    <a href={$url(node.path)}>
+      {node.title}
+    </a>
+    {#if node.children.length}
+      <svelte:self {node} />
+    {/if}
+  </li>
+  {/each}
+</ul>
+
+<!--  <ul class="c-sidebar-nav">
     {#each list as { path, title, children, meta }}
       <li
         class="c-sidebar-nav__item"
@@ -46,7 +64,7 @@
         </ul>
       </li>
     {/each}
-  </ul>
-</nav>
+  </ul> -->
+
 
 

From 3fd2fc925a80fe9825c4f195853b1f112fbe1cc0 Mon Sep 17 00:00:00 2001
From: Johan Ronsse <johan.ronsse@gmail.com>
Date: Mon, 1 Jun 2020 12:47:02 +0200
Subject: [PATCH 5/5] Improve nav styles

---
 scss/_c-navigation.scss  | 49 ----------------------------------------
 scss/_c-sidebar-nav.scss | 27 ++++++++++++++++++----
 2 files changed, 22 insertions(+), 54 deletions(-)

diff --git a/scss/_c-navigation.scss b/scss/_c-navigation.scss
index 338b487..3439dbd 100644
--- a/scss/_c-navigation.scss
+++ b/scss/_c-navigation.scss
@@ -2,55 +2,6 @@
    c-navigation
    ========================================================================== */
 
-.c-navigation ul {
-  align-items: center;
-}
-
-.c-navigation ul li {
-  list-style: none;
-}
-
-.c-navigation {
-  .o-svg-icon {
-    path, circle {
-      opacity: 0.5;
-    }
-  }
-  li {
-    margin-bottom: 0.8rem;
-  }
-  a {
-    display: block;
-    text-decoration: none;
-    color: #1D2C48;
-    padding: 1rem 1.2rem;
-    border-radius: .8rem;
-    &::first-letter { text-transform: capitalize }
-    &:hover,
-    &:focus {
-      color: $g-pink-700;
-      background: #FFF6FF;
-      .o-svg-icon {
-        path, circle {
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
-.c-navigation__item--icon a {
-  display: flex;
-  .o-svg-icon {
-    margin-right: 1.4rem;
-  }
-}
-
-.c-navigation__item--selected a {
-  background-color: #FFE3FF;
-  color: $g-pink-700;
-}
-
 
 @media (max-width: $g-bp-2) {
 
diff --git a/scss/_c-sidebar-nav.scss b/scss/_c-sidebar-nav.scss
index 018f820..0d8a0ec 100644
--- a/scss/_c-sidebar-nav.scss
+++ b/scss/_c-sidebar-nav.scss
@@ -19,7 +19,7 @@
 }
 
 .c-sidebar-nav {
-
+  border-left: 0.2rem solid transparent;
   a {
     text-decoration: none;
     display: block;
@@ -38,17 +38,15 @@
 }
 
 .c-sidebar-nav__item a {
-  border-radius: .8rem;
   &:hover,
   &:focus {
     color: $g-pink-700;
-    background: #FFF6FF;
   }
   &::first-letter { text-transform: capitalize }
 }
 
 .c-sidebar-nav .c-sidebar-nav__item--selected > a {
-  background: #FFE3FF;
+  border-left: 0.2rem solid $g-pink-700;
   &:link,
   &:visited {
     color: $g-pink-700;
@@ -96,7 +94,6 @@
 }
 
 .c-sidebar-nav-child__item a {
-  border-radius: .8rem;
   &:hover,
   &:focus {
     color: $g-pink-700;
@@ -108,3 +105,23 @@
   background: #FFF0FF;
   color: $g-pink-700;
 }
+
+
+
+.c-sidebar-nav {
+  .o-svg-icon {
+    path, circle {
+      opacity: 0.5;
+    }
+  }
+  a {
+    &:hover,
+    &:focus {
+      .o-svg-icon {
+        path, circle {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}