Skip to content
Snippets Groups Projects
Commit 3f81a6fb authored by xaralis's avatar xaralis
Browse files

Add simplified navbar variant

parent 67582007
No related branches found
No related tags found
No related merge requests found
<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>
......@@ -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;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment