Navbar subitems

source/_patterns/02-organisms/00-global/navbar.mustache

@@ -15,12 +15,28 @@
     </div>
     <div class="navbar__main navbar__section navbar__section--expandable">
       <ul class="navbar-menu text-white">
-        <li class="navbar-menu__item"><a href="#">Hlavní strana</a></li>
-        <li class="navbar-menu__item"><a href="#">Aktuality</a></li>
-        <li class="navbar-menu__item"><a href="#">Volby</a></li>
-        <li class="navbar-menu__item"><a href="#">Kandidáti</a></li>
-        <li class="navbar-menu__item"><a href="#">Pirátské centrum</a></li>
-        <li class="navbar-menu__item"><a href="#">Kontakt</a></li>
+        <li class="navbar-menu__item">
+          <a href="#" class="navbar-menu__link">Hlavní strana</a>
+        </li>
+        <li class="navbar-menu__item">
+          <a href="#" class="navbar-menu__link">Aktuality</a>
+        </li>
+        <li class="navbar-menu__item">
+          <a href="#" class="navbar-menu__link navbar-menu__submenu-toggle">Volby</a>
+          <ul class="navbar-menu__submenu lg:hidden">
+            <li><a href="#" class="navbar-menu__link">Kandidáti</a></li>
+            <li><a href="#" class="navbar-menu__link">Program</a></li>
+          </ul>
+        </li>
+        <li class="navbar-menu__item">
+          <a href="#" class="navbar-menu__link">Kandidáti</a>
+        </li>
+        <li class="navbar-menu__item">
+          <a href="#" class="navbar-menu__link">Pirátské centrum</a>
+        </li>
+        <li class="navbar-menu__item">
+          <a href="#" class="navbar-menu__link">Kontakt</a>
+        </li>
       </ul>
     </div>
     <div class="navbar__actions navbar__section navbar__section--expandable flex flex-col sm:flex-row lg:flex-col sm:space-x-2 space-y-1 sm:space-y-0 lg:space-y-1 xl:flex-row xl:space-x-1 xl:space-y-0">

source/css/organisms/navbar.pcss

@@ -40,6 +40,10 @@
 }
 
 .navbar-menu__item {
+  @apply block;
+}
+
+.navbar-menu__link {
   @apply text-xl font-condensed uppercase leading-loose;
 
   @screen lg {
@@ -51,6 +55,28 @@
   }
 }
 
+.navbar-menu__submenu .navbar-menu__link {
+  @apply text-lg text-grey-200 font-condensed normal-case leading-normal pl-2;
+}
+
+.navbar-menu__link,
+.navbar-menu__link:hover {
+  @apply no-underline;
+}
+
+.navbar-menu__submenu-toggle {
+  @apply flex items-center;
+
+  &:after {
+    /* Compensate for font specifics, align to center. */
+    margin-bottom: -0.125rem;
+    @apply ml-auto font-light text-sm;
+    content: "\f078";
+    font-family: "Font Awesome 5 Pro";
+  }
+}
+
+
 @screen lg {
   .navbar {
     @apply py-4;
@@ -67,10 +93,18 @@
   }
 
   .navbar-menu__item {
-    @apply inline-block leading-normal;
+    @apply inline-block;
 
     &:not(:first-child) {
       @apply ml-3;
     }
   }
+
+  .navbar-menu__link {
+    @apply leading-normal
+  }
+
+  .navbar-menu__submenu-toggle:after {
+    @apply ml-1;
+  }
 }