feat: added support for navigation menu dropdown (#344)

Co-authored-by: Alexander Bilz <mail@alexbilz.com>

.prettierignore

@@ -3,4 +3,5 @@ resources
 exampleSite/public
 exampleSite/resources
 anatole.scss
-anatole.rtl.scss
+anatole.rtl.scss
+assets/fontawesome/css/*.min.css

assets/fontawesome/css/solid.min.css

@@ -3,19 +3,4 @@
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
  */
-:host,
-:root {
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
-}
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url(../webfonts/fa-solid-900.woff2) format('woff2'), url(../webfonts/fa-solid-900.ttf) format('truetype');
-}
-.fa-solid,
-.fas {
-  font-family: 'Font Awesome 6 Free';
-  font-weight: 900;
-}
+:host,:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-family:"Font Awesome 6 Free";font-weight:900}

assets/scss/main.scss

@@ -16,7 +16,7 @@
 @import './partials/components/pagination';
 @import './partials/components/navbarburger';
 @import './partials/components/comment';
-@import './partials/components/languageswitch';
+@import './partials/components/optionswitch';
 @import './partials/components/post';
 @import './partials/components/alert';
 @import './partials/components/portfolio';

assets/scss/partials/components/_optionswitch.scss

@@ -1,4 +1,4 @@
-.languageswitch {
+.optionswitch {
   position: relative;
 
   &__label {
@@ -65,7 +65,7 @@
 
   &__picker {
     &:checked {
-      ~ .languageswitch {
+      ~ .optionswitch {
         &__list {
           display: block;
         }

exampleSite/config/_default/menus.en.toml

@@ -23,8 +23,27 @@
   url = "/about/"
 
   [[main]]
-  name = "Contact"
+  name = "Accomplishments"
   weight = 500
+  identifier = "accomplishments"
+
+  [[main]]
+  name = "Awards"
+  weight = 510
+  identifier = "awards"
+  url = "/awards/"
+  parent = "accomplishments"  
+
+  [[main]]
+  name = "Certifications"
+  weight = 520
+  identifier = "certifications"
+  url = "/certifications/"
+  parent = "accomplishments"
+
+  [[main]]
+  name = "Contact"
+  weight = 600
   identifier = "contact"
   url = "/contact/"
 

exampleSite/content/english/awards.md

@@ -0,0 +1,17 @@
++++
+title = "Awards"
+description = "Hugo Awards, an annual literary award for the best science fiction or fantasy works"
+date = "2022-04-10"
+aliases = ["awards"]
+author = "Hugo Authors"
++++
+
+Hugo Award - from Wikipedia: [Hugo Award](https://en.wikipedia.org/wiki/Hugo_Award)
+
+The Hugo Award is an annual literary award for the best science fiction or fantasy works and achievements of the previous year, given at the World Science Fiction Convention and chosen by its members. The Hugo is widely considered the premier award in science fiction. The award is administered by the World Science Fiction Society. It is named after Hugo Gernsback, the founder of the pioneering science fiction magazine Amazing Stories. Hugos were first given in 1953, at the 11th World Science Fiction Convention, and have been awarded every year since 1955.
+
+- Best Novel 1953 Stories of 40,000 words or more
+- Best Novella 1968 Stories of between 17,500 and 40,000 words
+- Best Novelette 1955 Stories of between 7,500 and 17,500 words
+- Best Short Story 1955 Stories of less than 7,500 words
+- Best Series 2017 Series of works

exampleSite/content/english/certifications.md

@@ -0,0 +1,13 @@
++++
+title = "Certifications"
+description = "Hugo Certifications"
+date = "2022-04-10"
+aliases = ["certifications"]
+author = "Hugo Authors"
++++
+
+## 3 Best Hugo Courses, Training, Classes & Tutorials Online
+
+1. “Migrate from WordPress to Hugo, Step by Step” Our Best Pick 2022
+2. Create a Static Site With Hugo 2021
+3. Créez votre site statique avec Hugo 2020

exampleSite/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json

@@ -1 +1 @@
-{"Target":"scss/main.rtl.min.758d52338229082f556f8c6b6b5e0392589b168dfe0c5b0e77f01c4a8952b0c5.css","MediaType":"text/css","Data":{"Integrity":"sha256-dY1SM4IpCC9Vb4xra14DklibFo3+DFsOd/AcSolSsMU="}}
+{"Target":"scss/main.rtl.min.e137f9eb3f0f908b136886b05cefbccc97dd271959ef5d6748a7511abc3d8111.css","MediaType":"text/css","Data":{"Integrity":"sha256-4Tf56z8PkIsTaIawXO+8zJfdJxlZ711nSKdRGrw9gRE="}}

exampleSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json

@@ -1 +1 @@
-{"Target":"scss/main.min.5551757e3608c8c17519a404d0c78646f8b4ce68b04e5acc290a21597ce09467.css","MediaType":"text/css","Data":{"Integrity":"sha256-VVF1fjYIyMF1GaQE0MeGRvi0zmiwTlrMKQohWXzglGc="}}
+{"Target":"scss/main.min.b2e0cb07595e3519ab1193bb421914e06c0e26b0cc561fef23b3c6131d4d2ffa.css","MediaType":"text/css","Data":{"Integrity":"sha256-suDLB1leNRmrEZO7QhkU4GwOJrDMVh/vI7PGEx1NL/o="}}

layouts/partials/navbar.html

@@ -15,38 +15,82 @@
   <nav class="nav">
     <ul class="nav__list" id="navMenu">
       {{ $url := .RelPermalink }}
+      {{ $current := . }}
       {{ range .Site.Menus.main }}
         {{ $active := eq $url .URL }}
-        <li class="nav__list-item">
-          <a
-            {{ if $active }}
-              class="nav__link--active"
+        {{ if .HasChildren }}
+          <li class="nav__list-item">
+            <div class="optionswitch">
+              <input class="optionswitch__picker" type="checkbox" id="menuoptionpicker" hidden />
+              <label
+                {{ range .Children }}
+                  {{ if in $current.RelPermalink .URL }}
+                    class="optionswitch__label nav__link--active"
 
-            {{ end }}
-            href="{{ .URL }}"
-            {{ if strings.HasPrefix .URL "http" }}
-              target="_blank" rel="noopener noreferrer"
+                  {{ else }}
+                    class="optionswitch__label"
+
+                  {{ end }}
+
+
+                {{ end }}
+                for="menuoptionpicker"
+                >{{ .Name }} <i class="fa fa-angle-down" aria-hidden="true"></i
+              ></label>
+              <div class="optionswitch__triangle"></div>
+              <ul class="optionswitch__list">
+                {{ range .Children }}
+                  <li class="optionswitch__list-item">
+                    <a
+                      href="{{ .URL }}"
+                      {{ if strings.HasPrefix .URL "http" }}
+                        target="_blank" rel="noopener noreferrer"
+
+                      {{ end }}
+                      title="{{ .Title }}"
+                      >{{ .Name }}</a
+                    >
+                  </li>
+
+                {{ end }}
+              </ul>
+            </div>
+          </li>
+
+        {{ else }}
+          <li class="nav__list-item">
+            <a
+              {{ if $active }}
+                class="nav__link--active"
+
+              {{ end }}
+              href="{{ .URL }}"
+              {{ if strings.HasPrefix .URL "http" }}
+                target="_blank" rel="noopener noreferrer"
+
+              {{ end }}
+              title="{{ .Title }}"
+              >{{ .Name }}</a
+            >
+          </li>
+
+        {{ end }}
 
-            {{ end }}
-            title="{{ .Title }}"
-            >{{ .Name }}</a
-          >
-        </li>
 
       {{ end }}
     </ul>
     <ul class="nav__list nav__list--end">
       {{ if and .IsTranslated .Site.IsMultiLingual }}
         <li class="nav__list-item">
-          <div class="languageswitch">
-            <input class="languageswitch__picker" type="checkbox" id="languagepicker" hidden />
-            <label class="languageswitch__label" for="languagepicker"
+          <div class="optionswitch">
+            <input class="optionswitch__picker" type="checkbox" id="languagepicker" hidden />
+            <label class="optionswitch__label" for="languagepicker"
               >{{ .Site.Language.LanguageName }} <i class="fa fa-angle-down" aria-hidden="true"></i
             ></label>
-            <div class="languageswitch__triangle"></div>
-            <ul class="languageswitch__list">
+            <div class="optionswitch__triangle"></div>
+            <ul class="optionswitch__list">
               {{ range $.Translations }}
-                <li class="languageswitch__list-item">
+                <li class="optionswitch__list-item">
                   <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
                     ><span
                       {{ if eq . $.Site.Language }}

resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json

@@ -1 +1 @@
-{"Target":"scss/main.rtl.min.758d52338229082f556f8c6b6b5e0392589b168dfe0c5b0e77f01c4a8952b0c5.css","MediaType":"text/css","Data":{"Integrity":"sha256-dY1SM4IpCC9Vb4xra14DklibFo3+DFsOd/AcSolSsMU="}}
+{"Target":"scss/main.rtl.min.02f7350a2cba776de0d77e7088659c8ab9a87fc4d56c948cb2d816f7f7b7d458.css","MediaType":"text/css","Data":{"Integrity":"sha256-Avc1Ciy6d23g135wiGWcirmof8TVbJSMstgW9/e31Fg="}}

resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json

@@ -1 +1 @@
-{"Target":"scss/main.min.5551757e3608c8c17519a404d0c78646f8b4ce68b04e5acc290a21597ce09467.css","MediaType":"text/css","Data":{"Integrity":"sha256-VVF1fjYIyMF1GaQE0MeGRvi0zmiwTlrMKQohWXzglGc="}}
+{"Target":"scss/main.min.3f19c50a3ed6f0bb5b2b8595a88dbec7e0c5a7ac5ab3492f7baf72c31f2231b4.css","MediaType":"text/css","Data":{"Integrity":"sha256-PxnFCj7W8LtbK4WVqI2+x+DFp6xas0kve69ywx8iMbQ="}}