global nav and topbar

scss/components/_global_navigation.scss

@@ -0,0 +1,30 @@
+.global-navigation {
+  background-color: $color-white;
+
+  .sidenav__link {
+    padding-right: $gap;
+
+    @include media($medium-screen) {
+      padding-right: $gap * 2;
+    }
+  }
+
+  .sidenav__link-label {
+    @include hide;
+
+    @include media($medium-screen) {
+      @include unhide;
+      padding-left: $gap;
+    }
+  }
+
+  &.global-navigation__context--workspace {
+    .sidenav__link {
+      padding-right: $gap;
+    }
+
+    .sidenav__link-label {
+      @include hide;
+    }
+  }
+}

scss/components/_topbar.scss

@@ -0,0 +1,71 @@
+.topbar {
+  background-color: $color-white;
+  border-bottom: 1px solid $color-black;
+
+  .topbar__navigation {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+
+    .topbar__link {
+      color: $color-black;
+      display: inline-flex;
+      align-items: center;
+      height: $topbar-height;
+      padding: 0 ($gap * 2);
+      text-decoration: none;
+
+      .topbar__link-label {
+        @include h5;
+      }
+
+      .topbar__link-icon {
+        margin-left: $gap;
+      }
+
+      &.topbar__link--shield {
+        width: $icon-bar-width;
+        justify-content: center;
+        padding: 0;
+
+        .topbar__link-icon {
+          margin: 0;
+        }
+      }
+
+      &:hover {
+        background-color: $color-primary-darker;
+        color: $color-white;
+
+        .topbar__link-icon {
+          @include icon-style-inverted;
+        }
+      }
+    }
+
+    .topbar__context {
+      display: flex;
+      flex-grow: 1;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: space-between;
+
+      &.topbar__context--workspace {
+        background-color: $color-primary;
+
+        .topbar__link {
+          color: $color-white;
+
+          .topbar__link-icon {
+            @include icon-style-inverted;
+          }
+
+          &:hover {
+            background-color: $color-primary-darker;
+          }
+        }
+      }
+    }
+  }
+}

scss/core/_util.scss

@@ -1,3 +1,25 @@
 .nowrap {
   white-space: nowrap;
 }
+
+@mixin hide {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+@mixin unhide {
+  border: unset;
+  clip: unset;
+  height: unset;
+  margin: unset;
+  overflow: unset;
+  padding: unset;
+  position: unset;
+  width: unset;
+}

templates/navigation/global_navigation.html.to

@@ -0,0 +1,6 @@
+<div class="global-navigation sidenav global-navigation__context--{{context}}">
+  <ul>
+    {% module SidenavItem("Requests", href="/requests", icon="document", active=matchesPath('/requests')) %}
+    {% module SidenavItem("Workspaces", href="/workspaces", icon="cloud", active=matchesPath('/workspaces')) %}
+  </ul>
+</div>