Adjust Style for mobile and stimulus

7 files changed, 119 insertions, 4 deletions

diff --git a/app/assets/images/icon-menu-off.svg b/app/assets/images/icon-menu-off.svg
new file mode 100644
index 0000000..850e76a
--- /dev/null
+++ b/app/assets/images/icon-menu-off.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg4344"
+   width="36.25"
+   height="36.25"
+   version="1.1">
+  <metadata
+     id="metadata4350">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4348" />
+  <path
+     id="path4342"
+     d="m 19.48433,21.2344 q 0.64062,-1.4844 0.64062,-3.1094 0,-1.625 -0.64062,-3.0937 -0.625,-1.4844 -1.7031,-2.5625 -1.07814,-1.0781 -2.56249,-1.7031 -1.46873,-0.6407 -3.09371,-0.6407 -1.62497,0 -3.10939,0.6407 Q 7.5469,11.3907 6.46877,12.4688 5.39063,13.5469 4.75,15.0313 4.125,16.5 4.125,18.125 q 0,1.625 0.625,3.1094 0.64062,1.4687 1.71877,2.5469 1.07813,1.078 2.54687,1.7187 1.48435,0.625 3.10939,0.625 1.62498,0 3.09371,-0.625 1.48435,-0.6407 2.56249,-1.7187 1.07814,-1.0782 1.7031,-2.5469 z m 12.00006,0 q 0.64063,-1.4844 0.64063,-3.1094 0,-1.625 -0.64063,-3.0937 -0.625,-1.4844 -1.70309,-2.5625 -1.07813,-1.0781 -2.56248,-1.7031 -1.46874,-0.6407 -3.09371,-0.6407 h -6.03126 q 1.85933,1.4063 2.93747,3.5 1.09375,2.0938 1.09375,4.5 0,2.4063 -1.09375,4.5 -1.07814,2.0937 -2.93747,3.5 h 6.03126 q 1.62497,0 3.09371,-0.625 1.48435,-0.6407 2.56248,-1.7187 1.07814,-1.0782 1.70309,-2.5469 z M 33.32812,14.25 q 0.79688,1.8438 0.79688,3.875 0,2.0313 -0.79688,3.8906 -0.79687,1.8438 -2.14059,3.1875 -1.32811,1.3281 -3.18751,2.125 -1.84373,0.7969 -3.87498,0.7969 H 12.12496 q -2.03126,0 -3.89059,-0.7969 Q 6.39065,26.5312 5.04686,25.2031 3.71875,23.8594 2.92187,22.0156 2.125,20.1563 2.125,18.125 2.125,16.0938 2.92187,14.25 3.71875,12.3906 5.04686,11.0625 6.39058,9.7188 8.23437,8.9219 10.0937,8.125 12.12496,8.125 h 12.00008 q 2.03125,0 3.87498,0.7969 1.85933,0.7969 3.18751,2.1406 1.34372,1.3281 2.14059,3.1875 z"
+     style="fill:#008080" />
+  <circle
+     r="8.0150003"
+     cy="18.133831"
+     cx="12.125704"
+     id="path4895"
+     style="opacity:1;fill:#edeec9;fill-opacity:1;stroke:none;stroke-width:18.63586235;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke" />
+</svg>
diff --git a/app/assets/images/icon-menu-on.svg b/app/assets/images/icon-menu-on.svg
new file mode 100644
index 0000000..fa455f0
--- /dev/null
+++ b/app/assets/images/icon-menu-on.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg3443"
+   width="36.25"
+   height="36.25"
+   version="1.1">
+  <metadata
+     id="metadata3449">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3447" />
+  <path
+     id="path3441"
+     d="m 2.9188574,22.01679 q -0.7938571,-1.863674 -0.7938571,-3.89368 0,-2.030006 0.7938571,-3.874779 Q 3.7202749,12.388438 5.0471501,11.061562 6.3929268,9.7157853 8.2339194,8.9181483 10.093813,8.1242913 12.1276,8.1242913 h 11.998582 q 2.030006,0 3.874778,0.793857 1.859894,0.797637 3.186769,2.1434137 1.345777,1.326876 2.143415,3.186769 0.793856,1.844773 0.793856,3.874779 0,2.033785 -0.793856,3.89368 -0.797638,1.844772 -2.143415,3.186769 -1.323095,1.326875 -3.186769,2.124512 -1.844772,0.797638 -3.874778,0.797638 H 12.1276 q -2.033787,0 -3.8936806,-0.793858 Q 6.3929268,26.530434 5.0471501,25.203559 3.7202749,23.861562 2.9226376,22.01679 Z M 21.018799,25.5022 q 1.485646,0.623745 3.111163,0.623745 1.625517,0 3.092262,-0.623745 1.485647,-0.642646 2.563025,-1.720024 1.081157,-1.077377 1.701122,-2.547903 0.642646,-1.485646 0.642646,-3.111163 0,-1.625517 -0.642646,-3.092262 -0.619965,-1.485647 -1.701122,-2.563025 -1.077378,-1.077377 -2.563025,-1.701122 -1.466745,-0.642646 -3.092262,-0.642646 -1.625517,0 -3.111163,0.642646 -1.470526,0.623745 -2.547904,1.701122 -1.077377,1.077378 -1.720023,2.563025 -0.623745,1.466745 -0.623745,3.092262 0,1.625517 0.623745,3.111163 0.642646,1.470526 1.720023,2.547903 1.077378,1.077378 2.547904,1.720024 z"
+     style="fill:#008080;fill-opacity:1" />
+  <circle
+     r="8.0150003"
+     cy="18.132078"
+     cx="24.122789"
+     id="path4895"
+     style="opacity:1;fill:#edeec9;fill-opacity:1;stroke:none;stroke-width:18.63586235;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke" />
+</svg>
diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss
index 6e3b56e..088f173 100644
--- a/app/assets/stylesheets/application/_body.scss
+++ b/app/assets/stylesheets/application/_body.scss
@@ -56,6 +56,11 @@ main {
     }
 }
 
