Add icon and description parameters for menu

assets/main/scss/_top-app-bar.scss

@@ -54,6 +54,39 @@
       padding-left: 2.25rem;
     }
   }
+
+  .dropdown-item {
+    --#{$prefix}dropdown-item-padding-y: 0.5rem;
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus {
+      .dropdown-item-icon {
+        .svg-inline--fa {
+          color: var(--#{$prefix}primary);
+        }
+      }
+
+      .dropdown-item-description {
+        color: rgba(255,255,255, 0.7) !important;
+      }
+    }
+  }
+
+  .dropdown-item-icon {
+    background-color: var(--#{$prefix}secondary-bg);
+  }
+
+  .dropdown-item-description {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
 }
 
 @if not $colored-top-app-bar-in-dark {

exampleSite/config/_default/config.toml

@@ -1,5 +1,5 @@
 baseURL = "https://example.com"
-title = "Hugo Theme Bootstrap Docs v1"
+title = "HBS (Hugo Theme Bootstrap) v1"
 # theme = "hugo-theme-bootstrap" # install via git submodule
 theme = "github.com/razonyang/hugo-theme-bootstrap" # install via hugo module
 copyright = "Copyright © 2016-{year} Razon Yang. All Rights Reserved."

exampleSite/config/_default/menu.toml

@@ -1,47 +1,58 @@
 [[main]]
   identifier = "home"
   name = "Home"
-  pre = '<i class="fas fa-home me-1"></i>'
   weight = 1
   url = "https://hbs.razonyang.com/"
+  [main.params]
+    icon = '<i class="fas fa-home"></i>'
 [[main]]
   identifier = "blog"
   name = "Blog"
-  pre = '<i class="fas fa-fw fa-blog me-1"></i>'
   weight = 2
+  [main.params]
+    icon = '<i class="fas fa-fw fa-blog"></i>'
 [[main]]
   name = "Support"
   identifier = "support"
-  pre = '<i class="fas fa-fw fa-info-circle me-1"></i>'
   weight = 40
+  [main.params]
+    description = 'The HBS Support Community'
+    icon = '<i class="fas fa-fw fa-info-circle"></i>'
 [[main]]
   name = "Repository"
   identifier = "repository"
   parent = "support"
-  pre = '<i class="fab fa-fw fa-github me-1"></i>'
   url = "https://github.com/razonyang/hugo-theme-bootstrap"
   weight = 1
+  [main.params]
+    icon = '<i class="fab fa-fw fa-github text-primary"></i>'
 [[main]]
   name = "Discussions"
   identifier = "discussions"
   parent = "support"
-  pre = '<i class="fas fa-fw fa-comments me-1"></i>'
   url = "https://github.com/razonyang/hugo-theme-bootstrap/discussions/new"
   weight = 2
+  [main.params]
+    description = "Ask and discuss questions with others."
+    icon = '<i class="fas fa-fw fa-comments text-success"></i>'
 [[main]]
   name = "Features Request"
   identifier = "feature-request"
-  pre = '<i class="fas fa-fw fa-lightbulb me-1"></i>'
   parent = "support"
   url = "https://github.com/razonyang/hugo-theme-bootstrap/issues/new?template=feature_request.yml"
   weight = 3
+  [main.params]
+    description = "Suggest new or updated features."
+    icon = '<i class="fas fa-fw fa-lightbulb text-warning"></i>'
 [[main]]
   name = "Bug Report"
   identifier = "bug-report"
   parent = "support"
-  pre = '<i class="fas fa-fw fa-bug me-1"></i>'
   url = "https://github.com/razonyang/hugo-theme-bootstrap/issues/new?template=bug_report.yml"
   weight = 3
+  [main.params]
+    description = "Tell us about a bug or issue."
+    icon = '<i class="fas fa-fw fa-bug text-danger"></i>'
 [[main]]
   parent = "support"
   weight = 4
@@ -58,28 +69,32 @@
   parent = "support"
   url = "https://github.com/razonyang/hugo-theme-bootstrap"
   weight = 1
-  pre = '<i class="fab fa-fw fa-github me-1"></i>'
+  [footer.params]
+    icon = '<i class="fab fa-fw fa-github text-primary"></i>'
 [[footer]]
   name = "Discussions"
   identifier = "discussions"
   parent = "support"
   url = "https://github.com/razonyang/hugo-theme-bootstrap/discussions/new"
   weight = 2
-  pre = '<i class="fas fa-fw fa-comments me-1"></i>'
+  [footer.params]
+    icon = '<i class="fas fa-fw fa-comments text-success"></i>'
 [[footer]]
   name = "Features Request"
   identifier = "feature-request"
   parent = "support"
-  pre = '<i class="fas fa-fw fa-lightbulb me-1"></i>'
   url = "https://github.com/razonyang/hugo-theme-bootstrap/issues/new?template=feature_request.md"
   weight = 3
+  [footer.params]
+    icon = '<i class="fas fa-fw fa-lightbulb text-warning"></i>'
 [[footer]]
   name = "Bug Report"
   identifier = "bug-report"
   parent = "support"
-  pre = '<i class="fas fa-fw fa-bug me-1"></i>'
   url = "https://github.com/razonyang/hugo-theme-bootstrap/issues/new?template=bug_report.md"
   weight = 4
+  [footer.params]
+    icon = '<i class="fas fa-fw fa-bug text-danger"></i>'
 
 [[footer]]
   name = "Docs"

exampleSite/config/_default/params.toml

@@ -11,7 +11,7 @@ keywords = "Hugo, Bootstrap, Blog Theme"
 
 # logo = "images/logo.png" # Logo image. Default to "images/logo.webp".
 # logo = false # Disable Logo
-brand = "Docs v1"
+brand = "HBS v1"
 
 palette = "purple" # Default palette. Optional. You'll need to clear the browser cache after modifying this.
 # palettes = ["blue", "blue gray", "purple"] # Available palettes. Default to ALL.

exampleSite/content/archives/_index.fr.md

@@ -3,5 +3,6 @@ title = "Archives"
 [menu.main]
   parent = "blog"
   weight = 1
-  pre = '<i class="fas fa-fw fa-archive me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-archive"></i>'
 +++

exampleSite/content/archives/_index.ja.md

@@ -3,5 +3,6 @@ title = "アーカイブ"
 [menu.main]
   parent = "blog"
   weight = 1
-  pre = '<i class="fas fa-fw fa-archive me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-archive"></i>'
 +++

exampleSite/content/archives/_index.md

@@ -3,5 +3,6 @@ title = "Archives"
 [menu.main]
   parent = "blog"
   weight = 1
-  pre = '<i class="fas fa-fw fa-archive me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-archive"></i>'
 +++

exampleSite/content/archives/_index.zh-hans.md

@@ -3,5 +3,6 @@ title = "归档"
 [menu.main]
   parent = "blog"
   weight = 1
-  pre = '<i class="fas fa-fw fa-archive me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-archive"></i>'
 +++

exampleSite/content/archives/_index.zh-hant.md

@@ -3,5 +3,6 @@ title = "歸檔"
 [menu.main]
   parent = "blog"
   weight = 1
-  pre = '<i class="fas fa-fw fa-archive me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-archive"></i>'
 +++

exampleSite/content/authors/_index.ja.md

@@ -3,5 +3,6 @@ title = "著者"
 [menu.main]
   parent = "blog"
   weight = 5
-  pre = '<i class="fas fa-fw fa-user me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-user"></i>'
 +++

exampleSite/content/authors/_index.md

@@ -3,5 +3,6 @@ title = "Authors"
 [menu.main]
   parent = "blog"
   weight = 5
-  pre = '<i class="fas fa-fw fa-user me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-user"></i>'
 +++

exampleSite/content/authors/_index.zh-hans.md

@@ -3,5 +3,6 @@ title = "作者"
 [menu.main]
   parent = "blog"
   weight = 5
-  pre = '<i class="fas fa-fw fa-user me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-user"></i>'
 +++

exampleSite/content/authors/_index.zh-hant.md

@@ -3,5 +3,6 @@ title = "作者"
 [menu.main]
   parent = "blog"
   weight = 5
-  pre = '<i class="fas fa-fw fa-user me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-user"></i>'
 +++

exampleSite/content/categories/_index.fr.md

@@ -3,5 +3,6 @@ title = "Catégories"
 [menu.main]
   parent = "blog"
   weight = 3
-  pre = '<i class="fas fa-fw fa-folder me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-folder"></i>'
 +++

exampleSite/content/categories/_index.ja.md

@@ -3,5 +3,6 @@ title = "カテゴリ"
 [menu.main]
   parent = "blog"
   weight = 3
-  pre = '<i class="fas fa-fw fa-folder me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-folder"></i>'
 +++

exampleSite/content/categories/_index.md

@@ -3,5 +3,6 @@ title = "Categories"
 [menu.main]
   parent = "blog"
   weight = 3
-  pre = '<i class="fas fa-fw fa-folder me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-folder"></i>'
 +++

exampleSite/content/categories/_index.zh-hans.md

@@ -3,5 +3,6 @@ title = "分类"
 [menu.main]
   parent = "blog"
   weight = 3
-  pre = '<i class="fas fa-fw fa-folder me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-folder"></i>'
 +++

exampleSite/content/categories/_index.zh-hant.md

@@ -3,5 +3,6 @@ title = "分類"
 [menu.main]
   parent = "blog"
   weight = 3
-  pre = '<i class="fas fa-fw fa-folder me-1"></i>'
+  [menu.main.params]
+    icon = '<i class="fas fa-fw fa-folder"></i>'
 +++

exampleSite/content/contact/index.ja.md

@@ -4,5 +4,6 @@ layout = "contact"
 [menu.footer]
   parent = "support"
   weight = 6
-  pre = '<i class="fas fa-fw fa-info-circle me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-fw fa-info-circle"></i>'
 +++

exampleSite/content/contact/index.md

@@ -4,5 +4,6 @@ layout = "contact"
 [menu.footer]
   parent = "support"
   weight = 6
-  pre = '<i class="fas fa-fw fa-info-circle me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-fw fa-info-circle"></i>'
 +++

exampleSite/content/contact/index.zh-hans.md

@@ -4,5 +4,6 @@ layout = "contact"
 [menu.footer]
   parent = "support"
   weight = 6
-  pre = '<i class="fas fa-fw fa-info-circle me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-fw fa-info-circle"></i>'
 +++

exampleSite/content/contact/index.zh-hant.md

@@ -4,5 +4,6 @@ layout = "contact"
 [menu.footer]
   parent = "support"
   weight = 6
-  pre = '<i class="fas fa-fw fa-info-circle me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-fw fa-info-circle"></i>'
 +++

exampleSite/content/docs/configuration/_index.md

@@ -5,5 +5,6 @@ navWeight = 980
 [menu.footer]
   parent = "docs"
   weight = 2
-  pre = '<i class="fas fa-cog fa-fw me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-cog fa-fw"></i>'
 +++

exampleSite/content/docs/configuration/_index.zh-hans.md

@@ -5,5 +5,6 @@ navWeight = 980
 [menu.footer]
   parent = "docs"
   weight = 2
-  pre = '<i class="fas fa-cog fa-fw me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-cog fa-fw"></i>'
 +++

exampleSite/content/docs/configuration/_index.zh-hant.md

@@ -5,5 +5,6 @@ navWeight = 980
 [menu.footer]
   parent = "docs"
   weight = 2
-  pre = '<i class="fas fa-cog fa-fw me-1"></i>'
+  [menu.footer.params]
+    icon = '<i class="fas fa-cog fa-fw"></i>'
 +++

exampleSite/content/docs/configuration/menu/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Menu"
 date = 2021-12-16T17:25:20+08:00
-featured = false
+featured = true
 comment = true
 toc = true
 reward = true
@@ -43,6 +43,8 @@ This article will briefly introduce how to use the menus.
 | `post` | String | The trailing string after menu name.
 | `params` | Object | Menu parameters.
 | `params.divider` | Boolean | `true` means divider.
+| `params.icon` | String | The icon HTML.
+| `params.description` | String | The description for top app bar's dropdown menus only.
 
 See also [Menu Entry Properties](https://gohugo.io/variables/menus/).
 
@@ -55,47 +57,15 @@ See also [Menu Entry Properties](https://gohugo.io/variables/menus/).
 Let's take `main` menu as an example:
 
 ```toml
-[[main]]
-  name = "FooBar"
-  identifier = "foobar"
-  weight = 1
-  pre = '<i class="fas fa-fw fa-chevron-circle-down me-1"></i>'
-[[main]]
-  name = "Foo"
-  identifier = "foo"
-  parent = "foobar"
-  url = "https://github.com/razonyang/hugo-theme-bootstrap"
-  weight = 1
-[[main]]
-  parent = "foobar"
-  identifier = "foobar-divider"
-  weight = 2
-  [main.params]
-    divider = true
-[[main]]
-  name = "Bar"
-  identifier = "bar"
-  parent = "foobar"
-  url = "https://github.com/razonyang/hugo-theme-bootstrap/discussions/new"
-  weight = 3
+{{% code/menu-main-configuration %}}
 ```
 
-![Main Menus](images/main.png#center)
-
-As the image shown, we created a top level menu called `foobar`, that contains sub menus and divider.
-
 ### Front Matter
 
 We can also configure menu via page front matter.
 
 ```toml
-[menu.main]
-  parent = "support"
-  weight = 6
-[menu.footer]
-  parent = "support"
-  weight = 6
-  pre = '<i class="fas fa-fw fa-question-circle me-1"></i>'
+{{% code/menu-footer-configuration %}}
 ```
 
 The code snippet appends the page to the `main` and `footer` menu.