First version

assets/css/nav.sass

@@ -0,0 +1,134 @@
+.nav
+  // position: fixed
+  z-index: 10
+  top: 0
+  background-color: white
+  width: 100%
+
+  #menu_checkbox
+    display: none
+
+  .icon-menu
+    display: none
+    background-color: white
+    border-radius: 1.5rem
+    width: 3rem
+    height: 3rem
+    position: fixed
+    top: 1rem
+    right: 1rem
+    box-sizing: border-box
+    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)
+    border: 0
+    padding: 0
+    margin: 0
+
+    .icon
+      position: absolute
+      transition: all 0.1s ease-in-out
+      left: .75rem
+      right: .75rem
+      width: 1.5rem
+      height: 4px
+      top: calc(3rem / 2 - 2px)
+      background-color: $color-primary
+
+      &::before, &::after
+        position: absolute
+        content: ""
+        background-color: $color-primary
+        height: 4px
+        width: 100%
+        display: block
+
+      &::before
+        top: -.5rem
+      &::after
+        top: .5rem
+
+  nav
+    left: 0
+    right: 0
+    margin-bottom: 4rem
+
+  ul
+    list-style: none
+    margin: 0
+    padding: 0
+
+    li
+      display: inline
+      border-right: 1px solid $color-primary
+      border-bottom: 1px solid $color-primary
+
+      &:last-child
+        border-right: none
+
+      &.active
+        background: $color-primary
+        color: white
+
+        a
+          color: white
+          text-decoration-color: white
+
+      a
+        display: inline-block
+        padding: 1rem
+        font-size: 1rem
+        font-weight: bold
+
+
+@media screen and (max-width: 839px)
+  .nav
+    position: absolute
+
+    .grid
+      flex-direction: column
+    .cell
+      flex: 0 0 auto
+
+    nav
+      display: none
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      position: relative
+      background-color: white
+      z-index: 500
+
+    ul
+      li
+        border: 0
+        text-align: center
+
+        a
+          width: 100%
+          box-sizing: border-box
+
+    .icon-menu
+      display: block
+      z-index: 501
+
+    #menu_checkbox:checked
+
+    #menu_checkbox:checked ~ nav
+        position: fixed
+        display: block
+        height: 100vh
+
+        .grid
+          justify-content: center
+          height: 100%
+
+    #menu_checkbox:checked ~ .icon-menu
+      .icon
+        width: 60%
+        transform: rotate(45deg) translate(5px, 7px)
+        top: 14px
+        &::before
+          display: none
+        &::after
+          transform: rotate(-90deg)translate(-5px, 12px)
+          transform-origin: 5%