Creating a responsive / toggleable responsive navigation bar with elm and tailwindcss

ResponsiveNav.elm

module ResponsiveNav exposing (withVnav, update, Msg)

import Html exposing (Html, div, header, nav)
import Html.Attributes as Attributes exposing (class)
import Html.Events exposing (onClick)
import UI.Icons exposing (logo, hamburger)


type alias Model a =
  { a |
    responsiveNavVisible : Bool
  }


type Msg
  = ToggleResponsiveNavbar
  

update : Msg -> Model a -> Model a
update _ model =
  { model |
    responsiveNavVisible = not model.responsiveNavVisible
  }

withVnav : Model a -> (Msg -> msg) -> Html msg -> Html msg -> Html msg
withVnav { responsiveNavVisible } tagger navContent pageContent =
  let
    verticalNav = 
      if responsiveNavVisible then
        header
          [ class "hidden fixed h-full w-2/3 md:flex"
          , onClick (tagger ToggleResponsiveNavbar)
          ]
          [ logo "45"
          , navContent
          ]
      else
        div
          [ class "m-5 flex justify-between"
          , onClick (tagger ToggleResponsiveNavbar)
          ]
          [ hamburger, logo "40" ]
  in
    div [ class "h-full w-full" ]
      [ verticalNav, pageContent ]