Merge pull request #2 from Picea/codex/create-navbar-navigation-for-anissa

Add navigation bar for Conduit demo

Author: MCGPPeters

Abies.Conduit/Main.cs

@@ -1,5 +1,6 @@
 using Abies.Conduit.Routing;
 using Abies.Conduit.Services;
+using Abies.DOM;
 using System.Threading.Tasks;
 using static Abies.Conduit.Main.Message.Event;
 using static Abies.UrlRequest;
@@ -222,24 +223,32 @@ public static (Model model, IEnumerable<Command> commands) Update(Abies.Message
         }
 
     }
-
-
+    private static Node WithLayout(Node page, Model model) =>
+        div([], [
+            Navigation.View(model),
+            page
+        ]);
 
     public static Document View(Model model)
         => model.Page switch
         {
-            Page.Redirect => new Document(string.Format(Title, "Redirect"), h1([], [text("Redirecting...")])),
-            Page.NotFound => new Document(string.Format(Title, "Not Found"), h1([], [text("Not Found")])),
-            Page.Home home => new Document(string.Format(Title, nameof(Conduit.Page.Home)), Conduit.Page.Home.Page.View(home.Model)),
-            Page.Settings settings => new Document(string.Format(Title, nameof(Conduit.Page.Settings)), Conduit.Page.Settings.Page.View(settings.Model)),
-            Page.Login login => new Document(string.Format(Title, nameof(Conduit.Page.Login)), Conduit.Page.Login.Page.View(login.Model)),
-            Page.Register register => new Document(string.Format(Title, nameof(Conduit.Page.Register)), Conduit.Page.Register.Page.View(register.Model)),            Page.Profile profile => new Document(string.Format(Title, nameof(Conduit.Page.Profile)), Conduit.Page.Profile.Page.View(profile.Model)),
-            Page.ProfileFavorites profileFavorites => new Document(string.Format(Title, "Profile Favorites"), Conduit.Page.Profile.Page.View(profileFavorites.Model)),
-            Page.Article article => new Document(string.Format(Title, nameof(Conduit.Page.Article)), Conduit.Page.Article.Page.View(article.Model)),
-            Page.NewArticle newArticle => new Document(string.Format(Title, "New Article"), Conduit.Page.Editor.Page.View(newArticle.Model)),
-            _ => new Document(string.Format(Title, "Not Found"), h1([], [text("Not Found")]))
+            Page.Redirect => new Document(string.Format(Title, "Redirect"), WithLayout(h1([], [text("Redirecting...")]), model)),
+            Page.NotFound => new Document(string.Format(Title, "Not Found"), WithLayout(h1([], [text("Not Found")]), model)),
+            Page.Home home => new Document(string.Format(Title, nameof(Conduit.Page.Home)), WithLayout(Conduit.Page.Home.Page.View(home.Model), model)),
+            Page.Settings settings => new Document(string.Format(Title, nameof(Conduit.Page.Settings)), WithLayout(Conduit.Page.Settings.Page.View(settings.Model), model)),
+            Page.Login login => new Document(string.Format(Title, nameof(Conduit.Page.Login)), WithLayout(Conduit.Page.Login.Page.View(login.Model), model)),
+            Page.Register register => new Document(string.Format(Title, nameof(Conduit.Page.Register)), WithLayout(Conduit.Page.Register.Page.View(register.Model), model)),
+            Page.Profile profile => new Document(string.Format(Title, nameof(Conduit.Page.Profile)), WithLayout(Conduit.Page.Profile.Page.View(profile.Model), model)),
+            Page.ProfileFavorites profileFavorites => new Document(string.Format(Title, "Profile Favorites"), WithLayout(Conduit.Page.Profile.Page.View(profileFavorites.Model), model)),
+            Page.Article article => new Document(string.Format(Title, nameof(Conduit.Page.Article)), WithLayout(Conduit.Page.Article.Page.View(article.Model), model)),
+            Page.NewArticle newArticle => new Document(string.Format(Title, "New Article"), WithLayout(Conduit.Page.Editor.Page.View(newArticle.Model), model)),
+            _ => new Document(string.Format(Title, "Not Found"), WithLayout(h1([], [text("Not Found")]), model))
         };
 
+
+
+    
+
     public static Abies.Message OnUrlChanged(Url url)
         => new UrlChanged(url);
 

Abies.Conduit/Navigation.cs

@@ -0,0 +1,44 @@
+using Abies.Conduit.Main;
+using Abies.Conduit.Routing;
+using Abies.DOM;
+using static Abies.Html.Elements;
+using static Abies.Html.Attributes;
+
+namespace Abies.Conduit;
+
+public static class Navigation
+{
+    private static Node NavLink(string url, string label, bool active) =>
+        li([class_("nav-item")], [
+            a([class_(active ? "nav-link active" : "nav-link"), href(url)], [text(label)])
+        ]);
+
+    public static Node View(Model model)
+    {
+        var userLinks = model.CurrentUser == null
+            ? new Node[]
+            {
+                NavLink("/login", "Sign in", model.CurrentRoute is Route.Login),
+                NavLink("/register", "Sign up", model.CurrentRoute is Route.Register)
+            }
+            : new Node[]
+            {
+                NavLink("/editor", "New Article", model.CurrentRoute is Route.NewArticle),
+                NavLink("/settings", "Settings", model.CurrentRoute is Route.Settings),
+                NavLink($"/profile/{model.CurrentUser!.Username.Value}",
+                        model.CurrentUser.Username.Value,
+                        model.CurrentRoute is Route.Profile p && p.UserName.Value == model.CurrentUser.Username.Value ||
+                        model.CurrentRoute is Route.ProfileFavorites pf && pf.UserName.Value == model.CurrentUser.Username.Value)
+            };
+
+        return nav([class_("navbar navbar-light")], [
+            div([class_("container")], [
+                a([class_("navbar-brand"), href("/")], [text("conduit")]),
+                ul([class_("nav navbar-nav pull-xs-right")], [
+                    NavLink("/", "Home", model.CurrentRoute is Route.Home),
+                    ..userLinks
+                ])
+            ])
+        ]);
+    }
+}