+body>aside {
+    position: fixed;
+    z-index: 1001;
+}
+
 
 :root {
     --font-family: Helvetica, Arial, sans-serif;
@@ -145,4 +150,6 @@ main {
     --gold: #e7c300;
     --silver: silver;
     --bronze: #cd7f32;
+    --icon-menu-off: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQzNDQiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0MzUwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDM0OCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoNDM0MiIKICAgICBkPSJtIDE5LjQ4NDMzLDIxLjIzNDQgcSAwLjY0MDYyLC0xLjQ4NDQgMC42NDA2MiwtMy4xMDk0IDAsLTEuNjI1IC0wLjY0MDYyLC0zLjA5MzcgLTAuNjI1LC0xLjQ4NDQgLTEuNzAzMSwtMi41NjI1IC0xLjA3ODE0LC0xLjA3ODEgLTIuNTYyNDksLTEuNzAzMSAtMS40Njg3MywtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgLTEuNjI0OTcsMCAtMy4xMDkzOSwwLjY0MDcgUSA3LjU0NjksMTEuMzkwNyA2LjQ2ODc3LDEyLjQ2ODggNS4zOTA2MywxMy41NDY5IDQuNzUsMTUuMDMxMyA0LjEyNSwxNi41IDQuMTI1LDE4LjEyNSBxIDAsMS42MjUgMC42MjUsMy4xMDk0IDAuNjQwNjIsMS40Njg3IDEuNzE4NzcsMi41NDY5IDEuMDc4MTMsMS4wNzggMi41NDY4NywxLjcxODcgMS40ODQzNSwwLjYyNSAzLjEwOTM5LDAuNjI1IDEuNjI0OTgsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OSwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzEsLTIuNTQ2OSB6IG0gMTIuMDAwMDYsMCBxIDAuNjQwNjMsLTEuNDg0NCAwLjY0MDYzLC0zLjEwOTQgMCwtMS42MjUgLTAuNjQwNjMsLTMuMDkzNyAtMC42MjUsLTEuNDg0NCAtMS43MDMwOSwtMi41NjI1IC0xLjA3ODEzLC0xLjA3ODEgLTIuNTYyNDgsLTEuNzAzMSAtMS40Njg3NCwtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgaCAtNi4wMzEyNiBxIDEuODU5MzMsMS40MDYzIDIuOTM3NDcsMy41IDEuMDkzNzUsMi4wOTM4IDEuMDkzNzUsNC41IDAsMi40MDYzIC0xLjA5Mzc1LDQuNSAtMS4wNzgxNCwyLjA5MzcgLTIuOTM3NDcsMy41IGggNi4wMzEyNiBxIDEuNjI0OTcsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OCwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzA5LC0yLjU0NjkgeiBNIDMzLjMyODEyLDE0LjI1IHEgMC43OTY4OCwxLjg0MzggMC43OTY4OCwzLjg3NSAwLDIuMDMxMyAtMC43OTY4OCwzLjg5MDYgLTAuNzk2ODcsMS44NDM4IC0yLjE0MDU5LDMuMTg3NSAtMS4zMjgxMSwxLjMyODEgLTMuMTg3NTEsMi4xMjUgLTEuODQzNzMsMC43OTY5IC0zLjg3NDk4LDAuNzk2OSBIIDEyLjEyNDk2IHEgLTIuMDMxMjYsMCAtMy44OTA1OSwtMC43OTY5IFEgNi4zOTA2NSwyNi41MzEyIDUuMDQ2ODYsMjUuMjAzMSAzLjcxODc1LDIzLjg1OTQgMi45MjE4NywyMi4wMTU2IDIuMTI1LDIwLjE1NjMgMi4xMjUsMTguMTI1IDIuMTI1LDE2LjA5MzggMi45MjE4NywxNC4yNSAzLjcxODc1LDEyLjM5MDYgNS4wNDY4NiwxMS4wNjI1IDYuMzkwNTgsOS43MTg4IDguMjM0MzcsOC45MjE5IDEwLjA5MzcsOC4xMjUgMTIuMTI0OTYsOC4xMjUgaCAxMi4wMDAwOCBxIDIuMDMxMjUsMCAzLjg3NDk4LDAuNzk2OSAxLjg1OTMzLDAuNzk2OSAzLjE4NzUxLDIuMTQwNiAxLjM0MzcyLDEuMzI4MSAyLjE0MDU5LDMuMTg3NSB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODAiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMzODMxIgogICAgIGN4PSIxMi4xMjU3MDQiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo=');
+    --icon-menu-on: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM0NDMiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNDQ5Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzQ0NyIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMzQ0MSIKICAgICBkPSJtIDIuOTE4ODU3NCwyMi4wMTY3OSBxIC0wLjc5Mzg1NzEsLTEuODYzNjc0IC0wLjc5Mzg1NzEsLTMuODkzNjggMCwtMi4wMzAwMDYgMC43OTM4NTcxLC0zLjg3NDc3OSBRIDMuNzIwMjc0OSwxMi4zODg0MzggNS4wNDcxNTAxLDExLjA2MTU2MiA2LjM5MjkyNjgsOS43MTU3ODUzIDguMjMzOTE5NCw4LjkxODE0ODMgMTAuMDkzODEzLDguMTI0MjkxMyAxMi4xMjc2LDguMTI0MjkxMyBoIDExLjk5ODU4MiBxIDIuMDMwMDA2LDAgMy44NzQ3NzgsMC43OTM4NTcgMS44NTk4OTQsMC43OTc2MzcgMy4xODY3NjksMi4xNDM0MTM3IDEuMzQ1Nzc3LDEuMzI2ODc2IDIuMTQzNDE1LDMuMTg2NzY5IDAuNzkzODU2LDEuODQ0NzczIDAuNzkzODU2LDMuODc0Nzc5IDAsMi4wMzM3ODUgLTAuNzkzODU2LDMuODkzNjggLTAuNzk3NjM4LDEuODQ0NzcyIC0yLjE0MzQxNSwzLjE4Njc2OSAtMS4zMjMwOTUsMS4zMjY4NzUgLTMuMTg2NzY5LDIuMTI0NTEyIC0xLjg0NDc3MiwwLjc5NzYzOCAtMy44NzQ3NzgsMC43OTc2MzggSCAxMi4xMjc2IHEgLTIuMDMzNzg3LDAgLTMuODkzNjgwNiwtMC43OTM4NTggUSA2LjM5MjkyNjgsMjYuNTMwNDM0IDUuMDQ3MTUwMSwyNS4yMDM1NTkgMy43MjAyNzQ5LDIzLjg2MTU2MiAyLjkyMjYzNzYsMjIuMDE2NzkgWiBNIDIxLjAxODc5OSwyNS41MDIyIHEgMS40ODU2NDYsMC42MjM3NDUgMy4xMTExNjMsMC42MjM3NDUgMS42MjU1MTcsMCAzLjA5MjI2MiwtMC42MjM3NDUgMS40ODU2NDcsLTAuNjQyNjQ2IDIuNTYzMDI1LC0xLjcyMDAyNCAxLjA4MTE1NywtMS4wNzczNzcgMS43MDExMjIsLTIuNTQ3OTAzIDAuNjQyNjQ2LC0xLjQ4NTY0NiAwLjY0MjY0NiwtMy4xMTExNjMgMCwtMS42MjU1MTcgLTAuNjQyNjQ2LC0zLjA5MjI2MiAtMC42MTk5NjUsLTEuNDg1NjQ3IC0xLjcwMTEyMiwtMi41NjMwMjUgLTEuMDc3Mzc4LC0xLjA3NzM3NyAtMi41NjMwMjUsLTEuNzAxMTIyIC0xLjQ2Njc0NSwtMC42NDI2NDYgLTMuMDkyMjYyLC0wLjY0MjY0NiAtMS42MjU1MTcsMCAtMy4xMTExNjMsMC42NDI2NDYgLTEuNDcwNTI2LDAuNjIzNzQ1IC0yLjU0NzkwNCwxLjcwMTEyMiAtMS4wNzczNzcsMS4wNzczNzggLTEuNzIwMDIzLDIuNTYzMDI1IC0wLjYyMzc0NSwxLjQ2Njc0NSAtMC42MjM3NDUsMy4wOTIyNjIgMCwxLjYyNTUxNyAwLjYyMzc0NSwzLjExMTE2MyAwLjY0MjY0NiwxLjQ3MDUyNiAxLjcyMDAyMywyLjU0NzkwMyAxLjA3NzM3OCwxLjA3NzM3OCAyLjU0NzkwNCwxLjcyMDAyNCB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODA7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMyMDc4IgogICAgIGN4PSIyNC4xMjI3ODkiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo=');
 }
diff --git a/app/assets/stylesheets/application/_map.scss b/app/assets/stylesheets/application/_map.scss
index a0e3abf..d6f66f7 100644
--- a/app/assets/stylesheets/application/_map.scss
+++ b/app/assets/stylesheets/application/_map.scss
@@ -6,7 +6,7 @@
     position: fixed;
     height: 100%;
     width: 100%;
-    top: 0;
+    top: 4rem;
     left: 0;
     right: 0;
     bottom: 0;
diff --git a/app/assets/stylesheets/application/_user_info.scss b/app/assets/stylesheets/application/_user_info.scss
index be3dad9..cb0d159 100644
--- a/app/assets/stylesheets/application/_user_info.scss
+++ b/app/assets/stylesheets/application/_user_info.scss
@@ -4,7 +4,7 @@ User Info
 
 #user_info {
     position: absolute;
-    right: 0;
+    right: 0.8rem;
 
     nav {
         top: 0;
diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss
index 5042f7d..d7704ef 100644
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@@ -1,3 +1,37 @@
 // Place all the styles related to the welcome controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+
+button[data-action="taxonomy#toggle"] {
+    position: absolute;
+    top: 9rem;
+    left: 0.7rem;
+    display: block;
+    cursor: pointer;
+    padding: 16px;
+    color: transparent;
+    z-index: 990;
+    background: transparent var(--icon-menu-off) top left/32px no-repeat;
+    border: none;
+    text-align: center;
+}
+button[data-action="taxonomy#toggle"].on {
+    background-image: var(--icon-menu-on);
+}
+
+[data-controller="taxonomy"] nav {
+    display: block;
+    position: fixed;
+    top: 9rem;
+    bottom: 0;
+    max-width: 35rem;
+    background-color: rgba(0,128,128,0.5);
+    z-index: -1;
+    display: none;
+    border-top-right-radius: 1rem;
+}
+[data-controller="taxonomy"] nav.on {
+    width: 89vw;
+    z-index: 900;
+    display: block;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 02c8553..210ace8 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Carte IN COMMON</title>
+    <head>
+        <meta charset="UTF-8">
+        <title>Carte IN COMMON</title>
+        <meta name="viewport" content="initial-width: device-width initial-scale=1.0 viewport-fit=cover">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>