Skip to content

Instantly share code, notes, and snippets.

@CallumVass

CallumVass/nav.fs

Created September 8, 2020 14:49
Show Gist options
  • Save CallumVass/b2d71eadde8bf896e4f97f8277cf8ca4 to your computer and use it in GitHub Desktop.
Save CallumVass/b2d71eadde8bf896e4f97f8277cf8ca4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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" ] ] ] ] ] ] ] ] ]
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment