Extended navbar configuration (v1.12.0)

[markdumay]

Hinode v1.12.0 introduces several enhancements of the navbar. In addition, the code has been refactored to improve maintainability. Finally, several site configuration settings are now grouped together. As a result, you might encounter some deprecation warnings. The changes and enhancements are listed below.

Use a toggle or switch for the color mode

You can now alternate between a switch or a toggle element to change the site's color mode. By default, Hinode uses a switch element. Add the following configuration to your site's parameters to change this into a toggle instead:

[main.colorMode]
    toggle = true

Mobile device enhancemens

The navbar is now rendered as fullscreen when in collapsed state. It also includes scroll support when your navbar stretches beyond the viewport. You can also adjust the font size of the menu items in collapsed state. The available sizes are [1..6], similar to the size of the headings [h1..h6]. By default, Hinode uses font size 6 (regular text) for all menu items. To enlarge the font size on small devices (such as mobile phones), you can set fontsizeCollapsed in the site's parameters:

[navigation]
    fontsizeCollapsed = 2

Custom controls

In addition to the default controls such as a language toggle, color mode selector, and a search toggle, you can now add custom controls yourself. For example, to add a user profile powered by Hanko, you can add the following menu configuration:

[[main]]
  name = "Profile"
  pre = "fa circle-user"
  weight = 40
  [main.params]
    icon = true
    control = true

[[main]]
  name = "User Profile"
  parent = "Profile"
  weight = 10
  [[main.params]]
    modal = "#profile-modal"

[[main]]
  name = "Logout"
  parent = "Profile"
  weight = 20
  [[main.params]]
    id = "logout-link"

The above configuration adds a user icon to the right-hand side of the navbar. It toggles a dropdown menu that contains a link to a user profile and a logout link. The modal form is mounted by the Hanko module in the content/_modals folder. The logout-link is an id recognized by the same module to trigger a logout action in JavaScript.

Configurable icons

All used icons are now fully configurable to enable customization. The following icons are available:

    [main.colorMode]
        iconLight = "fas sun"
        iconDark = "fas moon"
    [navigation.language]
        icon = "fas globe"
    [navigation.search]
        icon = "fas magnifying-glass"