Commit a466f90a authored by Henk Verlinde's avatar Henk Verlinde
Browse files

Update mobile menu

parent 7aee74b8

assets/scss/common/_dark.scss

+9 −0
Original line number Diff line number Diff line
@@ -194,3 +194,12 @@ body.dark .card { 
body.dark .card.bg-light {

  background: $body-overlay-dark !important;

}



body.dark .navbar .menu-icon .navicon {

  background: $navbar-dark-color;

}



body.dark .navbar .menu-icon .navicon:before,

body.dark .navbar .menu-icon .navicon:after {

  background: $navbar-dark-color;

}

assets/scss/layouts/_header.scss

+73 −0
Original line number Diff line number Diff line
@@ -108,3 +108,76 @@ 
  background-position: right calc(0.375em + 0.1875rem) center;

  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

}



/* 

 * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99

*/





/* Style the menu icon for the dropdown */



.navbar .menu-icon {

  cursor: pointer;

  /* display: inline-block; */

  /* float: right; */

  padding: 1.125rem 0.625rem;

  margin: 0 0 0 -0.625rem;

  /* position: relative; */

  user-select: none;

}



.navbar .menu-icon .navicon {

  background: $navbar-light-color;

  display: block;

  height: 2px;

  position: relative;

  transition: background .2s ease-out;

  width: 18px;

}



.navbar .menu-icon .navicon:before,

.navbar .menu-icon .navicon:after {

  background: $navbar-light-color;

  content: '';

  display: block;

  height: 100%;

  position: absolute;

  transition: all .2s ease-out;

  width: 100%;

}



.navbar .menu-icon .navicon:before {

  top: 5px;

}



.navbar .menu-icon .navicon:after {

  top: -5px;

}



/* Add the icon and menu animations when the checkbox is clicked */



.navbar .menu-btn {

  display: none;

}



.navbar .menu-btn:checked ~ .navbar-collapse {

  display: block;

  max-height: 100vh;

}



.navbar .menu-btn:checked ~ .menu-icon .navicon {

  background: transparent;

}



.navbar .menu-btn:checked ~ .menu-icon .navicon:before {

  transform: rotate(-45deg);

}



.navbar .menu-btn:checked ~ .menu-icon .navicon:after {

  transform: rotate(45deg);

}



.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,

.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {

  top: 0;

}

layouts/index.headers

+1 −1
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

  X-Content-Type-Options: nosniff

  X-XSS-Protection: 1; mode=block

  Content-Security-Policy:  default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-eval'; style-src 'self'

  Content-Security-Policy:  default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'

  X-Frame-Options: SAMEORIGIN

  Referrer-Policy: strict-origin

  Feature-Policy: geolocation 'self'

layouts/partials/header/header.html

+14 −5
Original line number Diff line number Diff line 
<!-- <div class="header-bar fixed-top"></div> -->

<header x-data="{ open: false }" class="navbar fixed-top navbar-expand-md navbar-light">

<header class="navbar fixed-top navbar-expand-md navbar-light">

  <div class="container">



    <input class="menu-btn order-3" type="checkbox" id="menu-btn">

    <label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>

    

    <a class="navbar-brand order-0 mr-auto" href="{{ .Site.BaseURL }}">{{ .Site.Params.Title }}</a>

    <button id="mode" class="btn btn-link order-1 order-md-4" type="button" aria-label="Toggle mode">

      <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
@@ -13,11 +17,16 @@ 
        </li>

      {{ end -}}

    </ul>

    <button @click="open = true" id="navigation" class="btn btn-link order-3 d-md-none" type="button" aria-expanded="false" aria-label="Toggle navigation">

      <svg x-bind:class="{ 'd-none': open }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

      <svg class="d-none" x-bind:class="{ 'd-block': open }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>







    <!--

    <button id="navigation" class="btn btn-link order-3 d-md-none" type="button" aria-expanded="false" aria-label="Toggle navigation">

      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

    </button>

    <div x-show="open" @click.away="open = false" x-bind:class="{ 'd-block': open }" class="navbar-collapse order-4 order-md-1">

    -->

    <div class="collapse navbar-collapse order-4 order-md-1">

      <ul class="navbar-nav main-nav mr-auto order-5 order-md-2">

        {{- $current := . -}}

        {{ range .Site.Menus.main -}}