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 0000000000000000000000000000000000000000..7bc134badb5e1f4374fda53ff1f85f03135092b0 --- /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 bd6281881e0b50e83dda0fe5ea2790473567ed26..ccfaec27e08bff981ea954a7b0ddec52bc697c14 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; }