added dropdown menu functionality for multilevel navigation

[CFaught]

No description provided.

[pacollins]

Make sure to style it in the mobile pop-out menu as well. Check your site on mobile.

[CFaught]

I was going to leave the list indented and remove the bullets, is that good or do you think the theme should have an accordion like feature for the side menu?

[pacollins]

config.toml - Great, logical UX.

navbar.html - I think that the dropdown should reflect what it is doing. site.com/parent/child/ And with that, the link for parent would be site.com/parent instead of #. With that, I'm not sure on whether the sidebar should be a drop down menu or not. I think for longevity, it needs to be a drop down in case someone has a lot of children to the parent menu.

main.css - I think there needs to be some kind of bordering/shadow or something to set it apart from the rest of the content

Thanks for working on this while I work on getting the multilingual going!

[pacollins]

@CFaught - Any progress on this? If not, I will make the changes.

[CFaught]

The repo should have everything except the collapsing side-menu items and shadowing. Sorry, I've been busy and haven't finished this, but I can probably do this tomorrow.

[pacollins]

@CFaught - No rush. Was just checking in on it!

[daspiras]

Thank you for this. However, this technique prevents you from easily using a fontawesome icon in a parent menu, so I also think moving the fontawesome code to another variable (I used pre) is better since the identifier variable is technically supposed to be a unique ID for each menu item. This allows use of fontawesome icons at any level, including duplicates.

I also agree with @pacollins that the parent should link to a valid URL, which is what I did:

<li>
      {{ if .HasChildren }}
        <a class="dropdown" href="{{ .URL }}"><i class="{{ .Pre }}">&nbsp;</i>{{ .Name }}</a>
                        <ul class="dropdown-content">
                                 {{ range .Children }}
                                         <li><a href="{{ .URL }}"><i class="{{ .Pre }}">&nbsp;</i>{{ .Name }}</a></li>
                                 {{ end }}
                         </ul>
       {{ else }}
            <a href="{{ .URL }}"><i class="{{ .Pre}}">&nbsp;</i>{{ .Name }}</a>
       {{ end  }}
</li>