add menu parents/sub-items

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

@@ -52,3 +52,41 @@
     </a>
   </div>
 {% endblock %}
+
+{% block menu_items %}
+  {% for item in menu_items %}
+    <a
+      href="{{ item.url }}"
+      class="
+        decoration-1 underline-offset-4 mx-2
+        
+        {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+      "
+    >{{ item.name }}</a>
+  {% endfor %}
+
+  {% for parent in menu_parents %}
+    <div
+      class="dropdown nav-link js-scroll-anchor"
+      tabindex="0"
+    >
+      <div class="dropbtn">
+        {{ parent.name }}
+
+        <span class="drop-arrow">
+          <i class="ico--chevron-down"></i>
+        </span>
+      </div>
+
+      <div class="dropdown-content">
+        {% for nested_item in parent.menu_items %}
+          <li>
+            <a href="{{ nested_item.url }}">
+              {{ nested_item.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+{% endblock %}
\ No newline at end of file

majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml

@@ -31,6 +31,17 @@ context:
       name: 'Kontakt'
       url: '#'
 
+  menu_parents:
+    -
+      name: 'Volby'
+      menu_items:
+        -
+          name: 'Aktuality'
+          url: '#'
+        -
+          name: 'Lidé'
+          url: '#'
+
   important_item: 'Krajské volby'
   important_item_url: 'https://example.com'
 

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

@@ -48,12 +48,16 @@
 
       <!-- BEGIN Menu -->
       <div
-        class="flex text-2xl gap-8 font-alt items-center justify-end"
+        class="flex text-2xl gap-4 font-alt items-center justify-end"
       >
         {% if important_item %}
           <a
             href="{{ important_item_url }}"
-            class="__js-root flex gap-1 items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
+            class="
+              __js-root mx-2 flex gap-1 items-center decoration-1 underline-offset-4
+              
+              {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}
+            "
           >
             <div class="mb-1">
               {% if not is_transparent or is_on_dark_background %}
@@ -75,12 +79,18 @@
           </a>
         {% endif %}
 
+        {% block menu_items %}
           {% for item in menu_items %}
             <a
               href="{{ item.url }}"
-            class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
+              class="
+                decoration-1 underline-offset-4 mx-2
+                
+                {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+              "
             >{{ item.name }}</a>
           {% endfor %}
+        {% endblock %}
 
         {% if menu_button %}
           {% if additional_buttons or menu_button_url %}

src/css/atoms/dropdown.pcss

+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  @apply relative cursor-pointer;
+}
+
+.dropbtn {
+  @apply p-3;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  @apply hidden absolute z-[1] list-none;
+}
+
+@media screen and (max-width: 1200px) {
+  .dropdown-content {
+    position: unset;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .dropbtn {
+    @apply hidden;
+  }
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  @apply block text-white;
+}
+
+@media screen and (min-width: 1200px) {
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content,
+  .dropdown:focus .dropdown-content {
+    @apply flex flex-col gap-3 bg-black w-full p-3;
+  }
+
+  .dropdown:hover .dropbtn,
+  .dropdown:focus .dropbtn {
+    @apply text-white relative;
+  }
+
+  .dropdown-content li {
+    @apply leading-6;
+  }
+
+  .dropdown:hover,
+  .dropdown:focus {
+    @apply bg-black;
+  }
+}
+
+.drop-arrow {
+  @apply ml-1 relative top-[2px];
+}
+
+@media screen and (max-width: 1200px) {
+  .drop-arrow {
+    @apply hidden;
+  }
+}

src/css/style.pcss

@@ -24,6 +24,7 @@
 @import "atoms/heading.pcss";
 @import "atoms/icons.pcss";
 @import "atoms/full-calendar.pcss";
+@import "atoms/dropdown.pcss";
 
 @import "molecules/articles.pcss";
 @import "molecules/block-quote.pcss";