Merge pull request #11 from mirus-ua/feature/5/sub-menu

feat: submenus update

README.md

@@ -2,13 +2,13 @@
 
 ## Welcome to Hugo Theme re-Terminal!
 
-Hello! I'm thrilled to announce that we've received a brand new fork of Hugo Theme re-Terminal, now officially known as Hugo Theme Re-Terminal!
+Hello! I'm thrilled to announce a brand new fork of Hugo Theme Terminal, now officially known as Hugo Theme Re-Terminal!
 
 
 As the maintainer, I'm excited to share that this theme will continue to evolve and receive updates with new features. Why? Because I use it myself! You can bet your last byte that any changes I make will be thoroughly tested and refined for real-world use.
 
 
-This fork aims to breathe new life into the original re-Terminal theme, which was once a popular choice among Hugo enthusiasts. Unfortunately, it had been neglected over time. But no more! With re-Terminal, we're committed to keeping the spirit of the original alive while adding fresh perspectives and innovations.
+This fork aims to breathe new life into the original Terminal theme, which was once a popular choice among Hugo enthusiasts. Unfortunately, it had been neglected over time. But no more! With re-Terminal, we're committed to keeping the spirit of the original alive while adding fresh perspectives and innovations.
 
 
 In the coming weeks and months, you can expect to see new features, and bug fixes. We'll also be actively seeking feedback from our community to ensure that this theme continues to meet your needs and exceed your expectations.
@@ -18,10 +18,12 @@ So, welcome aboard! I'm excited to have you join us on this journey as we shape
 
 ----
 
-![Terminal](https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/images/screenshot.png?raw=true)
+![re-Terminal](https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/images/screenshot.png?raw=true)
 
 
-### DEMO - https://re-terminal.nebrowser.com/
+### DEMO and some blog posts about re-Terminal - https://re-terminal.nebrowser.com/
+
+### Visit repo's wiki (WIP) - https://github.com/mirus-ua/hugo-theme-re-terminal/wiki 
 
 ### ⚠️ The theme needs at least Hugo **Extended** v0.128.0.
 
@@ -267,6 +269,14 @@ paginate = 5
       logoHomeLink = "/"
 
     [languages.en.menu]
+      # Submenus is available since v2.1.0
+      # [[languages.en.menu.main]]
+      #   identifier = "submenuParent"
+      #   name = "Submenu"
+      # [[languages.en.menu.main]]
+      #   parent = "submenuParent"
+      #   identifier = "anItem"
+      #   name = "AnItem"
       [[languages.en.menu.main]]
         identifier = "about"
         name = "About"
@@ -287,7 +297,7 @@ paginate = 5
 
 to `config.toml` file in your Hugo root directory and change params fields. In case you need, here's [a YAML version](https://gist.github.com/panr/9eeea6f595c257febdadc11763e3a6d1).
 
-**NOTE:** Please keep in mind that currently `main menu` doesn't support nesting.
+**NOTE:** Please keep in mind that `main menu` supports only one level of nesting.
 
 ## Post archetype
 

assets/css/menu.scss

@@ -87,6 +87,15 @@
     cursor: pointer;
   }
 
+  &__subdrop {
+    &--title {
+      padding: 5px;
+    }
+    &--list {
+      list-style-type: unset;
+    }
+  }
+
   &__dropdown {
     @include menu;
 

demoSite/hugo.toml

@@ -6,7 +6,7 @@ paginate = 5
 [params]
 contentTypeName = "posts"
 themeColor = "blue"
-showMenuItems = 2
+showMenuItems = 3
 fullWidthTheme = false
 centerTheme = true
 [params.banner]
@@ -29,6 +29,20 @@ logoText = "re-Terminal"
 logoHomeLink = "/"
 
 [languages.en.menu]
+[[langiages.en.menu.main]]
+identifier = "submenu"
+name = "Sub menus"
+weight = 10
+[[languages.en.menu.main]]
+identifier = "subabout"
+name = "About"
+url = "/about"
+parent = "submenu"
+[[languages.en.menu.main]]
+identifier = "subshowcase"
+name = "Showcase"
+url = "/showcase"
+parent = "submenu"
 [[languages.en.menu.main]]
 identifier = "about"
 name = "About"

layouts/partials/menu.html

@@ -1,10 +1,24 @@
 <nav class="navigation-menu">
   <ul class="navigation-menu__inner menu--desktop">
     {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
+      {{/*  get first amount of item  */}}
       {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
         {{ if not .HasChildren }}
           <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
-        {{ end }}
+        {{ else }}
+        <li>
+          <ul class="menu">
+            <li class="menu__trigger">{{ .Name }}&nbsp;▾</li>
+            <li>
+              <ul class="menu__dropdown">
+                {{ range .Children  }}
+                    <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+                {{ end }}  
+              </ul>
+            </li>
+          </ul>
+        </li>
+        {{end}}
       {{ end }}
       {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
         <li>
@@ -15,6 +29,15 @@
                 {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
                   {{ if not .HasChildren }}
                     <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+                  {{ else }}
+                  <li class="menu__subdrop--title">▾&nbsp;{{ .Name }}</li>
+                  <li>
+                    <ul  class="menu__subdrop--list">
+                      {{ range .Children  }}
+                      <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+                      {{ end }}  
+                    </ul>
+                  </li>
                   {{ end }}
                 {{ end }}
               </ul>

layouts/partials/mobile-menu.html

@@ -5,6 +5,15 @@
       {{ range $.Site.Menus.main }}
         {{ if not .HasChildren }}
           <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+        {{ else }}
+        <li class="menu__subdrop--title">▾&nbsp;{{ .Name }}</li>
+        <li>
+          <ul  class="menu__subdrop--list">
+            {{ range .Children  }}
+            <li><a href="{{ .URL }}" {{ if .Params.NewTab -}} target="_blank" {{- end }}>{{ .Name }}</a></li>
+            {{ end }}  
+          </ul>
+        </li>
         {{ end }}
       {{ end }}
       {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}