adds submenu capability

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 exampleSite/themes
 yarn.lock
+/exampleSite/.hugo_build.lock

assets/js/bootstrap.min.js.LICENSE.txt

@@ -0,0 +1,73 @@
+/*!
+  * Bootstrap dropdown.js v4.6.2 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap popover.js v4.6.2 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap tooltip.js v4.6.2 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap util.js v4.6.2 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+ * Sizzle CSS Selector Engine v2.3.6
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2021-02-16
+ */
+
+/*!
+ * jQuery JavaScript Library v3.6.1
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2022-08-26T17:52Z
+ */
+
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.16.1
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */

assets/js/fontawesome.min.js.LICENSE.txt

@@ -0,0 +1,4 @@
+/*!
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */

exampleSite/config.toml

@@ -3,6 +3,7 @@
 baseurl = "https://example.org/"
 languageCode = "en-us"
 title = "Hugo Bootstrap v4 Blog"
+themesDir = "../.."
 theme = "hugo-theme-bootstrap4-blog"
 # number of posts to show on home/category/tag pages (Default: 10)
 paginate = 5
@@ -25,10 +26,18 @@ summaryLength = 50
   name = "Link 2"
   url = "https://example.org"
 
-#[[menu.navbar]]
-#  name = "Link 1"
-#  url = "https://example.org"
+[[menu.navbar]]
+  name = "Link 1"
+  pageref = "creating-a-new-theme"
 
+[[menu.navbar]]
+  name = "Sub"
+  identifier = "sub"
+
+[[menu.navbar]]
+  name = "Link 2"
+  parent = "sub"
+  pageref = "goisforlovers"
 
 # Theme variables
 #

layouts/_default/baseof.html

@@ -43,14 +43,32 @@
     {{ block "masthead" . }}
     <div class="blog-masthead">
       <div class="container">
-        <nav class="nav blog-nav">
-          <a class="nav-link {{ if .IsHome }}active{{ end }}" href="{{ .Site.BaseURL | absLangURL }}">{{ i18n "home" }}</a>
-          {{- $currentPage := . -}}
-          {{ range .Site.Menus.navbar }}
-          {{ $menuURL := .URL | absLangURL }}
-          <a class="nav-link{{ if or ($currentPage.IsMenuCurrent "navbar" .) ($currentPage.HasMenuCurrent "navbar" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
-          {{ end }}
-        </nav>
+          <nav class="navbar navbar-dark navbar-expand">
+              <ul class="navbar-nav">
+                  <li class="nav-item {{ if .IsHome }}active{{ end }}">
+                      <a class="nav-link {{ if .IsHome }}active{{ end }}" href="{{ .Site.BaseURL | absLangURL }}">{{ i18n "home" }}</a>
+                  </li>
+                  {{ $currentPage := . }}
+                  {{ range .Site.Menus.navbar }}
+                  {{ if .HasChildren }}
+                  <li class="nav-item dropdown{{ if or ($currentPage.IsMenuCurrent "navbar" .) ($currentPage.HasMenuCurrent "navbar" .) }} active{{end}}">
+                      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
+                          {{ .Name }}
+                      </a>
+                      <div class="dropdown-menu">
+                          {{ range .Children }}
+                          <a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a>
+                          {{ end }}
+                      </div>
+                  </li>
+                  {{ else }}
+                  <li class="nav-item{{ if or ($currentPage.IsMenuCurrent "navbar" .) ($currentPage.HasMenuCurrent "navbar" .) }} active{{end}}">
+                    <a class="nav-link{{ if or ($currentPage.IsMenuCurrent "navbar" .) ($currentPage.HasMenuCurrent "navbar" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+                  </li>
+                  {{ end }}
+                  {{ end }}
+              </ul>
+          </nav>
       </div>
     </div>
     {{ end }}
@@ -98,6 +116,9 @@
     </footer>
     {{ end }}
 
+      {{ "<!-- bundled bootstrap -->" | safeHTML }}
+      {{ $bootstrap := resources.Get "js/bootstrap.min.js" | resources.Fingerprint }}
+      <script defer src="{{ $bootstrap.Permalink }}" integrity="{{ $bootstrap.Data.Integrity }}" crossorigin="anonymous"></script>
   </body>
 
 </html>

package.json

@@ -22,10 +22,13 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "jquery": "^3.6.1",
+    "popper.js": "^1.16.1",
     "bootstrap": "^4.6.0",
     "clean-css-cli": "^5.4.1",
     "rtlcss": "^3.3.0",
     "sass": "^1.43.2",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.9.1"
   }
 }

source/js/bootstrap.js

@@ -0,0 +1,13 @@
+//import {} from 'bootstrap/js/dist/alert'
+//import {} from 'bootstrap/js/dist/button'
+//import {} from 'bootstrap/js/dist/carousel'
+//import {} from 'bootstrap/js/dist/collapse'
+import {} from 'bootstrap/js/dist/dropdown'
+//import {} from 'bootstrap/js/dist/index'
+//import {} from 'bootstrap/js/dist/modal'
+import {} from 'bootstrap/js/dist/popover'
+//import {} from 'bootstrap/js/dist/scrollspy'
+//import {} from 'bootstrap/js/dist/tab'
+//import {} from 'bootstrap/js/dist/toast'
+//import {} from 'bootstrap/js/dist/tooltip'
+//import {} from 'bootstrap/js/dist/util'

source/scss/bootstrap.scss

@@ -18,7 +18,7 @@
 @import "../../node_modules/bootstrap/scss/forms";
 @import "../../node_modules/bootstrap/scss/buttons";
 //@import "../../node_modules/bootstrap/scss/transitions";
-//@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/dropdown";
 //@import "../../node_modules/bootstrap/scss/button-group";
 //@import "../../node_modules/bootstrap/scss/input-group";
 //@import "../../node_modules/bootstrap/scss/custom-forms";
@@ -37,7 +37,7 @@
 //@import "../../node_modules/bootstrap/scss/toasts";
 //@import "../../node_modules/bootstrap/scss/modal";
 //@import "../../node_modules/bootstrap/scss/tooltip";
-//@import "../../node_modules/bootstrap/scss/popover";
+@import "../../node_modules/bootstrap/scss/popover";
 //@import "../../node_modules/bootstrap/scss/carousel";
 //@import "../../node_modules/bootstrap/scss/spinners";
 @import "../../node_modules/bootstrap/scss/utilities";

webpack.config.js

@@ -1,10 +1,13 @@
 const path = require('path');
 
 module.exports = {
-    entry: './source/js/fontawesome.js',
+    entry: {
+        fontawesome: ['./source/js/fontawesome.js'],
+        bootstrap: ['./source/js/bootstrap.js']
+    },
     output: {
             path: path.resolve(__dirname, 'assets/js'),
-            filename: 'fontawesome.min.js'
+            filename: '[name].min.js'
           },
     mode: 'production'
 };