kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

better mobile navbar

This commit is contained in:
zzossig 2020-02-20 19:08:38 +09:00
parent beae49be6e
commit fca3071e3e
12 changed files with 203 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/sass/components/_search.scss
View File

@ -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');
}
}

212
assets/sass/layout/_navigation.scss
View File

@ -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');
}
}
}
@ -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);
@ -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 {
@ -441,94 +462,73 @@
@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;
}
}
}
}

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

6
layouts/_default/list.html
View File

@ -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');
},

6
layouts/_default/single.html
View File

@ -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');
},

6
layouts/_default/taxonomy.html
View File

@ -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');
},

6
layouts/index.html
View File

@ -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');

36
layouts/partials/head/scripts.html
View File

@ -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');

23
layouts/partials/navbar/nav-menu-mobile.html Normal file
View File

@ -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>

28
layouts/partials/navbar/nav-menu.html Normal file
View File

@ -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>

2
layouts/partials/navbar/select-theme-mobile.html
View File

@ -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) }}

38
layouts/partials/navbar/site-nav.html
View File

@ -14,40 +14,6 @@
{{ 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>