The Nav.Msg handles menu related messages.

Keep this one in your Model, it holds the current navigation state.

The default way of instantiating a Nav.State.

Nav.stateInit renderConfig

Force the menu to be closed on the Nav.State.

Nav.stateInitWithClosedMenu renderConfig

Given a message, apply an update to the Nav.State.

The Nav.Navigator handles menu, dialogs and page viewing. It must be initialized using Nav.navigator.

Nav.navigator holds the minimum amount of information required for all the features (menu, dialogs, and page's layout) to work.

The first parameter is a function that should transform Nav.Msg in a message type controlled by the user.

The second is the current Nav.State, do not initialize this on view, hold it on the app's model, and then pass it to this function.

The third (and last) parameter is a lambda used to obtain the current page's container.

Nav.Navigator Msg.FromNav
    model.navState
    (\page ->
        case page of
            Page.CardsEdit ->
                Pages.CardsEdit.View.container


            Page.AccountProfile ->
                Pages.AcountProfile.View.container
    )

The Nav.Container msg describes the current page in its current state.

The title field is exposed as to the browser and reused on the mobile's navbar.

When it is Just someElement, the dialog field is shown over the page.

The hasMenu field can hide the menu when undesired, e.g., login page.

The content field must be the element holding the page's view.

{ content = Nav.contentSingle <| Element.el [] [ Element.text "Element body" ]
, title = "Example page"
, dialog = Nothing -- or Just <| Nav.dialog <| ...
, hasMenu = True
}

Transform the messages produced by a container.

The Nav.Content msg manages different kinds of pages' body. By now, the content is either a typical single page or a stacked child of mobile's views.

The typical single page renders the way they come. The stacked child has a different header on mobile, where a back button replaces the sandwich button.

Nav.contentSingle indicates that the current page is a simple single page. It expects the final page's view in the only parameter.

Nav.contentSingle <| view renderConfig model

Stacked children are typical on mobile. The most significant difference is they have a customizable navbar where a back button replaces the sandwich menu, allowing the user to return to a higher scope. Besides that, they can add custom buttons to the right side of the title.

This record holds a stack child's configuration. That includes the back button's message, a title which overwrites the main page's title, and the customized buttons.

{ title = "Edit: Card " ++ selectedCard.number
, buttons =
    [ Icon.print "Print card"
        |> Button.fromIcon
        |> Button.cmd (Msg.PrintCard selectedCard) Button.light
    ]
, goBackMsg = Msg.DiscardCardChanges
}

Nav.contentStackChild indicates that the current page is a stack child's page. It expects the child's configuration and the final page's view as its parameters.

Nav.contentStackChild
    { title = "Edit: Card " ++ selectedCard.number
    , buttons =
        [ Icon.print "Print card"
            |> Button.fromIcon
            |> Button.cmd (Msg.PrintCard selectedCard) Button.light
        ]
    , goBackMsg = Msg.DiscardCardChanges
    }
<|
    cardEditView renderConfig selectedCard

Nav.withMenuLogo replaces the logo shown on the menu. By now, this logo is only visible at the desktop's sidebar.

The first parameter is a hint that exists for accessibility reasons.

Nav.withMenuLogo "Paack - Time Matters"
    Vectors.paackLogoWhite
    someNav

Nav.withMenuActions replaces the list of the menu's actions. Therefore changing the list of items showed at the bottom of the sidebar.

Nav.withMenuActions
    [ Nav.menuAction
        (Icon.language "Change to English")
        (Msg.SetLanguage Lang.English)
    , Nav.menuAction
        (Icon.logout "Logout")
        Msg.SessionLogout
    ]
    someNav

This record must be generated with Nav.menuAction

Nav.menuPage describes an action to Nav.withMenuActions.

Nav.menuAction
    (Icon.logout "Logout")
    Msg.SessionLogout

Nav.withMenuPages replaces the list of the menu's navigable pages. Therefore changing the list of items showed at the top of the sidebar.

Nav.withMenuPages
    [ Nav.menuPage (Icon.edit "Manage cards")
        (Link.link "/edit-cards")
        (currentPage == Page.CardsEdit)
    , Nav.menuPage (Icon.add "New manager")
        (Link.link "/add-manager")
        (currentPage == Page.ManagerAdd)
    ]
    someNav

This record must be generated with Nav.menuPage

Nav.menuPage describes a page to Nav.withMenuPages.

Nav.menuPage (Icon.edit "Edit cards")
    (Link.link "/edit-cards")
    (currentPage == Pages.CardsEdit)

Nav.withSidebarStyle takes a SidebarStyle setting the appearance/behavior of the sidebar when it is enabled by the hasMenu flag.

Persistent style of the sidebar. It occupies more space when open pushing the content right.

Non-persistent style of the sidebar. Like the mobile sidebar, this style makes the sidebar open over the content with an overlay behind it.

The Nav.Dialog msg is a record holding the description of a dialog. See Nav.dialog to see how to create a dialog.

Nav.dialog constructs a Nav.Dialog from a title, a close message, and the dialog's view. Note that the title renders inside the dialog's decoration, with a close button on the opposite side.

This dialog and its decoration render over the current page's view, adding a transparent black layer between them. Clicking on the black layer also activates the closing message.

Nav.dialog
    "Create a new card"
    Msg.NewCardDiscard
    (cardNewView model)

Note: This is deprecated, use 'Nav.dialogV2' instead

`Nav.dialogV2` constructs a [`Nav.Dialog`](#Dialog) from dialog v2.
This variant of the dialog does not require you to specify body at the time
of construction and you can specify it alongside buttons as an option
like this:


Dialogv2.dialog "An example dialog" Icon.warning closeMsg
    |> Dialogv2.withBody (Element.text "Dialog body")
    |> Dialogv2.withButtons [submitButton, cancleButton]
    |> dialogV2

End of the builder's life. The result of this function is a ready-to-use Browser.Document.

There is an additional parameter that is the page identifier, used to obtain the current container.

Nav.toBrowserDocument renderConfig currentPage navigator