styleguide: add navigation and header

styleguide/assets/style/styleguide.scss

@@ -1,30 +1,139 @@
 @import "main";
 
-
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
-  min-height: 100vh;
-  min-width: 100vw;
-}
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: auto;
 
-header {
-  padding: 1rem;
-}
+  header {
+    text-align: center;
+    width: 100%;
+    height: fit-content;
+    flex-grow: 0;
+  }
 
-main {
-  max-width: min(var(--container-4xl), 100vw);
-  padding: 1rem;
-  overflow: hidden;
+  > div {
+    display: flex;
+    gap: 1rem;
+    flex-grow: 1;
 
-  @media (min-width: $breakpoint-sm) {
-    padding-left: 2rem;
+    nav {
+      width: 20rem;
+      height: fit-content;
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      position: sticky;
+      top: 0;
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        list-style-type: none;
+
+        li {
+          border-radius: 0.5rem;
+          background-color: var(--color-shade-1);
+          transition: background-color 150ms;
+
+
+          > a {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            border-radius: 0.5rem;
+            outline: solid 0.1em var(--color-shade-1);
+            padding: 0.5rem 1rem;
+            color: var(--color-foreground);
+            text-decoration: none;
+            font-size: 1.2em;
+            box-sizing: border-box;
+            --local-primary: var(--color-primary);
+
+            transition-property: filter, outline-color;
+            transition-duration: 400ms;
+            transition-timing-function: ease-in;
+
+            &:visited, &:focus, &:active {
+              color: var(--color-foreground);
+            }
+
+            i[data-icon] {
+              padding-right: 0.5em;
+              padding-top: 0.2em;
+              padding-bottom: 0.2em;
+              border-right: solid 0.1em currentColor;
+            }
+          }
+
+          &:hover, &:focus-within {
+            background-color: transparent;
+
+            a {
+              outline: solid 0.1em var(--color-white);
+              background-color: transparent;
+              filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
+              transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
+              outline-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+
+              &:visited, &:focus, &:active {
+                color: var(--color-white);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    main {
+      max-width: min(var(--container-4xl), 100vw);
+      border-left: dashed 0.25rem var(--color-foreground);
+
+      @media (min-width: $breakpoint-sm) {
+        padding-left: 2rem;
+      }
+    }
   }
 }
 
+i[data-icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: content-box;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background-color: currentColor;
+  }
+
+  &[data-icon='arrow-left']::before {
+    mask-image: url('../icon/arrow_left.svg');
+  }
+
+  &[data-icon='info']::before {
+    mask-image: url('../icon/info.svg');
+  }
+}
+
+
 a {
 
   &.a-regular,
@@ -60,14 +169,14 @@ pre,
 .layout-column {
   display: flex;
 
-  &>* {
+  & > * {
     width: 100%;
   }
 
   @media (max-width: $breakpoint-md) {
     flex-wrap: wrap;
 
-    &>* {
+    & > * {
       width: 100%;
     }
   }
@@ -77,7 +186,7 @@ pre,
   display: flex;
   align-items: center;
 
-  &>* {
+  & > * {
     width: 100%;
   }
 
@@ -85,7 +194,7 @@ pre,
     flex-wrap: wrap;
     justify-content: center;
 
-    &>* {
+    & > * {
       width: 100%;
     }
   }
@@ -102,7 +211,7 @@ pre,
     gap: 1rem;
     margin-top: 2rem;
 
-    &>span {
+    & > span {
       width: 100%;
       font-size: var(--text-xl);
     }