Converted some objects to components.

public/styles/components/_navbar.scss

@@ -0,0 +1,112 @@
+/*
+ *  Navbar
+ *    Navigation bar at the top of the screen.
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/settings/typography.scss
+ *    styles/settings/z.scss
+ *    styles/tools/flex.scss
+ *    styles/tool/list.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+$c-navbar--link-thickness: 5px;
+
+.c-navbar {
+  z-index: $s-z--navbar;
+
+  &.is-stuck {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+
+
+  &__nav {
+    @extend %t-flexbox;
+    @include t-align-items(stretch);
+    @extend %t-dp--shadow;
+    background: $s-color--navbar;
+    color: white;
+  }
+
+  //Logo
+  &__logo-container {
+    width: 100%;
+    padding: 0.5em;
+  }
+
+  &__logo {
+    width: 7em;
+  }
+
+  //Links
+  &__link {
+    @include t-align-items(center);
+    @extend %s-font--style-button;
+    display: none;
+    position: relative;
+    padding: 1em;
+    color: $s-color--navbar__text;
+
+    &:after {
+      @extend %t-dp--shadow;
+      position: absolute;
+      width: 100%;
+      height: 0px;
+      left: 0;
+      bottom: 0px;
+      @include t-translate-y(100%)
+      transition: height 0.2s $s-animation--ease-out;
+
+      content: " ";
+    }
+
+    &.is-active:after {
+      background: $s-color--navbar__bar-hover;
+      height: $c-navbar--link-thickness;
+    }
+
+    &:hover {
+      color: $s-color--navbar__text-hover;
+
+      &:after {
+        background: $s-color--navbar__bar-hover;
+        height: $c-navbar--link-thickness;
+      }
+    }
+  }
+
+  &__hamburger {
+  }
+
+  @include t-media-query($s-xsmall-up) {
+    &__hamburger {
+      display: none;
+    }
+
+    &__logo {
+      width: 10em;
+    }
+
+    &__link {
+      @include t-flexbox();
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+
+    &__logo {
+      width: 12em;
+    }
+  }
+
+  @include t-media-query($s-medium-up) {
+    &.is-stuck {
+      top: 5%;
+    }
+  }
+}