NoRedInk / noredink-ui / Nri.Ui.SideNav.V5

Patch changes:

Changes from V4

View

view : Config route msg -> List (NavAttribute msg) -> List (Entry route msg) -> Accessibility.Styled.Html msg


type alias Config route msg =
{ isCurrentRoute : route -> Basics.Bool
, routeToString : route -> String
, onSkipNav : msg 
}


type NavAttribute msg

collapsible : CollapsibleConfig msg -> NavAttribute msg


type alias CollapsibleConfig msg =
{ isOpen : Basics.Bool
, toggle : Basics.Bool -> msg
, isTooltipOpen : Basics.Bool
, toggleTooltip : Basics.Bool -> msg 
}

navLabel : String -> NavAttribute msg

Give screenreader users context on what this particular sidenav is for.

If the nav is collapsible, this value will also be used for the sidenav tooltips.

navId : String -> NavAttribute msg

navCss : List Css.Style -> NavAttribute msg

These styles are included automatically in the nav container:

[ flexBasis (px 300)
, flexShrink (num 0)
, borderRadius (px 8)
, backgroundColor Colors.gray96
, padding (px 20)
, marginRight (px 20)
]

navNotMobileCss : List Css.Style -> NavAttribute msg

navMobileCss : List Css.Style -> NavAttribute msg

navQuizEngineMobileCss : List Css.Style -> NavAttribute msg

Entries

entry : String -> List (EntryAttribute route msg) -> Entry route msg

entryWithChildren : String -> List (EntryAttribute route msg) -> List (Entry route msg) -> Entry route msg

html : List (Accessibility.Styled.Html msg) -> Entry route msg

compactGroup : String -> List GroupAttribute -> List (Entry route msg) -> Entry route msg

Add a labelled "group" of entries, typically taking the form of plain links.

SideNav.compactGroup "Resources"
    []
    [ SideNav.entry "Docs" [ SideNav.linkExternal "www.docs.com" ]
    , SideNav.entry "Examples" [ SideNav.linkExternal "www.examples.com" ]
    , SideNav.entry "Google" [ SideNav.linkExternal "www.google.com" ]
    ]


type Entry route msg

Use entry to create a sidebar entry.


type Attribute entryOrGroup msg


type alias EntryAttribute route msg =
Attribute (EntrySpecificConfic route msg) msg


type alias GroupAttribute =
Attribute {} Basics.Never

icon : Nri.Ui.Svg.V1.Svg -> Attribute entryOrGroup msg

rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute entryOrGroup msg

custom : List (Html.Styled.Attribute msg) -> Attribute entryOrGroup msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

css : List Css.Style -> Attribute entryOrGroup msg

nriDescription : String -> Attribute entryOrGroup msg

testId : String -> Attribute entryOrGroup msg

id : String -> Attribute entryOrGroup msg

Behavior

onClick : msg -> EntryAttribute route msg

href : route -> EntryAttribute route msg

linkSpa : route -> EntryAttribute route msg

Use this link for routing within a single page app.

This will make a normal tag, but change the Events.onClick behavior to avoid reloading the page.

See https://github.com/elm-lang/html/issues/110 for details on this implementation.

linkExternal : String -> EntryAttribute route msg

linkWithMethod : { method : String, url : route } -> EntryAttribute route msg

linkWithTracking : { track : msg, url : route } -> EntryAttribute route msg

linkExternalWithTracking : { track : msg, url : String } -> EntryAttribute route msg

Change the state

premiumDisplay : Nri.Ui.Data.PremiumDisplay.PremiumDisplay -> msg -> EntryAttribute route msg