Support Request : Converting html nav element to Navbar

[mccrodp]

Hi, pretty new to Elm and working on up-skilling in it using a pet project of my yoga site. I'm working backwards, trying to convert a Bootstrap theme to Elm using this package, but cannot find what I'm looking for in Navbar.elm (or I may not understand it if it's there) how to do certain things, e.g:

1. Add navbar-toggleable-sm class to a wrapper div
2. Override mr-auto and replace it with nav class on the ul element

They are the main ones for the moment. Any advise on how to approach this is appreciated. Please see Elm code below for what I have so far (linkAttrs are custom routes).

Desired nav HTML as on current static site

<nav class="navbar" id="nav">
      <div class="container">
        <a class="navbar-brand" href="index.html"><img alt="" src="img/logo-nav.png"></a> <button aria-expanded="false" class="navbar-toggler hidden-md-up pull-right collapsed" data-target="#navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span>☰</button>
        <div aria-expanded="false" class="navbar-toggleable-sm collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item active">
              <a class="nav-link" href="schedule.html">Schedule</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="instructors.html">Instructors</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li>
          </ul>
        </div>

        <nav class="nav social-nav pull-right hidden-sm-down">
          <a href="http://facebook.com/ahimsayogajp"><i class="fa fa-facebook"></i></a> <a href="http://instagram.com/ahimsayogajp"><i class="fa fa-instagram"></i></a><a href="http://twitter.com/ahimsayogajp"><i class="fa fa-twitter"></i></a><a href="https://www.youtube.com/channel/UCihAjjXntS8Q-5a4wBIolgQ"><i class="fa fa-youtube"></i></a><a href="mailto:miki@ahimsayoga.jp"><i class="fa fa-envelope"></i></a>
        </nav>
      </div>
    </nav>

Elm Navbar so far

Navbar.config NavbarMsg
        |> Navbar.container
        |> Navbar.collapseMedium
        |> Navbar.collapseSmall
        -- Collapse menu at the medium breakpoint
        |>
            Navbar.attrs
                [ id "nav" ]
        -- Customize coloring
        |>
            Navbar.brand
                -- Add logo to your brand with a little styling to align nicely
                [ href "#" ]
                [ img
                    [ src "img/logo-nav.png"
                    , class "navbar-brand"
                    ]
                    []
                , text "Toggle navigation"
                ]
        |> Navbar.items
            [ Navbar.itemLink (linkAttrs HomeR) [ text "Home" ]
            , Navbar.itemLink (linkAttrs AboutR) [ text "About" ]
            , Navbar.itemLink (linkAttrs ScheduleR) [ text "Schedule" ]
            , Navbar.itemLink (linkAttrs InstructorsR) [ text "Instructors" ]
            , Navbar.itemLink (linkAttrs ContactR) [ text "Contact" ]
            ]
        |> Navbar.view model.navbarState

[mccrodp]

I was able to convert the HTML to Elm, but it would be great to make use of this package and convert it from it's present form to that of the Bootstrap package. Any pointers to the 2 initial items in my original comment greatly appreciated. Thanks.

navigation model =
    H.nav [ class "navbar", id "nav" ]
    [ div [ class "container" ]
    [H.a [ class "navbar-brand", href "index.html" ]
    [ img [ alt "", src "img/logo-nav.png" ]
      []
    ]
  , H.button [ A.attribute "aria-expanded" "false", class "navbar-toggler hidden-md-up pull-right collapsed", A.attribute "data-target" "#navbar-collapse", A.attribute "data-toggle" "collapse", type_ "button" ]
    [ H.span [ class "sr-only" ]
      [ text "Toggle navigation" ], text "☰" 
    ]
  , div [ A.attribute "aria-expanded" "false", class "navbar-toggleable-sm collapse", id "navbar-collapse" ]
    [ H.ul [ class "nav navbar-nav" ]
      [ H.li [ class "nav-item" ]
        [ H.a [ class "nav-link", href "about.html" ]
          [ text "About",  H.span [ class "sr-only" ]
            [ text "(current)" ]
          ]
        ]
      , H.li [ class "nav-item active" ]
        [ H.a [ class "nav-link", href "schedule.html" ]
          [ text "Schedule" ]
        ]
      , H.li [ class "nav-item" ]
        [ H.a [ class "nav-link", href "instructors.html" ]
          [ text "Instructors" ]
        ]
      , H.li [ class "nav-item" ]
        [ H.a [ class "nav-link", href "contact.html" ]
          [ text "Contact" ]
        ]
      ]
    ]
  , H.nav [ class "nav social-nav pull-right hidden-sm-down" ]
    [ H.a [ href "http://facebook.com/ahimsayogajp" ]
      [ H.i [ class "fa fa-facebook" ]
        []
      ]
    , H.a [ href "http://instagram.com/ahimsayogajp" ]
      [ H.i [ class "fa fa-instagram" ]
        []
      ]
    , H.a [ href "http://twitter.com/ahimsayogajp" ]
      [ H.i [ class "fa fa-twitter" ]
        []
      ]
    , H.a [ href "https://www.youtube.com/channel/UCihAjjXntS8Q-5a4wBIolgQ" ]
      [ H.i [ class "fa fa-youtube" ]
        []
      ]
    , H.a [ href "mailto:miki@ahimsayoga.jp" ]
      [ H.i [ class "fa fa-envelope" ]
        []
      ]
    ]
  ]
    ]

[rundis]

Hi !

In general for support/help it's probably better to start with the #elm-bootstrap channel on the elm slack. Also in cases like this it's super helpful to use something like: Ellie to illustrate your progress and highlight which parts you are stuck on. Here is a simple starting point from the elm-bootstrap.info doc site which I modified a bit to try to model your use case a bit more closely: https://ellie-app.com/z6GP8QGKGba1/3

To give you some context: I used the bootstrap docs for alpha-6 as a baseline for making some design choices for the navbar module. (https://v4-alpha.getbootstrap.com/components/navbar/). It's really hard to make a simple API that gives you sane html and at the same time allowing for full flexibility. That means I've had to make some tradeoffs and maybe haven't provided enough escape hatches. I'm open to providing more customization options as long as it's not significantly detrimental to the simplicity of the API.

To your issues: 1) Your current implementatjon might need to be adjusted somewhat to cater for changes in bootstrap classes if that's not the version you are currently using. (ref your wish to use a "nav" class in the ul for menu items 2) You might be able to solve quite a lot using the customItems and customItems functions for the right hand side stuff of your menu 3) To make the menu collapsible at breakpoints use one of the collapse* functions (not several!)

Override mr-auto and replace it with nav class on the ul element

If you still need this after working though the Ellie sample I provided, please file a feature request issue and I'll consider including it if I find a nice way to do it !

[mccrodp]

Really appreciate this detailed reply. I'm going to join the Elm Slack and try out all of the above before getting back to you with results. Many thanks!

[mccrodp]

As noted on Slack:

Got this fixed and working by swapping to alpha-6, overriding a few CSS classes and adding a wrapper div around the Navbar to let navbar itself be the container (wrapper having background color). Many thanks again.

Cheers!