Doc: sidebar

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;
+}

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;

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;
-  }
 }

scss/_c-main-layout.scss

@@ -0,0 +1,39 @@
+/* ==========================================================================
+  c-main-layout
+   ========================================================================== */
+
+#routify-app {
+  height: 100%;
+}
+
+.c-main-layout {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.c-main-layout__sidebar {
+  display: none;
+  @media (min-width: $g-bp-2) {
+    display: block;
+  }
+}
+
+.c-main-layout__sidebar {
+  height: 100%;
+  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;
+  overflow: scroll;
+  .c-container-horizontal {
+    margin: 0 auto;
+  }
+}

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;

scss/_c-navigation.scss

@@ -2,56 +2,6 @@
    c-navigation
    ========================================================================== */
 
-.c-navigation ul {
-  display: flex;
-  align-items: center;
-}
-
-.c-navigation ul li {
-  list-style: none;
-}
-
-.c-navigation {
-  .o-svg-icon {
-    path, circle {
-      opacity: 0.5;
-    }
-  }
-  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;
-  }
-  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--selected a {
-  background-color: #FFE3FF;
-  color: $g-pink-700;
-}
-
 
 @media (max-width: $g-bp-2) {
 

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 {
@@ -18,11 +19,12 @@
 }
 
 .c-sidebar-nav {
-
+  border-left: 0.2rem solid transparent;
   a {
     text-decoration: none;
     display: block;
-    padding: 1rem 1.6rem;
+    padding: 0.6rem 1.2rem;
+    margin: 0 0 0.7rem;
     &:link,
     &:visited {
       color: #1D2C48;
@@ -36,23 +38,27 @@
 }
 
 .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;
   }
 }
 
+.c-sidebar-nav__item--icon a {
+  display: flex;
+  .o-svg-icon {
+    margin-right: 1.4rem;
+  }
+}
 
 /* ==========================================================================
    c-sidebar-nav-child
@@ -88,7 +94,6 @@
 }
 
 .c-sidebar-nav-child__item a {
-  border-radius: .8rem;
   &:hover,
   &:focus {
     color: $g-pink-700;
@@ -101,3 +106,22 @@
   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;
+        }
+      }
+    }
+  }
+}

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;

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
+
+

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>

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>