feature: mobile header wip

src/styles/header/_index.scss

@@ -22,11 +22,21 @@ header {
     }
   }
 
+  .icon-menu {
+    font-size: 24px;
+  }
+
   .tag {
     align-self: flex-start;
     padding: 4px 15px;
     margin-top: 16px;
     margin-left: 60px;
+
+    @media (max-width: 640px) {
+      align-self: center;
+      margin-top: 0;
+      margin-left: 15px;
+    }
   }
 
   solid-notifications {
@@ -247,6 +257,10 @@ header {
   }
 
   details {
+    .icon-arrow-down {
+      
+    }
+
     &[open] {
       summary {
         background-color: var(--color-heading);

src/styles/left-nav/_index.scss

@@ -1,4 +1,4 @@
-nav {
+nav#main__menu {
   height: calc(100vh - 72px);
 
   .unread {
@@ -78,5 +78,28 @@ nav {
     padding-left: 20px;
     width: 87%;
   }
+
+  &.jsLeftMenu {
+    display: none;
+
+    @media(min-width: 1024px) {
+      display: block;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: block;
+    bottom: 0;
+    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+    width: 80vw;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+
+    @media(min-width: 1024px) {
+      display: none;
+    }
+  }
 }