1 files changed, 43 insertions, 36 deletions

diff --git a/app/assets/stylesheets/taxonomies.scss b/app/assets/stylesheets/taxonomies.scss
index 446fd20..4e227da 100644
--- a/app/assets/stylesheets/taxonomies.scss
+++ b/app/assets/stylesheets/taxonomies.scss
@@ -4,39 +4,45 @@
  * SPDX-License-Identifier: LAL-1.3
  */
 
-body>aside {
-    width: auto;
-
-    span[data-target="taxonomy.filter"] {
-        z-index: 990;
-        background: var(--icon-menu-on) top left/32px no-repeat;
-        width: 32px;
-        height: 32px;
-        position: absolute;
-        top: 6.1rem;
-        left: 10px;
-
-        &.off {
-            background-image: var(--icon-menu-off);
-        }
-        &.on {
-            background-image: var(--icon-menu-on);
-        }
-    }
+[data-controller="taxonomy"] {
+    height: 100%;
+    overflow: hidden auto;
+    scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
+    scrollbar-width: thin;
 
     nav {
-        z-index: 900;
-        position: fixed;
-        top: 5.5rem;
+        position: relative;
         bottom: 0;
         margin: 0;
         padding: 0;
-        background-color: var(--incommon-blue);
-        display: block;
-        border-top-right-radius: 1rem;
-        width: 20rem;
         height: calc(100% - 7.5rem);
-        padding-top: 48px;
+        padding-top: 32px;
+        max-width: 35rem;
+        width: 89vw;
+
+        display: none;
+    }
+    &.on {
+        nav {
+            display: block;
+        }
+    }
+}
+
+button[data-action="taxonomy#toggle"] {
+    position: absolute;
+    left: 0.7rem;
+    display: block;
+    cursor: pointer;
+    padding: 16px;
+    color: transparent;
+    background: transparent var(--icon-menu-off) top left/32px no-repeat;
+    border: none;
+    text-align: center;
+    z-index: 1002;
+
+    &.on {
+        background-image: var(--icon-menu-on);
     }
 }
 
@@ -49,21 +55,22 @@ body>aside {
 
         li {
             padding: 0.5rem 1rem;
+            font-weight: normal;
+            text-align: left;
+            z-index: 1001;
         }
 
         ol {
             display: none;
         }
-        ol.active {
-            font-weight: bold;
+    }
+    .active {
+        font-weight: bold;
+        ol {
+            display: block;
+        }
+        li.active {
             text-align: right;
-            li {
-                display: initial;
-                &.active {
-                    font-weight: bold;
-                    text-align: right;
-                }
-            }
         }
     }