Turn the top nav bar into a sidebar

Add an edit mode

Start/Client/Components/BookmarkContainer.razor

@@ -58,13 +58,16 @@
                 <BookmarkGroup Group="group" />
             }
 
-            <div class="addBookmarkGroupButton text-center">
-                <button type="button" class="btn tooltip tooltip-bottom"
-                        @onclick="this.ShowCreateGroupForm"
-                        aria-label="Create Group" data-tooltip="Create Group">
-                    <i class="icon icon-plus"></i>
-                </button>
-            </div>
+            @if (this.state.Value.EditMode)
+            {
+                <div class="addBookmarkGroupButton text-center">
+                    <button type="button" class="btn tooltip tooltip-bottom"
+                            @onclick="this.ShowCreateGroupForm"
+                            aria-label="Create Group" data-tooltip="Create Group">
+                        <i class="icon icon-plus"></i>
+                    </button>
+                </div>
+            }
         </div>
     }
 </div>

Start/Client/Components/BookmarkGroup.razor

@@ -1,14 +1,17 @@
 @using System.Drawing
+@using Fluxor
+@using Start.Client.Store.State
+
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+
+@inject IState<RootState> state
+@inject IDispatcher dispatch
 
 <div class="card bookmarkGroup">
     <div class="card-header" style="background-color: @this.Group.Color">
-        <h2 class="card-title h5 d-inline-block @this.ForegroundTitleColorClass">
+        <h2 class="card-title h6 d-inline-block @this.ForegroundTitleColorClass">
             @this.Group.Title
         </h2>
-        <button type="button" class="addBookmarkButton btn btn-sm tooltip tooltip-left"
-                aria-label="Create Bookmark" data-tooltip="Create Bookmark">
-            <i class="icon icon-plus"></i>
-        </button>
     </div>
     <div class="card-body">
         <ul class="bookmarks">
@@ -34,6 +37,16 @@
                 {
                     <Bookmark Model="bookmark" />
                 }
+
+                @if (this.state.Value.EditMode)
+                {
+                    <li class="addBookmarkItem">
+                        <button type="button" class="addBookmarkButton btn">
+                            <i class="icon icon-plus"></i>
+                            Create Bookmark
+                        </button>
+                    </li>
+                }
             }
         </ul>
     </div>
@@ -44,8 +57,10 @@
     [Parameter]
     public BookmarkGroupDto Group { get; set; } = null!;
 
-    protected string ForegroundTitleColorClass {
-        get {
+    protected string ForegroundTitleColorClass
+    {
+        get
+        {
             const int threshold = 105;
             Color bgColor = ColorTranslator.FromHtml(this.Group.Color);
 

Start/Client/Components/Sidebar.razor

@@ -0,0 +1,87 @@
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
+@using Start.Client.Store.Features.Sidebar
+@using Start.Client.Store.State
+@using Fluxor
+
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+
+@inject IState<RootState> state
+@inject IDispatcher dispatch
+
+@inject NavigationManager Navigation
+@inject SignOutSessionStateManager SignOutManager
+
+<div class="off-canvas">
+    @* No off-canvas-toggle - add something that dispatches ShowSidebarAction *@
+
+    <div id="sidebar" class="off-canvas-sidebar @(this.state.Value.ShowSidebar ? "active" : "")">
+        <div id="sidebarHeading">
+            <h1>Start</h1>
+            <button class="btn btn-link" @onclick="this.OnSidebarHideClicked">
+                <i class="icon icon-cross icon-2x"></i>
+            </button>
+        </div>
+
+        <ul id="sidebarItems" class="nav">
+            <li class="nav-item">
+                <div class="form-group">
+                    <label class="form-switch">
+                        <input type="checkbox" @onclick="this.OnToggleEditMode" />
+                        <i class="form-icon"></i>
+                        Edit Mode
+                    </label>
+                </div>
+            </li>
+        </ul>
+
+        <ul class="nav accountActions">
+            <AuthorizeView>
+                <Authorized>
+                    <li class="nav-item accountName">
+                        <figure class="avatar">
+                            <i class="icon icon-people ml-2 mt-2"></i>
+                        </figure>
+                            @context.User.Identity?.Name
+                    </li>
+                    <li class="nav-item">
+                        <a href="authentication/profile">Account</a>
+                    </li>
+                    <li class="nav-item">
+                        <button class="nav-link btn btn-link" @onclick="BeginSignOut">Log out</button>
+                    </li>
+                </Authorized>
+                <NotAuthorized>
+                    <a href="authentication/login">Log in</a>
+                </NotAuthorized>
+            </AuthorizeView>
+        </ul>
+    </div>
+
+    <a class="off-canvas-overlay" @onclick="this.OnSidebarHideClicked"></a>
+
+    <div class="off-canvas-content">
+        @this.ChildContent
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = null!;
+
+    protected void OnSidebarHideClicked()
+    {
+        dispatch.Dispatch(new HideSidebarAction());
+    }
+
+    protected void OnToggleEditMode()
+    {
+        dispatch.Dispatch(new ToggleEditModeAction());
+    }
+
+    private async Task BeginSignOut(MouseEventArgs args)
+    {
+        await SignOutManager.SetSignOutState();
+        Navigation.NavigateTo("authentication/logout");
+    }
+}