Add Stimulus Map and Taxonomy (WIP)

This commit add StimulusJS interaction for the map
and taxonomy, as well as styling.

It provides preliminary work to hook up live data on the map
from the taxonomy.

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;
-                }
-            }
         }
     }