ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-09-20 12:50:47 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added off-canvas mobile menu

Browse source
This commit is contained in:
Thomas Smith 2022-09-27 19:33:07 -04:00
parent 957ed3b24c
commit d016a26c93
2 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/layouts/partials/header.html
View file

@ -0,0 +1,43 @@
<div class="offcanvas black-bg offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">MENU</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav ms-auto me-4 my-auto">
{{ range .Site.Menus.main }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
<a class="top-nav-link nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
</li>
{{ end }}
</ul>
</div>
</div>
<style>
@media only screen and (max-width: 992px) {
.offcanvas{
border-left: 2px solid #949494;
}
.offcanvas-title{
font-size: 3vw;
}
a.top-nav-link{
color: #00ffd0!important;
font-size: 6vw;
text-align: right;
}
.btn-close{
color: white !important;
}
}
</style>

15
src/layouts/partials/navbar.html
View file

@ -1,18 +1,9 @@
<nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
<div class="container-fluid top-nav">
<a class="navbar-brand" href="#"><img class="nav-logo" src="/Images/tea-logo-2.svg"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span>
<input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
<label for="checkbox1">
<div class="hamburger hamburger1">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</label></span>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
MENU
</button>
<div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-4 my-auto">