nav.fs

module Nav

open Feliz
open Feliz.Router

let nav =
    let logo () = StaticFile.import "./imgs/logo.png"
    Html.aside [ prop.className "relative bg-blue-700 lg:self-stretch lg:w-64 w-full shadow-xl flex flex-col"
                 prop.children [ Html.div [ prop.className "p-6 flex justify-between"
                                            prop.children [ Html.a [ prop.href "/"
                                                                     prop.children
                                                                         [ Html.img [ prop.className
                                                                                          "object-scale-down h-8 lg:h-32"
                                                                                      prop.src (logo ())
                                                                                      prop.alt ".. Logo" ] ] ]
                                                            Html.div [ prop.className "block lg:hidden"
                                                                       prop.children
                                                                           [ Html.button [ prop.id "nav-toggle"
                                                                                           prop.className
                                                                                               "flex items-center px-3 py-2 border rounded text-white border-white"
                                                                                           prop.children
                                                                                               [ Html.svg [ prop.className
                                                                                                                "fill-current h-3 w-3"
                                                                                                            prop.viewBox
                                                                                                                (0,
                                                                                                                 0,
                                                                                                                 20,
                                                                                                                 20)
                                                                                                            prop.xmlns
                                                                                                                "http://www.w3.org/2000/svg"
                                                                                                            prop.children [ Html.title
                                                                                                                                "Menu"
                                                                                                                            Html.path
                                                                                                                                [ prop.d
                                                                                                                                    "M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" ] ] ] ] ] ] ] ] ]
                                 Html.nav [ prop.className "text-white text-base font-semibold pt-3 hidden lg:block"
                                            prop.id "nav-content"
                                            prop.children
                                                [ Html.div [ prop.className "flex flex-col"
                                                             prop.children [ Html.a [ prop.href "#"
                                                                                      prop.className
                                                                                          "active-nav-link text-white py-4 pl-6 nav-item"
                                                                                      prop.children [ Html.i
                                                                                                          [ prop.className
                                                                                                              "fas fa-truck-loading mr-3" ]
                                                                                                      Html.text
                                                                                                          "Item One" ] ]
                                                                             Html.a [ prop.href "#"
                                                                                      prop.className
                                                                                          "text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item flex-grow"
                                                                                      prop.children [ Html.i
                                                                                                          [ prop.className
                                                                                                              "fas fa-boxes mr-3" ]
                                                                                                      Html.text
                                                                                                          "Item Two" ] ]
                                                                             Html.span [ prop.className
                                                                                             "w-full text-white pl-6 py-4"
                                                                                         prop.children [ Html.i
                                                                                                             [ prop.className
                                                                                                                 "fas fa-sign-out-alt mr-3" ]
                                                                                                         Html.a [ prop.href
                                                                                                                      (Router.format
                                                                                                                          "")
                                                                                                                  prop.text
                                                                                                                      "Sign out" ] ] ] ] ] ] ] ] ]

nav.html

<aside class="relative bg-blue-700 lg:self-stretch lg:w-64 w-full shadow-xl flex flex-col">
  <div class="p-6 flex justify-between">
    <a href="..">
      <img class="object-scale-down h-8 lg:h-32" src=".." alt=".. Logo"/>
    </a>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-white border-white">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
        </svg>
      </button>
    </div>
  </div>
  <nav class="text-white text-base font-semibold pt-3 hidden lg:block" id="nav-content">
    <div class="flex flex-col">
      <a href=".."
          class="flex items-center active-nav-link text-white py-4 pl-6 nav-item">
        <i class="fas fa-truck-loading mr-3"></i>
        Item One
      </a>
      <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item flex-grow">
        <i class="fas fa-boxes mr-3"></i>
        Item Two
      </a>
      <span class="w-full text-white flex items-center pl-6 py-4">
        <i class="fas fa-sign-out-alt mr-3"></i>
        <a href="..">Sign out</a>
      </span>
    </div>
  </nav>
</aside>