merge sub-menu

assets/icons/arrow-down.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- by Sciroccogti -->
+<svg version="1.1" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2"
+    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="4,8 12,16 20,8 " />
+</svg>

assets/scss/partials/menu.scss

@@ -21,12 +21,15 @@
     margin: 0;
     overflow: visible;
 }
+
 .hamburger:hover {
     opacity: 0.7;
 }
+
 .hamburger.is-active:hover {
     opacity: 0.7;
 }
+
 .hamburger.is-active .hamburger-inner,
 .hamburger.is-active .hamburger-inner::before,
 .hamburger.is-active .hamburger-inner::after {
@@ -58,14 +61,17 @@
     transition-duration: 0.15s;
     transition-timing-function: ease;
 }
+
 .hamburger-inner::before,
 .hamburger-inner::after {
     content: "";
     display: block;
 }
+
 .hamburger-inner::before {
     top: -10px;
 }
+
 .hamburger-inner::after {
     bottom: -10px;
 }
@@ -74,9 +80,11 @@
     transition-duration: 0.22s;
     transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
+
 .hamburger--spin .hamburger-inner::before {
     transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
 }
+
 .hamburger--spin .hamburger-inner::after {
     transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
@@ -86,11 +94,13 @@
     transition-delay: 0.12s;
     transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 }
+
 .hamburger--spin.is-active .hamburger-inner::before {
     top: 0;
     opacity: 0;
     transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
 }
+
 .hamburger--spin.is-active .hamburger-inner::after {
     bottom: 0;
     transform: rotate(-90deg);
@@ -118,6 +128,7 @@
     outline: none;
 
     &.is-active {
+
         .hamburger-inner,
         .hamburger-inner::before,
         .hamburger-inner::after {
@@ -210,6 +221,41 @@
             }
         }
     }
+
+    .dropdown {
+        position: relative;
+    }
+
+    .dropdown-header {
+        height: auto;
+    }
+
+    .dropdown-header svg {
+        transition-duration: 0.15s;
+    }
+
+    .dropdown-content {
+        display: none;
+        // position: absolute;
+        width: 100%;
+        transition-duration: 0.15s;
+        padding: 0;
+    }
+
+    .dropdown:hover {
+        .dropdown-header svg {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-content {
+            display: block;
+        }
+    }
+
+    .dropdown-item {
+        list-style: none;
+        padding: 0.2rem 0;
+    }
 }
 
 .menu-social {
@@ -226,4 +272,4 @@
         stroke: var(--body-text-color);
         stroke-width: 1.33;
     }
-}
+}

exampleSite/config/_default/config.toml

@@ -0,0 +1,16 @@
+# Change baseurl before deploy
+baseurl = "https://demo.stack.jimmycai.com"
+languageCode = "en-us"
+paginate = 5
+title = "Hugo Theme Stack Starter"
+
+# Theme i18n support
+# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar
+DefaultContentLanguage = "en"
+
+# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
+# This will make .Summary and .WordCount behave correctly for CJK languages.
+hasCJKLanguage = false
+
+# Change it to your Disqus shortname before using
+disqusShortname = "hugo-theme-stack"

exampleSite/config/_default/languages.toml

@@ -0,0 +1,7 @@
+# Uncomment this file to enable multilanguage site support
+
+#[en]
+#languageName = "English"
+#languagedirection = "ltr"
+#title = "Example Site"
+#weight = 1

exampleSite/config/_default/markup.toml

@@ -0,0 +1,17 @@
+# Markdown renderer configuration
+[goldmark.renderer]
+unsafe = false
+
+[tableOfContents]
+endLevel = 4
+ordered = true
+startLevel = 2
+
+[highlight]
+noClasses = false
+codeFences = true
+guessSyntax = true
+lineNoStart = 1
+lineNos = true
+lineNumbersInTable = true
+tabWidth = 4

exampleSite/config/_default/menu.toml

@@ -0,0 +1,39 @@
+# Configure main menu and social menu
+[[main]]
+identifier = "home"
+name = "Home"
+url = "/"
+[main.params]
+icon = "home"
+newtab = true
+
+[[main]]
+    identifier = "others"
+    name = "Others"
+    # parent menu uses icon arrow-down
+
+# submenu
+[[main]]
+    parent = "others"
+    identifier = "rss"
+    name = "rss"
+    url = "index.xml"
+    [main.params]
+        icon = "rss"
+        newtab = true
+
+[[social]]
+identifier = "github"
+name = "GitHub"
+url = "https://github.com/CaiJimmy/hugo-theme-stack"
+
+[social.params]
+icon = "brand-github"
+
+[[social]]
+identifier = "twitter"
+name = "Twitter"
+url = "https://twitter.com"
+
+[social.params]
+icon = "brand-twitter"

exampleSite/config/_default/module.toml

@@ -0,0 +1,2 @@
+[[imports]]
+path = "github.com/CaiJimmy/hugo-theme-stack/v3"

exampleSite/config/_default/params.toml

