navbar mobile menu

majak_uistyleguide/templates/patterns/organisms/layout/navbar.html

@@ -94,13 +94,44 @@
     </div>
 
     <!-- Hamburger Icon -->
-    <input class="hidden" type="checkbox" id="menuToggle"/>
-    <label class="z-40 hamb text-black 2xl:hidden" for="menuToggle">
+    <input class="hidden navbar__mobile-menu__toggle" type="checkbox" id="navbar__mobile-menu__toggle">
+
+    <label class="z-40 hamb text-black 2xl:hidden" for="navbar__mobile-menu__toggle">
       <span>
         <span class="bar1"></span>
         <span class="bar2"></span>
         <span class="bar3"></span>
       </span>
     </label>
+
+    <div
+      class="
+        navbar__mobile-menu
+
+        absolute top-0 left-0 w-full h-screen bg-black z-30 p-8 flex-col gap-3 text-white font-alt text-4xl items-start
+      "
+    >
+      {% if important_item %}
+        <a
+          href="#"
+          class="__js-root flex items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
+        >
+          {% if not is_in_homepage %}
+            {% include 'patterns/atoms/icons/arrow.html' with width='27' height='28.35' fill='#fff' %}
+          {% else %}
+            <ui-animated-arrow></ui-animated-arrow>
+          {% endif %}
+
+          {{ important_item }}
+        </a>
+      {% endif %}
+
+      {% for item in menu_items %}
+        <a
+          href="#"
+          class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
+        >{{ item }}</a>
+      {% endfor %}
+    </div>
   </div>
 </nav>

src/css/organisms/navbar.pcss

@@ -43,14 +43,26 @@
   width: 35px;
 }
 
-#menuToggle:checked + label .bar1 {
+.navbar__mobile-menu__toggle:checked + label .bar1 {
   transform: rotate(-45deg) translate(-3px, 4px);
-  background-color: black;
+
+  @apply bg-white;
 }
 
-#menuToggle:checked + label .bar2 {opacity: 0;}
+.navbar__mobile-menu__toggle:checked + label .bar2 {
+  opacity: 0;
+}
 
-#menuToggle:checked + label .bar3 {
+.navbar__mobile-menu__toggle:checked + label .bar3 {
   transform: rotate(45deg) translate(-8px, -8px);
-  background-color: black;
+
+  @apply bg-white;
+}
+
+.navbar__mobile-menu {
+  display: none;
+}
+
+.navbar__mobile-menu__toggle:checked ~ .navbar__mobile-menu {
+  display: flex;
 }

src/js/components/arrows/AnimatedArrow.vue

@@ -20,7 +20,8 @@
 </script>
 
 <template>
-  <svg width="27" height="28.35" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <div>
+    <svg class="xl:hidden block" width="38.1" height="40" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id="Icon / Placeholder">
         <path
           ref="arrow"
@@ -31,4 +32,17 @@
         />
       </g>
     </svg>
+
+    <svg class="xl:block hidden" width="27" height="28.35" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icon / Placeholder">
+        <path
+          ref="arrow"
+          style="transition: fill 0.75s"
+          class="arrow-icon"
+          d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
+          fill="#FEC900"
+        />
+      </g>
+    </svg>
+  </div>
 </template>