|
module Nav exposing (..) |
|
|
|
import Html exposing (Html, div, a, span, i, ul, li, nav, button, text, form, input, header) |
|
import Html.Attributes exposing (class, id, href, placeholder, attribute, type') |
|
|
|
|
|
navbar : Html msg -> Html msg |
|
navbar links = |
|
header [] |
|
[ nav [ class "navbar navbar-default" ] |
|
[ div [ class "container-fluid" ] |
|
[ div [ class "navbar-header" ] |
|
[ mobileToggleButton |
|
, navbrand "#" "Brand" |
|
] |
|
, links |
|
] |
|
] |
|
] |
|
|
|
|
|
navbrand : String -> String -> Html msg |
|
navbrand url brandName = |
|
a [ class "navbar-brand", href url ] [ text brandName ] |
|
|
|
|
|
mobileToggleButton : Html msg |
|
mobileToggleButton = |
|
button [ type' "button", class "navbar-toggle collapsed", attribute "data-toggle" "collapse", attribute "data-target" "#bs-example-1", attribute "aria-expanded" "false" ] |
|
[ span [ class "sr-only" ] [ text "Toggle Navigation" ] |
|
, span [ class "icon-bar" ] [] |
|
, span [ class "icon-bar" ] [] |
|
, span [ class "icon-bar" ] [] |
|
] |
|
|
|
|
|
navbarLinks : Html msg |
|
navbarLinks = |
|
div [ class "collapse navbar-collapse", id "bs-example-navbar-collapse-1" ] |
|
[ ul |
|
[ class "nav navbar-nav" ] |
|
[ li [ class "active" ] [ a [ href "#" ] [ text "Link", span [ class "sr-only" ] [ text "(current)" ] ] ] |
|
, li [] [ a [ href "#" ] [ text "Link" ] ] |
|
, li [ class "dropdown" ] |
|
[ a [ href "#", class "dropdown-toggle", attribute "data-toggle" "dropdown", attribute "role" "button", attribute "aria-haspopup" "true", attribute "aria-expanded" "false" ] |
|
[ text "Dropdown", span [ class "caret" ] [] ] |
|
, ul [ class "dropdown-menu" ] |
|
[ li [] [ a [ href "#" ] [ text "Action" ] ] |
|
, li [] [ a [ href "#" ] [ text "Another action" ] ] |
|
, li [] [ a [ href "#" ] [ text "Something else here" ] ] |
|
, li [ attribute "role" "separator", class "divider" ] [] |
|
, li [] [ a [ href "#" ] [ text "Separated link" ] ] |
|
, li [ attribute "role" "separator", class "divider" ] [] |
|
, li [] [ a [ href "#" ] [ text "One more separated link" ] ] |
|
] |
|
] |
|
] |
|
] |
What the fuck is this? It's like you put Javascript in a blender, drank it, and vomited it onto crusty old HTML that had been baked in the sun.