@@ -0,0 +1,148 @@
+# Pages placed under these sections will be shown on homepage and archive page.
+mainSections = ["post"]
+# Output page's full content in RSS.
+rssFullContent = true
+
+[footer]
+since = 2020
+customText = ""
+
+[dateFormat]
+published = "Jan 02, 2006"
+lastUpdated = "Jan 02, 2006 15:04 MST"
+
+[sidebar]
+emoji = "🍥"
+subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+
+[sidebar.avatar]
+enabled = true
+local = true
+src = "img/avatar.png"
+
+[article]
+math = false
+readingTime = true
+
+[article.license]
+enabled = true
+default = "Licensed under CC BY-NC-SA 4.0"
+
+## Widgets
+[[widgets.homepage]]
+type = "search"
+
+[[widgets.homepage]]
+type = "archives"
+
+[widgets.homepage.params]
+limit = 5
+
+[[widgets.homepage]]
+type = "categories"
+
+[widgets.homepage.params]
+limit = 10
+
+[[widgets.homepage]]
+type = "tag-cloud"
+
+[widgets.homepage.params]
+limit = 10
+
+[[widgets.page]]
+type = "toc"
+
+[opengraph.twitter]
+site = ""
+card = "summary_large_image"
+
+[defaultImage.opengraph]
+enabled = false
+local = false
+src = ""
+
+[colorScheme]
+toggle = true
+default = "auto"
+
+[imageProcessing.cover]
+enabled = true
+
+[imageProcessing.content]
+enabled = true
+
+## Comments
+[comments]
+enabled = true
+provider = "disqus"
+
+[comments.disqusjs]
+shortname = ""
+apiUrl = ""
+apiKey = ""
+admin = ""
+adminLabel = ""
+
+[comments.utterances]
+repo = ""
+issueTerm = "pathname"
+label = ""
+
+[comments.remark42]
+host = ""
+site = ""
+locale = ""
+
+[comments.vssue]
+platform = ""
+owner = ""
+repo = ""
+clientId = ""
+clientSecret = ""
+autoCreateIssue = false
+
+[comments.waline]
+serverURL = ""
+lang = ""
+visitor = ""
+avatar = ""
+emoji = ["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"]
+requiredMeta = ["name", "email", "url"]
+placeholder = ""
+
+[comments.waline.locale]
+admin = "Admin"
+
+[comments.twikoo]
+envId = ""
+region = ""
+path = ""
+lang = ""
+
+[comments.cactus]
+defaultHomeserverUrl = "https://matrix.cactus.chat:8448"
+serverName = "cactus.chat"
+siteName = ""
+
+[comments.giscus]
+repo = ""
+repoID = ""
+category = ""
+categoryID = ""
+mapping = ""
+lightTheme = ""
+darkTheme = ""
+reactionsEnabled = 1
+emitMetadata = 0
+
+[comments.gitalk]
+owner = ""
+admin = ""
+repo = ""
+clientID = ""
+clientSecret = ""
+
+[comments.cusdis]
+host = ""
+id = ""

exampleSite/config/_default/permalinks.toml

@@ -0,0 +1,3 @@
+# Permalinks format of each content section
+post = "/p/:slug/"
+page = "/:slug/"

exampleSite/config/_default/related.toml

@@ -0,0 +1,12 @@
+# Related contents configuration
+includeNewer = true
+threshold = 60
+toLower = false
+
+[[indices]]
+name = "tags"
+weight = 100
+
+[[indices]]
+name = "categories"
+weight = 200

layouts/partials/sidebar/left.html

@@ -60,19 +60,41 @@
     <ol class="menu" id="main-menu">
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
-        {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
-        <li {{ if $active }} class='current' {{ end }}>
-            <a href='{{ .URL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
-                {{ $icon := default .Pre .Params.Icon }}
-                {{ if .Pre }}
-                    {{ warnf "Menu item [%s] is using [pre] field to set icon, please use [params.icon] instead.\nMore information: https://stack.jimmycai.com/config/menu" .URL }}
-                {{ end }}
-                {{ with $icon }}
-                    {{ partial "helper/icon" . }}
-                {{ end }}
-                <span>{{- .Name -}}</span>
-            </a>
-        </li>
+            {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
+            {{ if .HasChildren }}
+                <li class="dropdown">
+                    <a class="dropdown-header">
+                        {{ partial "helper/icon" "arrow-down" }}
+                        <span>{{ .Name }}</span>
+                    </a>
+                    <ul class="dropdown-content">
+                        {{ range .Children }}
+                            <li class="dropdown-item {{ if eq $currentPage.RelPermalink .URL }} current {{ end }}">
+                                <a href='{{ .URL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
+                                    {{ $icon := default .Pre .Params.Icon }}
+                                    {{ with $icon }}
+                                        {{ partial "helper/icon" . }}
+                                    {{ end }}
+                                    <span>{{- .Name -}}</span>
+                                </a>
+                            </li>
+                        {{ end }}
+                    </ul>
+                </li>
+            {{ else }}
+                <li {{ if $active }} class='current' {{ end }}>
+                    <a href='{{ .URL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
+                        {{ $icon := default .Pre .Params.Icon }}
+                        {{ if .Pre }}
+                            {{ warnf "Menu item [%s] is using [pre] field to set icon, please use [params.icon] instead.\nMore information: https://docs.stack.jimmycai.com/configuration/custom-menu.html" .URL }}
+                        {{ end }}
+                        {{ with $icon }}
+                            {{ partial "helper/icon" . }}
+                        {{ end }}
+                        <span>{{- .Name -}}</span>
+                    </a>
+                </li>
+            {{ end }}
         {{ end }}
         <li class="menu-bottom-section">
             <ol class="menu">