footer ui changed, navbar theme select added,

assets/js/zzo.js

@@ -7,11 +7,11 @@ $(document).ready(function() {
 
   // go-to-top  
   if ($(window).scrollTop() === 0) {
-    $('.gtt').hide();
+    $('.gtt').hide(200);
   } else if ($(this).scrollTop() > $(document).height() - $(window).height() - 250) { // near the bottom
-    $('.gtt').show();
+    $('.gtt').show(200);
   } else {
-    $('.gtt').hide();
+    $('.gtt').hide(200);
   }
 
   // scroll
@@ -22,9 +22,9 @@ $(document).ready(function() {
     var scroll = $(window).scrollTop();
     if (scroll > position) { // scroll down 
       if (scroll < 250) {
-        $('.gtt').hide();
+        $('.gtt').hide(200);
       } else {
-        $('.gtt').show();
+        $('.gtt').show(200);
       } 
 
       if (scroll < 45) {        
@@ -56,7 +56,7 @@ $(document).ready(function() {
       });
     } else { // scroll up
       if (scroll < 250) {
-        $('.gtt').hide();
+        $('.gtt').hide(200);
       }
 
       if (navbar.hasClass('navbar--hide')) {
@@ -99,7 +99,7 @@ $(document).ready(function() {
       }
       $('.navbar__burger').removeClass('is-active');
       $('.navbar__menu').removeClass('is-active');
-      $('.mobile-search').hide();
+      $('.mobile-search').hide(200);
     },
     setup: function () { },
     deferSetup: true,
@@ -139,7 +139,7 @@ $(document).ready(function() {
   });
 
   // mobile search
-  $('.mobile-search').hide();
+  $('.mobile-search').hide(200);
   $('#mobileSearchBtn').click(function() {
     $('#search-mobile-container').fadeIn(250);
     $('#search-mobile').focus();

assets/sass/components/_search.scss

@@ -184,18 +184,19 @@
   &__btn {
     position: absolute;
     top: 0;
-    right: $grid_navbar_height;
+    right: 35px;
-    width: $grid_navbar_height;
+    width: 35px;
     height: $grid_navbar_height;
     padding: 0.25rem;
     cursor: pointer;
     display: none;
     z-index: z('search-btn');
 
+    @include animation('slide-in-down .5s .25s 1 ease both');
     @include respond-to(sm) {
       @include flexbox();
       @include align-items(center);
-      @include justify-content(flex-end);
+      @include justify-content(center);
     }
     
     @include themify($themes) {

assets/sass/layout/_footer.scss

@@ -15,22 +15,6 @@
     }
   }
 
-  &__theme {
-    padding: 0.5rem 0;
-    @include flex-grow(1);
-    @include flexbox();
-    @include align-items(center);
-    @include flex-direction(column);
-  }
-
-  &__lang {
-    padding: 0.5rem 0;
-    @include flex-grow(1);
-    @include flexbox();
-    @include align-items(center);
-    @include flex-direction(column);
-  }
-
   &__feed {
     padding: 0.5rem 0;
     @include flex-grow(1);
@@ -59,32 +43,40 @@
   }
 
   .dropdown {
-    position: relative;
+    position: absolute;
-    display: inline-block;        
+    left: 0.5rem;
-    border-radius: 0.125rem;  
+    bottom: 0.5rem;
-    @include themify($themes) {
+    width: 40px;
-      border: 1px solid themed('dropdown-border-color');
+    height: 40px;
-    }
+    border-radius: 50%;
-
-    &-trigger {
-      border: none;
-      border-radius: 0.15rem;
 
     @include flexbox();
     @include align-items(center);
     @include justify-content(center);    
     @include themify($themes) {
-        color: themed('dropdown-footer-item-color');
+      color: themed('gtt-color'); 
-        background-color: themed('dropdown-title-background-color');
+      background-color: themed('gtt-background-color');
+      @include on-event {
+        color: themed('gtt-hover-color');  
+        background-color: themed('gtt-hover-background-color');
       }
     }
 
+    &-trigger {
+      border-radius: 50%;
+      cursor: pointer;
+      border: none;
+      width: 100%;
+      height: 100%;
+      color: inherit;
+      background-color: inherit;
+    }
+
     &-content {
       position: absolute;
       bottom: 100%;
       left: 0;
       display: none;
-      width: inherit;
       height: auto;
       z-index: z("dropdown");      
       border-top-left-radius: 0.15rem;
@@ -160,6 +152,7 @@
   }
 
   .social {
+    margin: 0.25rem;
     a {
       @include themify($themes) {        
         text-decoration: none;

assets/sass/layout/_navigation.scss

@@ -45,12 +45,13 @@
     display: none;
     position: relative;
 
+    @include animation('slide-in-down .5s .0s 1 ease both');
     @include respond-to(sm) {
       cursor: pointer;
       margin-left: auto;
       position: relative;
       height: $grid_navbar_height;    
-      width: $grid_navbar_height;
+      width: 35px;
 
       @include flexbox();
       @include align-items(center);
@@ -145,7 +146,6 @@
     @include align-items(center);
     @include justify-content(flex-end);
     height: $grid_navbar_height;
-    position: relative;
     
     @include respond-to(sm) {
       display: none;
@@ -172,7 +172,6 @@
           @include respond-to(sm) {
             border-bottom: none;
           }
-
         }
         &.active {
           color: themed('navbar-title-active-color') !important;
@@ -246,12 +245,6 @@
       display: block;
       font-size: 1rem;
 
-      // @for $i from 1 through 4 {        
-      //   &:nth-child(#{$i}) {
-      //     @include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
-      //   }
-      // }
-
       @include themify($themes) {
         color: themed("dropdown-item-color");
         @include on-event {
@@ -276,3 +269,195 @@
 .navbar__dropdown:hover .navbar__dropdown--content {
   display: block;
 }
+
+.theme {
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(flex-end);
+  @include animation('slide-in-down .5s .0s 1 ease both');  
+  @include respond-to(sm) {
+    display: none;
+  }
+
+  .dropdown {
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);    
+    @include themify($themes) {
+      color: themed('burger-menu-color');  
+      @include on-event {
+        color: themed('navbar-title-hover-color');
+        background-color: themed('navbar-menu-hover-background-color');
+        border-bottom: 1px solid themed('navbar-border-bottom-color');
+      }      
+    }
+
+    &-trigger {      
+      padding: 0.5rem;
+      cursor: pointer;
+      border: none;
+      outline: none;
+      width: $grid_navbar_height;
+      height: $grid_navbar_height;
+      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 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;
+  }
+}
+
+.theme-mobile {
+  display: none;
+  outline: none;
+  position: absolute;
+  top: 0;
+  right: 35px * 2;
+  width: 35px;
+  height: $grid_navbar_height;
+  padding: 0.25rem;
+  cursor: pointer;
+  z-index: z('modal');
+
+  @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;
+    }      
+  }
+  @include respond-to(sm) {
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(flex-end);
+    
+  }
+
+  .dropdown {
+    @include themify($themes) {
+      color: themed('burger-menu-color');  
+      @include on-event {
+        color: themed('link-hover');
+        background-color: inherit;
+        border-bottom: none;
+      }      
+    }
+
+    &-trigger {      
+      padding: 0.25rem;
+      cursor: pointer;
+      border: none;
+      outline: none;
+      width: 35px;
+      height: $grid_navbar_height;      
+      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 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;
+  }
+}

exampleSite/config/_default/params.toml

@@ -45,7 +45,7 @@ showFeedLinks = true
 showSocialLinks = true
 enableLangChange = true
 enableThemeChange = true
-themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
+themeOptions = ["dark", "light", "hacker", "solarized"]
 
 # comment
 enableComment = true

layouts/partials/footer/go-to-top.html

@@ -1,7 +1,7 @@
 {{ if $.Param "enableGoToTop" }}
 <div id="gtt">
   <div class="gtt">
-    {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 25 "height" 25) }}
+    {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 32 "height" 32) }}
   </div>
 </div>
 

layouts/partials/footer/links-social.html

@@ -1,6 +1,5 @@
 {{ if $.Param "showSocialLinks" }}
 <div class="footer__social">
-  <label class="label p2">{{ i18n "footer-social" }}</label>
   <div class="social">
     {{ range $name, $path := $.Param "socialOptions" }}
       {{ if $path }}

layouts/partials/footer/select-lang.html

@@ -1,10 +1,7 @@
 {{ if $.Param "enableLangChange" }}
-<div class="footer__lang">
+<div class="dropdown">
-  <label class="label p2">{{ i18n "footer-language" }}</label>
-  <div class="dropdown">
   <button class="dropdown-trigger">
-      <span class="select-lang__label caption">{{ .Site.Language.LanguageName }}</span>
+    {{ partial "svgs/etc/translate.svg" (dict "width" 24 "height" 24) }}
-      {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 20 "height" 20) }}
   </button>
   <div class="dropdown-content">
     {{ $siteLanguages := .Site.Languages}}
@@ -23,6 +20,5 @@
       {{ end }}
     {{ end }}
   </div>
-  </div>
 </div>
 {{ end }}

layouts/partials/footer/select-theme.html

@@ -1,67 +0,0 @@
-{{ if $.Param "enableThemeChange" }}
-<div class="footer__theme">
-  <label class="label p2">{{ i18n "footer-theme" }}</label>
-  <div class="dropdown">
-    <button class="dropdown-trigger">
-      <span class="select-theme__label caption">
-        {{ if .Site.Params.themeOptions }}
-          {{ index .Site.Params.themeOptions 0 }}
-        {{ end }}
-      </span>
-      {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 20 "height" 20) }}
-    </button>
-    <div class="dropdown-content select-theme">
-      {{ if .Site.Params.themeOptions }}
-        {{ range $index, $value := .Site.Params.themeOptions }}
-        <a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
-          {{ . }}
-        </a>
-        {{ end }}
-      {{ end }}
-    </div>
-  </div>
-</div>            
-{{ end }}
-<script>
-  // theme change
-  var localTheme = localStorage.getItem('theme');
-  if (localTheme) {
-    $('.select-theme__label').text(localTheme);
-    $('.select-theme__item').each(function() {
-      $(this).removeClass('is-active');
-    });
-    $(`.select-theme a:contains("${localTheme}")`).addClass('is-active');
-  }
-
-  $('.select-theme__item').click(function (e) {
-    var selectedThemeVariant = $(e.target).text().trim();
-    var currentThemeVariant = $('.select-theme__label').text().trim();    
-    localStorage.setItem('theme', selectedThemeVariant);
-
-    $('.select-theme__label').text(selectedThemeVariant);
-    $('#root').removeClass(`theme__${currentThemeVariant}`).addClass(`theme__${selectedThemeVariant}`);
-    var nodes = $('.select-theme').children('.dropdown-item');
-
-    nodes.each(function () {
-      if ($(this).text().trim() === selectedThemeVariant) {
-        if (!$(this).hasClass('is-active')) {
-          $(this).addClass('is-active');          
-        }
-      } else {
-        if ($(this).hasClass('is-active')) {
-          $(this).removeClass('is-active');
-        }
-      }
-    });
-
-    if (window.mermaid) {
-      if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
-        mermaid.initialize({ theme: 'dark' });
-        location.reload();
-      } else {
-        mermaid.initialize({ theme: 'default' });
-        location.reload();
-      }      
-    }
-  });
-</script>

layouts/partials/footer/site-footer.html

@@ -1,6 +1,5 @@
 <footer class="footer">
     <div class="footer__wrapper">
-        {{ partial "footer/select-theme" . }}
         {{ partial "footer/select-lang" . }}
         {{ partial "footer/links-social.html" . }}        
     </div>

layouts/partials/navbar/select-theme-mobile.html

@@ -0,0 +1,18 @@
+{{ if $.Param "enableThemeChange" }}
+<div class="theme-mobile">
+  <div class="dropdown">
+    <button class="dropdown-trigger navbar__slide-down">
+      {{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}      
+    </button>
+    <div class="dropdown-content select-theme">
+      {{ if .Site.Params.themeOptions }}
+        {{ range $index, $value := .Site.Params.themeOptions }}
+        <a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
+          {{ . }}
+        </a>
+        {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/partials/navbar/select-theme.html

@@ -0,0 +1,18 @@
+{{ if $.Param "enableThemeChange" }}
+<div class="theme">
+  <div class="dropdown">
+    <button class="dropdown-trigger navbar__slide-down">
+      {{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}      
+    </button>
+    <div class="dropdown-content select-theme">
+      {{ if .Site.Params.themeOptions }}
+        {{ range $index, $value := .Site.Params.themeOptions }}
+        <a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
+          {{ . }}
+        </a>
+        {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/partials/navbar/site-nav.html

@@ -9,13 +9,18 @@
       <h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
     </a>    
   </div>
+  
+  {{ partial "navbar/select-theme-mobile" . }}
   {{ partial "navbar/site-search-mobile" . }}
+  
   <a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
   </a>  
+
   <div class="navbar__menu">
+    {{ partial "navbar/select-theme" . }}
     {{ range .Site.Menus.main -}}
     {{ if .HasChildren }}
     <div class="navbar__dropdown navbar__slide-down">
@@ -37,3 +42,48 @@
     {{ end }}
   </div>
 </nav>
+
+<script>
+  // theme change
+  var localTheme = localStorage.getItem('theme');
+  if (localTheme) {
+    $('.select-theme__item').each(function() {
+      $(this).removeClass('is-active');
+    });
+    $(`.select-theme a:contains("${localTheme}")`).addClass('is-active');
+  }
+
+  $('.select-theme__item').click(function (e) {
+    var selectedThemeVariant = $(e.target).text().trim();
+    localStorage.setItem('theme', selectedThemeVariant);   
+
+    if ($(this).attr('class').trim() === selectedThemeVariant) {
+      return null;
+    }
+
+    $('#root').removeAttr('class').addClass(`theme__${selectedThemeVariant}`);
+    var nodes = $('.select-theme').children('.dropdown-item');
+
+    nodes.each(function () {
+      if ($(this).text().trim() === selectedThemeVariant) {
+        if (!$(this).hasClass('is-active')) {
+          $(this).addClass('is-active');          
+        }
+      } else {
+        if ($(this).hasClass('is-active')) {
+          $(this).removeClass('is-active');
+        }
+      }
+    });
+
+    if (window.mermaid) {
+      if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
+        mermaid.initialize({ theme: 'dark' });
+        location.reload();
+      } else {
+        mermaid.initialize({ theme: 'default' });
+        location.reload();
+      }      
+    }
+  });
+</script>

layouts/partials/svgs/etc/invert-colors.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentColor" d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41 0L6.34 7.93zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg>