basics setup

src/Components/Nav.fs

@@ -0,0 +1,22 @@
+module DavidOnTop.Components.Nav
+
+open Oxpecker.Solid
+open Oxpecker.Solid.Tags
+
+[<SolidComponent>]
+let Nav () =
+    nav (class' = "flex z-[5] justify-around items-center fixed top-0 h-12 w-full bg-bckgl") {
+        img (class' = "max-h-10", src = "https://pubfs.s3.davidon.top/logo-transparent.png")
+
+        div () {
+            a (class' = "hover:bg-bckg min-h-8 h-1 px-3 py-1.5 rounded-sm mx-1 font-bold", href = "/") { "Home" }
+            a (class' = "hover:bg-bckg min-h-8 h-1 px-3 py-1.5 rounded-sm mx-1 font-bold", href = "/about") { "About" }
+            a (class' = "hover:bg-bckg min-h-8 h-1 px-3 py-1.5 rounded-sm mx-1 font-bold", href = "https://git.davidon.top/DavidOnTop") { "Projects" }
+        }
+
+        div (class' = "group relative inline-block") {
+            div (class' = "group-hover:bg-bckg group-focus:bg-bckg min-h-8 h-1 px-3 py-1.5 rounded-sm mx-1 font-bold", tabindex = -1) { "Contact Me" }
+
+            div (class' = "invisible group-hover:visible group-focus:visible pl-15 z-50 pb-15 fixed w-5", tabindex = -1) { a (class' = "absolute mt-3 px-3 py-1.5 z-50 bg-bckgl rounded-sm", href = "mailto:me@davidon.top", tabindex = -1) { "Mail" } }
+        }
+    }

src/Pages/About.fs

@@ -0,0 +1,7 @@
+[<AutoOpen>]
+module DavidOnTop.Pages.About
+
+open Oxpecker.Solid
+
+[<SolidComponent>]
+let About () : HtmlElement = Fragment() { }

src/Pages/Index.fs

@@ -0,0 +1,7 @@
+[<AutoOpen>]
+module DavidOnTop.Pages.Index
+
+open Oxpecker.Solid
+
+[<SolidComponent>]
+let Index () : HtmlElement = div () { "" }

src/Program.fs

@@ -1,10 +1,19 @@
-open Oxpecker.Solid
+module DavidOnTop.Program
+
+open Oxpecker.Solid
 open Browser
+open Oxpecker.Solid.Router
+open DavidOnTop.Components.Nav
+
+open DavidOnTop.Pages
+
+let routes: RootConfig[] = [| RootConfig("/", lazy' (fun _ -> promise { return Index() })) |]
 
 [<SolidComponent>]
-let root() =
-    div() {
-        "Hello World from Solid fable"
+let root () =
+    Fragment() {
+        Nav()
+        main () { Router() { yield routes } }
     }
 
-render (root, document.getElementsByTagName("body")[0])
+render (root, document.getElementsByTagName("body")[0])