better mobile navbar
This commit is contained in:
zzossig
parent
beae49be6e
commit
fca3071e3e
|
|
@ -354,7 +354,7 @@
|
|||
background-color: themed('navbar-background-color');
|
||||
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
color: themed('navbar-title-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@
|
|||
|
||||
@include themify($themes) {
|
||||
background-color: themed('navbar-background-color') !important;
|
||||
border-bottom: 1px solid themed('navbar-border-bottom-color') !important;
|
||||
|
||||
@include on-event {
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
color: themed('navbar-title-hover-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,10 +122,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include on-event {
|
||||
span {
|
||||
@include themify($themes) {
|
||||
background-color: themed('link-hover');
|
||||
background-color: themed('navbar-title-hover-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
}
|
||||
|
||||
&-item {
|
||||
height: $grid_navbar_height;
|
||||
height: $grid_navbar_height;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-family: $title-font;
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
background-color: themed('navbar-background-color');
|
||||
@include on-event {
|
||||
color: themed('navbar-title-hover-color');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
// background-color: themed('navbar-menu-hover-background-color');
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
||||
}
|
||||
|
|
@ -240,23 +240,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
position: absolute;
|
||||
top: $grid_navbar_height;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
// &.is-active {
|
||||
// position: absolute;
|
||||
// top: $grid_navbar_height;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
// overflow: hidden;
|
||||
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
@include align-items(flex-start);
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('navbar-border-bottom-color');
|
||||
background-color: themed('navbar-mobile-background-color');
|
||||
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
||||
}
|
||||
}
|
||||
// @include flexbox();
|
||||
// @include flex-direction(column);
|
||||
// @include align-items(flex-start);
|
||||
// @include themify($themes) {
|
||||
// border-top: 1px solid themed('navbar-border-bottom-color');
|
||||
// background-color: themed('navbar-mobile-background-color');
|
||||
// border-bottom: 1px solid themed('navbar-border-bottom-color');
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
|
|
@ -346,8 +346,17 @@
|
|||
}
|
||||
|
||||
.dropdown {
|
||||
height: $grid_navbar_height !important;
|
||||
position: relative;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
|
|
@ -356,7 +365,7 @@
|
|||
@include on-event {
|
||||
color: themed('navbar-title-hover-color');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
|
|
@ -366,8 +375,20 @@
|
|||
outline: none;
|
||||
width: $grid_navbar_height;
|
||||
height: $grid_navbar_height - 2px;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('navbar-title-hover-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 769px) {
|
||||
&-trigger {
|
||||
padding: 0.25rem;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
|
|
@ -440,95 +461,74 @@
|
|||
&[data-ani="true"] {
|
||||
@include animation('slide-in-down .5s .4s 1 ease both');
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
background-color: inherit;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 769px) {
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
height: $grid_navbar_height !important;
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 35px;
|
||||
height: $grid_navbar_height !important;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
display: none;
|
||||
height: auto;
|
||||
z-index: z("dropdown");
|
||||
border-top-left-radius: 0.15rem;
|
||||
border-top-right-radius: 0.15rem;
|
||||
|
||||
a {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
|
||||
@include themify($themes) {
|
||||
border-top: 4px solid themed("dropdown-border-top-color");
|
||||
background-color: themed("dropdown-content-background-color");
|
||||
}
|
||||
|
||||
.is-active {
|
||||
@include themify($themes) {
|
||||
background-color: themed("dropdown-item-active-background-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 0.25rem 0.75rem;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
|
||||
@include no-select;
|
||||
@include themify($themes) {
|
||||
color: themed("dropdown-item-color");
|
||||
@include on-event {
|
||||
color: themed("dropdown-item-hover-color");
|
||||
background-color: themed("dropdown-item-hover-background-color");
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0.15rem;
|
||||
border-top-right-radius: 0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbarm {
|
||||
padding: 0 0.75rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
|
||||
&__menu {
|
||||
height: 100%;
|
||||
padding: 0 0.75rem;
|
||||
|
||||
@include flexbox();
|
||||
|
||||
&--item {
|
||||
height: $grid-navbar-height;
|
||||
padding: 0rem 0.75rem;
|
||||
|
||||
& > a {
|
||||
height: 100%;
|
||||
font-family: $title-font;
|
||||
font-size: 16.8px;
|
||||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('body-color');
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: themed('navbar-title-active-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__collapse {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: $grid-navbar-height;
|
||||
left: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include transition(all, 0.15s, ease-out);
|
||||
@include themify($themes) {
|
||||
background-color: themed('navbar-background-color');
|
||||
|
||||
&[data-open="true"] {
|
||||
border-bottom: 2px solid themed('navbar-border-bottom-color');
|
||||
}
|
||||
&[data-open="false"] {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -80,7 +80,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
}
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -85,7 +85,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
}
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -80,7 +80,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
}
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -77,8 +77,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
if (document.getElementsByClassName('navbar__burger')[0]) {
|
||||
document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
}
|
||||
if (document.getElementsByClassName('navbar__menu')[0]) {
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
|
|
|
|||
|
|
@ -79,6 +79,26 @@
|
|||
// ===============================================================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// ===================== navbar collapse ======================
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
navCollapseBtn ? navCollapseBtn.addEventListener('click', function (e) {
|
||||
var navCollapse = document.querySelector('.navbarm__collapse');
|
||||
|
||||
if (navCollapse) {
|
||||
var dataOpen = navCollapse.getAttribute('data-open');
|
||||
|
||||
if (dataOpen === 'true') {
|
||||
navCollapse.setAttribute('data-open', 'false');
|
||||
navCollapse.style.maxHeight = 0;
|
||||
} else {
|
||||
navCollapse.setAttribute('data-open', 'true');
|
||||
navCollapse.style.maxHeight = navCollapse.scrollHeight + "px";
|
||||
}
|
||||
}
|
||||
}) : null;
|
||||
// ============================================================
|
||||
|
||||
|
||||
// =================== search-result desktop ==================
|
||||
var summaryContainer = document.querySelector('.summary__container');
|
||||
var searchResult = document.querySelector('.search-result');
|
||||
|
|
@ -416,22 +436,6 @@
|
|||
// ============================================================
|
||||
|
||||
|
||||
// ========================== navbar ==========================
|
||||
var navbarBurgerElem = document.querySelector('.navbar__burger');
|
||||
var navbarMenuElem = document.querySelector('.navbar__menu');
|
||||
navbarBurgerElem ?
|
||||
navbarBurgerElem.addEventListener('click', function () {
|
||||
if (navbarBurgerElem.classList.contains('is-active')) {
|
||||
navbarBurgerElem.classList.remove('is-active');
|
||||
navbarMenuElem.classList.remove('is-active');
|
||||
} else {
|
||||
navbarBurgerElem.classList.add('is-active');
|
||||
navbarMenuElem.classList.add('is-active');
|
||||
}
|
||||
}) : null;
|
||||
// ============================================================
|
||||
|
||||
|
||||
// ======================= theme change =======================
|
||||
var localTheme = localStorage.getItem('theme');
|
||||
var rootEleme = document.getElementById('root');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
{{ partial "navbar/select-theme-mobile" . }}
|
||||
{{ partial "search/site-search-mobile" . }}
|
||||
|
||||
<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false"
|
||||
data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="navbarm__collapse" data-open="false">
|
||||
<ul>
|
||||
{{ $current := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}
|
||||
{{ $active = or $active (eq .Name $current.Title) }}
|
||||
{{ $active = or $active (eq (lower .URL) (lower $current.Title)) }}
|
||||
{{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
|
||||
<li class="navbarm__menu--item {{ if $active }}active{{ end }}">
|
||||
<a href="{{ .URL | relLangURL }}">{{ safeHTML .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<div class="navbar__menu">
|
||||
{{ partial "navbar/select-theme" . }}
|
||||
{{ $current := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}
|
||||
{{ $active = or $active (eq .Name $current.Title) }}
|
||||
{{ $active = or $active (eq (lower .URL) (lower $current.Title)) }}
|
||||
{{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
|
||||
{{ if .HasChildren }}
|
||||
<div class="navbar__dropdown navbar__slide-down" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item {{ if $active }}active{{ end }}"
|
||||
dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
|
||||
{{ safeHTML .Name }}
|
||||
<span class="navbar__menu-icon">
|
||||
{{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar__dropdown--content">
|
||||
{{ range .Children }}
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__dropdown--item" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ safeHTML .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ safeHTML .Name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{ if $.Param "enableThemeChange" }}
|
||||
<div class="theme-mobile" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
<div class="theme theme-mobile" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style="{{ if $.Param "enableSearch" }}{{ else }}position: absolute; top: 0;{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
{{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}
|
||||
|
|
|
|||
|
|
@ -13,41 +13,7 @@
|
|||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ partial "navbar/select-theme-mobile" . }}
|
||||
{{ partial "search/site-search-mobile" . }}
|
||||
|
||||
<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
|
||||
<div class="navbar__menu">
|
||||
{{ partial "navbar/select-theme" . }}
|
||||
{{ $current := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}
|
||||
{{ $active = or $active (eq .Name $current.Title) }}
|
||||
{{ $active = or $active (eq (lower .URL) (lower $current.Title)) }}
|
||||
{{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
|
||||
{{ if .HasChildren }}
|
||||
<div class="navbar__dropdown navbar__slide-down" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
|
||||
{{ safeHTML .Name }}
|
||||
<span class="navbar__menu-icon">
|
||||
{{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar__dropdown--content">
|
||||
{{ range .Children }}
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__dropdown--item" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ safeHTML .Name }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ safeHTML .Name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "navbar/nav-menu-mobile" . }}
|
||||
{{ partial "navbar/nav-menu" . }}
|
||||
</nav>
|
||||
Loading…
Reference in New Issue