Basic responsive navbar

source/_patterns/00-atoms/02-contact-lines/responsive-contact-line.mustache

+<a href="mailto:example@example.com" class="contact-line contact-line--responsive {{ classes }}">
+  <i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
+</a>

source/_patterns/01-molecules/00-badge/basic-badge.mustache

@@ -3,7 +3,7 @@
   <div class="badge__body">
     <span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span>
     <p class="badge__occupation">{{ person.occupation }}</p>
-    {{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
-    {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
   </div>
 </div>

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

@@ -2,6 +2,6 @@
   {{> atoms-basic-avatar(classes: "avatar--sm") }}
   <div class="badge__body">
     <span class="head-xs badge__title">Mikuláš Peksa</span>
-    {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
   </div>
 </div>

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

 <div class="social-icon-group space-x-1 {{ classes }}">
-  {{> atoms-basic-social-icon }}
-  {{> atoms-basic-social-icon }}
-  {{> atoms-basic-social-icon }}
-  {{> atoms-basic-social-icon }}
+  {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
+  {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
+  {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
+  {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
+  {{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
 </div>

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

@@ -58,13 +58,7 @@
           </div>
           <div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0">
             <div class="mb-2">
-              <div class="social-icon-group space-x-1 text-white pb-2">
-                {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
-                {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
-                {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
-                {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
-                {{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
-              </div>
+              {{> molecules-basic-social-icon-group(classes: "text-white pb-2") }}
               {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
             </div>
             {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth md:btn--autowidth mb-1") }}

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

+<nav class="navbar">
+  <div class="container container--wide navbar__content">
+    <div class="navbar__brand my-2 lg:pr-4 lg:my-0">
+      <a href="#">
+        <img src="/images/logo-round-white.svg" class="w-full lg:border-r lg:border-grey-300 lg:pr-4" />
+      </a>
+    </div>
+    <div class="navbar__external navbar__section navbar__section--expandable lg:flex lg:space-x-4">
+      <div class="text-grey-200 text-sm lg:space-x-4 leading-loose lg:leading-normal">
+        {{> atoms-basic-contact-line(caption: "pirati.cz", icon: "fas fa-home", classes: "block lg:inline-block") }}
+        {{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "fas fa-shopping-cart", classes: "block lg:inline-block") }}
+        {{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "fas fa-newspaper", classes: "block lg:inline-block") }}
+      </div>
+      {{> molecules-basic-social-icon-group(classes: "text-white py-2 lg:py-0") }}
+    </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>
+      </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">
+      {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+      {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+    </div>
+    <div class="navbar__menutoggle my-2 flex justify-end lg:hidden">
+      <a href="#">
+        <img src="/images/menu-toggle.svg" class="w-4" />
+      </a>
+    </div>
+  </div>
+</nav>

source/_patterns/03-templates/elections-main.mustache

+{{> organisms-navbar() }}
 {{> organisms-subnav() }}
 
 <article class="hero hero--image py-7 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">

source/css/atoms/contact-line.pcss

 .contact-line {
   i {
-    @apply mr-1 hidden;
+    @apply mr-1;
+  }
+
+  &.contanct-line--responsive {
+    i {
+      @apply hidden;
 
-    @screen lg {
-      @apply inline-block;
+      @screen lg {
+        @apply inline-block;
+      }
     }
   }
 }

source/css/organisms/navbar.pcss

+.navbar {
+  /* overflow-hidden compensates .navbar__section--expandable */
+  @apply bg-grey-700 text-white overflow-hidden;
+}
+
+.navbar__content {
+  @apply grid items-center;
+
+  grid-template-areas: "brand menutoggle"
+                       "main main"
+                       "external external"
+                       "actions actions";
+  grid-template-columns: 2rem 1fr;
+}
+
+.navbar__brand {
+  grid-area: brand;
+}
+
+.navbar__external {
+  grid-area: external;
+}
+
+.navbar__main {
+  grid-area: main;
+}
+
+.navbar__actions {
+  grid-area: actions;
+}
+
+.navbar__menutoggle {
+  grid-area: menutoggle;
+}
+
+.navbar__section--expandable {
+  @apply bg-black px-4 py-2;
+
+  margin: 0 -2rem;
+}
+
+.navbar-menu__item {
+  @apply text-xl font-condensed uppercase leading-loose;
+
+  @screen lg {
+    @apply text-lg;
+  }
+
+  @screen xl {
+    @apply text-xl;
+  }
+}
+
+@screen lg {
+  .navbar {
+    @apply py-4;
+  }
+
+  .navbar__content {
+    grid-template-areas: "brand external actions"
+                       "brand main actions";
+                       grid-template-columns: 8rem 1fr auto;
+  }
+
+  .navbar__section--expandable {
+    @apply bg-transparent px-0 py-0 m-0;
+  }
+
+  .navbar-menu__item {
+    @apply inline-block leading-normal;
+
+    &:not(:first-child) {
+      @apply ml-3;
+    }
+  }
+}

source/css/style.pcss

@@ -39,6 +39,7 @@
 @import "./organisms/candidate-table.pcss";
 @import "./organisms/footer.pcss";
 @import "./organisms/hero.pcss";
+@import "./organisms/navbar.pcss";
 @import "./organisms/subnav.pcss";
 
 /**

source/images/menu-toggle.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="42" height="30" viewBox="0 0 42 30">
+  <g id="Group_27" data-name="Group 27" transform="translate(-677 -34)">
+    <rect id="Rectangle_30" data-name="Rectangle 30" width="42" height="6" transform="translate(677 34)" fill="#fff"/>
+    <rect id="Rectangle_32" data-name="Rectangle 32" width="42" height="6" transform="translate(677 46)" fill="#fff"/>
+    <rect id="Rectangle_34" data-name="Rectangle 34" width="42" height="6" transform="translate(677 58)" fill="#fff"/>
+  </g>
+</svg>