Skip to content

Instantly share code, notes, and snippets.

@isaacabraham

isaacabraham/1-nav.html

Forked from CallumVass/nav.fs
Last active October 2, 2020 00:20
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save isaacabraham/51eee741ee8212b3e97c2bfa79391474 to your computer and use it in GitHub Desktop.
Save isaacabraham/51eee741ee8212b3e97c2bfa79391474 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1-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>
Raw
2-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
3-Feliz.fs
module FileUpload
open Fable.React
open Fable.React.Props
open Fable.FontAwesome
open Fable.Core
open Fable.Core.JsInterop
open Fulma
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
4-FableReact.fs
module FileUpload
open Fable.React
open Fable.React.Props
open Fable.FontAwesome
open Fable.Core
open Fable.Core.JsInterop
open Feliz.Router
let logo () = StaticFile.import "./imgs/logo.png"
let nav =
aside [ ClassName "relative bg-blue-700 lg:self-stretch lg:w-64 w-full shadow-xl flex flex-col" ] [
div [ ClassName "p-6 flex justify-between" ] [
a [ Href "/" ] [
img [ ClassName "object-scale-down h-8 lg:h-32"; Src (logo()); Alt ".. Logo" ]
div [ ClassName "block lg:hidden" ] [
button [ Id "nav-toggle"; ClassName "flex items-center px-3 py-2 border rounded text-white border-white" ] [
svg [ ClassName "fill-current h-3 w-3"; ViewBox "0, 0, 20, 20"; XmlSpace "http://www.w3.org/2000/svg" ] [
title [] [ str "Menu" ]
path [ D "M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" ] []
]
]
]
]
]
nav [ ClassName "text-white text-base font-semibold pt-3 hidden lg:block"; Id "nav-content" ] [
div [ ClassName "flex flex-col" ] [
a [ Href "#"; ClassName "active-nav-link text-white py-4 pl-6 nav-item" ] [
i [ ClassName "fas fa-truck-loading mr-3" ] []
text [] [ str "Item One" ]
]
a [ Href "#"; ClassName "text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item flex-grow" ] [
i [ ClassName "fas fa-boxes mr-3" ] [ ]
text [] [ str "Item Two" ]
]
span [ ClassName "w-full text-white pl-6 py-4" ] [
i [ ClassName "fas fa-sign-out-alt mr-3" ] [ ]
a [ Href (Router.format "") ] [
text [] [ str "Sign Out" ]
]
]
]
]
]
Raw
5-FableReactWithFunctions.fs
module FileUpload
open Fable.React
open Fable.React.Props
open Fable.FontAwesome
open Fable.Core
open Fable.Core.JsInterop
open Feliz.Router
let logo () = StaticFile.import "./imgs/logo.png"
let makeIconLink className iconClass content =
a [ Href "#"; ClassName className ] [
i [ ClassName iconClass ] []
text [] [ str content ]
]
let nav =
aside [ ClassName "relative bg-blue-700 lg:self-stretch lg:w-64 w-full shadow-xl flex flex-col" ] [
div [ ClassName "p-6 flex justify-between" ] [
a [ Href "/" ] [
img [ ClassName "object-scale-down h-8 lg:h-32"; Src (logo()); Alt ".. Logo" ]
div [ ClassName "block lg:hidden" ] [
button [ Id "nav-toggle"; ClassName "flex items-center px-3 py-2 border rounded text-white border-white" ] [
svg [ ClassName "fill-current h-3 w-3"; ViewBox "0, 0, 20, 20"; XmlSpace "http://www.w3.org/2000/svg" ] [
title [] [ str "Menu" ]
path [ D "M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" ] []
]
]
]
]
]
nav [ ClassName "text-white text-base font-semibold pt-3 hidden lg:block"; Id "nav-content" ] [
div [ ClassName "flex flex-col" ] [
makeIconLink "active-nav-link text-white py-4 pl-6 nav-item" "fas fa-truck-loading mr-3" "Item One"
makeIconLink "text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item flex-grow" "fas fa-boxes mr-3" "Item Two"
span [ ClassName "w-full text-white pl-6 py-4" ] [
i [ ClassName "fas fa-sign-out-alt mr-3" ] [ ]
a [ Href (Router.format "") ] [
text [] [ str "Sign Out" ]
]
]
]
]
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment