🚑 Critical hotfix

assets/css/styles.scss

@@ -121,14 +121,6 @@ footer {
   align-self: flex-start;
 }
 
-.nav-first {
-  z-index: 1;
-  height: 100vh;
-  padding: 0 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
-}
-
 .main {
   display: flex;
   flex-flow: column;
@@ -138,100 +130,6 @@ footer {
   padding: 0 16px;
 }
 
-.nav-second {
-  display: flex;
-  width: 10%;
-  order: 3;
-  // comment below this to display
-  display: none;
-}
-
-nav.primary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    fill: var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
-  }
-
-  a {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 14px;
-    border-radius: 50%;
-    background-color: var(--bg-light-color);
-    color: var(--fg-light-color);
-    fill: var(--fg-light-color);
-    margin: 8px 0;
-
-    &:hover {
-      color: var(--fg-color);
-      fill: var(--fg-color);
-
-      svg {
-        fill: var(--fg-color);
-      }
-    }
-
-    &.nuxt-link-exact-active {
-      background-color: var(--ac-color);
-      color: var(--act-color);
-      fill: var(--act-color);
-      border-radius: 16px;
-
-      svg {
-        fill: var(--act-color);
-      }
-    }
-  }
-}
-
-nav.secondary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
-  border-top: 2px dashed var(--brd-color);
-  margin-top: 4px;
-
-  ul {
-    display: flex;
-    flex-flow: column nowrap;
-
-    li {
-      display: flex;
-
-      a {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        padding: 14px;
-        border-radius: 50%;
-        background-color: var(--bg-dark-color);
-        color: var(--fg-light-color);
-        fill: var(--fg-light-color);
-        margin: 8px 0;
-
-        &:hover {
-          color: var(--fg-color);
-          fill: var(--fg-color);
-        }
-
-        &.current {
-          color: var(--ac-color);
-          fill: var(--ac-color);
-        }
-      }
-    }
-  }
-}
-
 h1,
 h2,
 h3,
@@ -242,15 +140,19 @@ h4 {
   font-weight: 700;
 }
 
-hr {
+h3.title {
-  border-bottom: 1px dashed var(--brd-color);
+  margin: 4px;
-  margin: 16px 0;
 }
 
 p {
   transition: all 0.2s ease-in-out;
 }
 
+hr {
+  border-bottom: 1px dashed var(--brd-color);
+  margin: 16px 0;
+}
+
 .tooltip {
   $bgcolor: var(--tt-color);
   $fgcolor: var(--fg-color);
@@ -381,10 +283,6 @@ p {
   }
 }
 
-h3.title {
-  margin: 4px;
-}
-
 .info:not(.toasted) {
   margin-left: 4px;
   color: var(--fg-light-color);
@@ -466,67 +364,6 @@ button {
   animation: beat 0.5s forwards 1;
 }
 
-fieldset {
-  margin: 16px 0;
-  border-radius: 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
-
-  legend {
-    display: inline-block;
-    align-items: center;
-    justify-content: center;
-    color: var(--fg-color);
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-
-    * {
-      vertical-align: middle;
-    }
-
-    i {
-      margin-left: 8px;
-    }
-  }
-
-  &.blue legend {
-    color: #57b5f9;
-  }
-
-  &.gray legend {
-    color: #bcc2cd;
-  }
-
-  &.green legend {
-    color: #50fa7b;
-  }
-
-  &.cyan legend {
-    color: #8be9fd;
-  }
-
-  &.purple legend {
-    color: #bd93f9;
-  }
-
-  &.orange legend {
-    color: #ffb86c;
-  }
-
-  &.pink legend {
-    color: #ff79c6;
-  }
-
-  &.red legend {
-    color: #ff5555;
-  }
-
-  &.yellow legend {
-    color: #f1fa8c;
-  }
-}
-
 fieldset:target,
 section:target {
   animation: highlight 2s ease;
@@ -870,44 +707,6 @@ section {
     flex-flow: column;
   }
 
-  .nav-first {
-    position: fixed;
-    top: auto;
-    bottom: 0;
-    height: auto;
-    padding: 0;
-    width: 100%;
-    background-color: var(--bg-color);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
-  }
-
-  nav.primary-nav {
-    flex-flow: row nowrap;
-    overflow: auto;
-    justify-content: space-between;
-    background-color: var(--bg-dark-color);
-
-    a {
-      background-color: transparent;
-      margin: 8px;
-      flex: 1;
-
-      &.nuxt-link-exact-active {
-        background-color: transparent;
-        color: var(--ac-color);
-        fill: var(--ac-color);
-
-        svg {
-          fill: var(--ac-color);
-        }
-      }
-    }
-  }
-
-  nav.secondary-nav {
-    display: none;
-  }
-
   .main {
     padding: 0 8px 68px;
   }

components/collections/addFolder.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script>
+import { fb } from "../../functions/fb"
+
 export default {
   props: {
     show: Boolean,

components/layout/history.vue

@@ -248,7 +248,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 294px);
+  max-height: calc(100vh - 290px);
 
   [readonly] {
     cursor: default;

components/layout/section.vue

@@ -13,6 +13,67 @@
 </template>
 
 <style scoped lang="scss">
+fieldset {
+  margin: 16px 0;
+  border-radius: 8px;
+  background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
+
+  legend {
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+    color: var(--fg-color);
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    * {
+      vertical-align: middle;
+    }
+
+    i {
+      margin-left: 8px;
+    }
+  }
+
+  &.blue legend {
+    color: #57b5f9;
+  }
+
+  &.gray legend {
+    color: #bcc2cd;
+  }
+
+  &.green legend {
+    color: #50fa7b;
+  }
+
+  &.cyan legend {
+    color: #8be9fd;
+  }
+
+  &.purple legend {
+    color: #bd93f9;
+  }
+
+  &.orange legend {
+    color: #ffb86c;
+  }
+
+  &.pink legend {
+    color: #ff79c6;
+  }
+
+  &.red legend {
+    color: #ff5555;
+  }
+
+  &.yellow legend {
+    color: #f1fa8c;
+  }
+}
+
 fieldset.no-colored-frames legend {
   color: var(--fg-color);
 }

components/layout/sidenav.vue

@@ -167,6 +167,144 @@
   </aside>
 </template>
 
+<style scoped lang="scss">
+$responsiveWidth: 768px;
+
+.nav-first {
+  z-index: 1;
+  height: 100vh;
+  padding: 0 8px;
+  background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
+}
+
+nav.primary-nav {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 14px;
+    border-radius: 50%;
+    background-color: var(--bg-light-color);
+    color: var(--fg-light-color);
+    fill: var(--fg-light-color);
+    margin: 8px 0;
+
+    &:hover {
+      color: var(--fg-color);
+      fill: var(--fg-color);
+
+      svg {
+        fill: var(--fg-color);
+      }
+    }
+
+    &.nuxt-link-exact-active {
+      background-color: var(--ac-color);
+      color: var(--act-color);
+      fill: var(--act-color);
+      border-radius: 16px;
+
+      svg {
+        fill: var(--act-color);
+      }
+    }
+  }
+}
+
+nav.secondary-nav {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  border-top: 2px dashed var(--brd-color);
+  margin-top: 4px;
+
+  ul {
+    display: flex;
+    flex-flow: column nowrap;
+
+    li {
+      display: flex;
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding: 14px;
+        border-radius: 50%;
+        background-color: var(--bg-dark-color);
+        color: var(--fg-light-color);
+        fill: var(--fg-light-color);
+        margin: 8px 0;
+
+        &:hover {
+          color: var(--fg-color);
+          fill: var(--fg-color);
+        }
+
+        &.current {
+          color: var(--ac-color);
+          fill: var(--ac-color);
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $responsiveWidth) {
+  .nav-first {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    height: auto;
+    padding: 0;
+    width: 100%;
+    background-color: var(--bg-color);
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
+  }
+
+  nav.primary-nav {
+    flex-flow: row nowrap;
+    overflow: auto;
+    justify-content: space-between;
+    background-color: var(--bg-dark-color);
+
+    a {
+      background-color: transparent;
+      margin: 8px;
+      flex: 1;
+
+      &.nuxt-link-exact-active {
+        background-color: transparent;
+        color: var(--ac-color);
+        fill: var(--ac-color);
+
+        svg {
+          fill: var(--ac-color);
+        }
+      }
+    }
+  }
+
+  nav.secondary-nav {
+    display: none;
+  }
+}
+</style>
+
 <script>
 export default {
   components: {

layouts/default.vue

@@ -8,7 +8,6 @@
           <nuxt />
           <pw-footer />
         </div>
-        <!-- <aside class="nav-second"></aside> -->
       </div>
     </div>
   </div>