main nav works, update readme

4 files changed, 38 insertions, 6 deletions

diff --git a/README.md b/README.md
index 7217d27..59bd126 100644
--- a/README.md
+++ b/README.md
@@ -51,9 +51,17 @@ Some theme features can be configured in `config.toml`. Here are the options:
 
 The theme includes three menu locations: `main`, `social` and `footer`.
 
-You can include pages in the `main` and `footer` menus using any of Hugo's documented methods.
+You can include pages in the `main` and `footer` menus using any of Hugo's [documented methods]().
 
-The social menu can be configured in `config.toml` using this example:
+Sub menus work one level deep. For example, in your frontmatter:
+
+```yaml
+menu:
+  main:
+    parent: "About Hugo"
+```
+
+The social menu can be configured in `config.toml` following this example:
 
 ```toml
 [menu]
@@ -89,5 +97,4 @@ The asynchronous tracking script will be included on pages on the live server, b
 
 ## Roadmap
 
-- [ ] Navigation menu dropdowns
 - [ ] Include search via Lunr or Fuse
\ No newline at end of file
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 8d22076..02fa5a0 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -76,4 +76,9 @@ $color__border-abbr: #666;
 .navigation.pagination svg {
   width: 22px;
   height: 22px;
+}
+
+.main-navigation .main-menu>li.menu-item-has-children .submenu-expand svg {
+  width: 24px;
+  height: 24px;
 }
\ No newline at end of file
diff --git a/layouts/partials/header/site-branding.html b/layouts/partials/header/site-branding.html
index 0e020a8..b4c8e94 100644
--- a/layouts/partials/header/site-branding.html
+++ b/layouts/partials/header/site-branding.html
@@ -14,9 +14,25 @@
       <ul id="menu-main" class="main-menu">
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
-        <li class="menu-item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
-          <a href="{{ .URL }}">{{ .Name }}</a>
-        </li>
+          {{ if .HasChildren }}
+            <li class="menu-item menu-item-has-children {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+              <a href="{{ .URL }}" aria-haspopup="true" aria-expanded="false">{{ .Name }}</a>
+              <button class="submenu-expand" tabindex="-1">
+                {{ partial "icons/ui/keyboard-arrow-down" }}
+              </button>
+              <ul class="sub-menu">
+                  {{ range .Children }}
+                    <li class="menu-item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+                      <a href="{{ .URL }}">{{ .Name }}</a>
+                    </li>
+                  {{ end }}
+                </ul>
+            </li>
+          {{ else }}
+            <li class="menu-item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+              <a href="{{ .URL }}">{{ .Name }}</a>
+            </li>
+          {{ end }}
         {{ end }}
       </ul>
     </div>
diff --git a/layouts/partials/icons/ui/keyboard-arrow-down.html b/layouts/partials/icons/ui/keyboard-arrow-down.html
new file mode 100644
index 0000000..f11f974
--- /dev/null
+++ b/layouts/partials/icons/ui/keyboard-arrow-down.html
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
+	<path fill="none" d="M0 0h24v24H0V0z"></path>
+</svg>
\ No newline at end of file