From 3f81a6fb42e36295fb9744ce168dac3956f4dd6c Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Thu, 17 Sep 2020 10:39:05 +0200
Subject: [PATCH] Add simplified navbar variant
---
.../00-global/simplified-navbar.mustache | 41 +++++++++++++++++++
source/css/organisms/navbar.pcss | 13 +++++-
2 files changed, 53 insertions(+), 1 deletion(-)
create mode 100644 source/_patterns/02-organisms/00-global/simplified-navbar.mustache
diff --git a/source/_patterns/02-organisms/00-global/simplified-navbar.mustache b/source/_patterns/02-organisms/00-global/simplified-navbar.mustache
new file mode 100644
index 0000000..7bc134b
--- /dev/null
+++ b/source/_patterns/02-organisms/00-global/simplified-navbar.mustache
@@ -0,0 +1,41 @@
+<nav class="navbar navbar--simple __js-root">
+ <ui-app inline-template>
+ <ui-navbar inline-template>
+ <div>
+ <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+ <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+ <a href="#">
+ <img src="/images/logo-round-white.svg" class="w-8" />
+ </a>
+ <span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
+ </div>
+ <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+ <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+ <i class="ico--menu text-3xl"></i>
+ </a>
+ </div>
+ <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+ <ul class="navbar-menu text-white">
+ <li class="navbar-menu__item">
+ <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
+ </li>
+ <li class="navbar-menu__item">
+ <ui-navbar-subitem label="Lidé">
+ <ul class="navbar-menu__submenu">
+ <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+ </ul>
+ </ui-navbar-subtitem>
+ </li>
+ <li class="navbar-menu__item">
+ <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
+ </li>
+ <li class="navbar-menu__item">
+ <a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </ui-navbar>
+ </ui-app>
+</nav>
diff --git a/source/css/organisms/navbar.pcss b/source/css/organisms/navbar.pcss
index bd62818..ccfaec2 100644
--- a/source/css/organisms/navbar.pcss
+++ b/source/css/organisms/navbar.pcss
@@ -16,6 +16,12 @@
}
}
+.navbar--simple .navbar__content {
+ grid-template-areas: "brand menutoggle"
+ "main main"
+ "actions actions";
+}
+
.navbar__brand {
grid-area: brand;
}
@@ -92,13 +98,18 @@
.navbar__content {
grid-template-areas: "brand external actions"
"brand main actions";
- grid-template-columns: 8rem 1fr auto;
+ grid-template-columns: 8rem 1fr auto;
&:not(.navbar__content--initialized) {
@apply grid;
}
}
+ .navbar--simple .navbar__content {
+ grid-template-areas: "brand main actions";
+ grid-template-columns: auto 1fr auto;
+ }
+
.navbar__section--expandable {
@apply bg-transparent px-0 py-0 m-0;
}
--
GitLab