1 files changed, 118 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/components/_nav.scss b/examples/snowpack/public/css/components/_nav.scss
new file mode 100644
index 000000000..7220b38e2
--- /dev/null
+++ b/examples/snowpack/public/css/components/_nav.scss
@@ -0,0 +1,118 @@
+@use '../var' as *;
+
+/**
+ * Top nav
+ * The thing at the top
+ */
+
+.snow-nav {
+  position: sticky;
+  top: 0;
+  z-index: map-get($map: $layers, $key: 'nav');
+  display: grid;
+  grid-template-areas: 
+  'mobile logo version'
+  'search search search';
+  grid-template-rows: $nav-height $nav-height;
+  grid-template-columns: 1fr 2fr 1fr;
+  align-items: center;
+  height: $nav-height;
+  padding-right: 0.5rem;
+  padding-left: 0.625rem;
+  color: $white;
+  background-color: $dark-blue;
+
+  body.is-nav-open & {
+    height: $nav-height * 2;
+  }
+
+  @media (min-width: $breakpoint-m) {
+    display: flex;
+    height: $nav-height;
+    padding-left: 0;
+  }
+
+  // -----------
+  //  Components
+  // -----------
+
+  &-link {
+    display: inline-block;
+    padding: 0.5em;
+    color: $white;
+    font-weight: 500;
+    text-decoration: none;
+    opacity: 0.7;
+    transition: opacity 150ms linear;
+
+    &:focus,
+    &:hover {
+      opacity: 1;
+    }
+
+    &__desktop {
+      display: none;
+
+      @media (min-width: $breakpoint-m) {
+        display: block;
+      }
+    }
+  }
+
+  &-logo {
+    display: flex;
+    grid-area: logo;
+    justify-content: center;
+    padding: 0.5rem;
+    color: $white;
+    font-size: 24px;
+    text-decoration: none;
+
+    @media (min-width: $breakpoint-m) {
+      justify-content: flex-start;
+      padding: 0.5rem 1.25rem;
+    }
+  }
+
+  &-mobile-open {
+    display: flex;
+    grid-area: mobile;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    color: $white;
+    font-size: 16px;
+    background: none;
+    border: none;
+    appearance: none;
+
+    @media (min-width: $breakpoint-m) {
+      display: none;
+    }
+  }
+
+  &-version {
+    grid-area: version;
+    margin-left: 0.5em;
+    font-size: 0.8em;
+    font-family: $code;
+    text-align: right;
+
+    @media (min-width: $breakpoint-m) {
+      text-align: left;
+
+      &::after {
+        display: inline-block;
+        width: 1px;
+        height: 1.5em;
+        margin-left: 0.5em;
+        vertical-align: -25%;
+        background-color: rgba($white, 0.25);
+        content: '';
+      }
+    }
+  }
+}
+