nathanjohnson320 / elm-ui-components / ElmUIC.Navbar

A styled navbar


type alias Navbar =
{ kind : ElmUIC.Theme.ColorSetting
, size : ElmUIC.Theme.Size
, text : Css.Color
, title : String
, redirectHome : Basics.Bool 
}

Base model for a navbar

defaultNavbar : Navbar

Instantiates the default properties of a nav

{ defaultNavbar | title = "Hello, world!" }

item : ElmUIC.Theme.Theme -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

An inidivual item in the navbar

item defaultTheme [] [ text "Click me!" ]

separator : ElmUIC.Theme.Theme -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

A vertical separator to place between items

item defaultTheme [] [ text "One!" ]
        , separator defaultTheme [] []
        , item defaultTheme [] [ text "Two!" ]

navbar : ElmUIC.Theme.Theme -> Navbar -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

A styled nav using items and separators

navbar defaultTheme
    { defaultNavbar | title = "Hello, WORLD" }
    [ css [ width (px 600) ] ]
    [ item defaultTheme [] [ text "One" ]
    , separator defaultTheme [] []
    , item defaultTheme [] [ text "Two" ]
    , separator defaultTheme [] []
    , item defaultTheme [] [ text "Three" ]
    ]