Move the containter list into it's own component

Start/Client/Components/BookmarkContainer.razor

@@ -7,7 +7,7 @@
 @inject IDispatcher dispatch
 @inject IState<RootState> state
 
-<div class="activeBookmarkContainer">
+<div class="activeBookmarkContainer" role="tabpanel">
     @if (this.state.Value.CurrentContainerState.ErrorMessage != null)
     {
         <Alert Type="Alert.AlertType.Error">

Start/Client/Components/ContainerList.razor

@@ -0,0 +1,77 @@
+@using Fluxor
+@using Start.Client.Store.State
+@using Start.Client.Store.Features.CurrentContainer
+@using Start.Client.Store.Features.CreateContainer
+@using Start.Client.Store.Features.DeleteContainer
+@using Start.Client.Store.Features.Sidebar
+
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+
+@inject Blazored.LocalStorage.ILocalStorageService localStorage
+@inject IState<RootState> state
+@inject IDispatcher dispatch
+
+<div id="containerTabStrip" class="px-2">
+    <button id="menuButton" class="btn btn-link" @onclick="this.ShowSidebar">
+        <i class="icon icon-menu"></i>
+    </button>
+    <ul class="containerList tab" role="tablist">
+        @foreach (BookmarkContainerDto container in this.state.Value.ContainerListState.Containers)
+        {
+            string itemClasses = "tab-item";
+            if (container.BookmarkContainerId == this.state.Value.CurrentContainerState.Container?.BookmarkContainerId)
+                itemClasses += " active";
+
+        <li class="@itemClasses" role="tab">
+            <a @onclick="() => OnContainerClicked(container.BookmarkContainerId)">
+                @container.Title
+            </a>
+            @if (this.state.Value.EditMode)
+            {
+                <button class="btn btn-clear" aria-label="Delete"
+                        @onclick="() => this.OnDeleteContainerClicked(container.BookmarkContainerId)">
+                </button>
+            }
+        </li>
+        }
+        @if (this.state.Value.EditMode)
+        {
+            <li class="tab-item tab-action">
+                <button @onclick="OnCreateContainerClicked" class="btn btn-link tooltip tooltip-left"
+                        title="Create New Container" aria-label="Create New Container"
+                        data-tooltip="Create Container">
+                    +
+                </button>
+            </li>
+        }
+    </ul>
+</div>
+
+@code {
+    protected void ShowSidebar()
+    {
+        dispatch.Dispatch(new ShowSidebarAction());
+    }
+
+    protected void OnContainerClicked(int bookmarkContainerId) {
+        dispatch.Dispatch(new LoadCurrentContainerAction(bookmarkContainerId));
+    }
+
+    protected void OnCreateContainerClicked()
+    {
+        dispatch.Dispatch(new ShowCreateContainerFormAction());
+    }
+
+    protected void OnDeleteContainerClicked(int bookmarkContainerId)
+    {
+        BookmarkContainerDto? bookmarkContainerToDelete = this.state.Value.ContainerListState
+            .Containers
+            ?.FirstOrDefault(bc => bc.BookmarkContainerId == bookmarkContainerId);
+
+        if (bookmarkContainerToDelete == null)
+            return;
+
+        this.dispatch.Dispatch(new ShowDeleteContainerFormAction(
+            bookmarkContainerToDelete.BookmarkContainerId, bookmarkContainerToDelete.Title));
+    }
+}

Start/Client/Pages/Index.razor

@@ -1,18 +1,13 @@
 @page "/"
 
+@using Start.Client.Components
+@using Start.Client.Store.State
+@using Microsoft.AspNetCore.Authorization
+@using Fluxor
+
 @inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
-@using System.Linq
+@attribute [Authorize]
-@using Start.Client.Components
-@using Start.Client.Store.State
-@using Start.Client.Store.Features.CurrentContainer
-@using Start.Client.Store.Features.CreateContainer
-@using Start.Client.Store.Features.DeleteContainer
-@using Start.Client.Store.Features.Sidebar
-@using Fluxor
-
-@* Distinguish from Refit.Authorize *@
-@attribute [Microsoft.AspNetCore.Authorization.Authorize]
 
 @inject Blazored.LocalStorage.ILocalStorageService localStorage
 @inject IState<RootState> state
@@ -37,42 +32,7 @@
 else
 {
     <Sidebar>
-        <div id="containerTabStrip" class="px-2">
+        <ContainerList />
-            <button id="menuButton" class="btn btn-link" @onclick="this.ShowSidebar">
-                <i class="icon icon-menu"></i>
-            </button>
-            <ul class="containerList tab">
-                @foreach (BookmarkContainerDto container in this.state.Value.ContainerListState.Containers)
-                {
-                    string itemClasses = "tab-item";
-                    if (container.BookmarkContainerId == this.state.Value.CurrentContainerState.Container?.BookmarkContainerId)
-                        itemClasses += " active";
-
-                    <li class="@itemClasses">
-                        <a @onclick="() => OnContainerSelected(container.BookmarkContainerId)">
-                            @container.Title
-                            @if (this.state.Value.EditMode)
-                            {
-                                <button class="btn btn-clear"
-                                        @onclick="() => this.OnDeleteContainerClicked(container.BookmarkContainerId)">
-                                </button>
-                            }
-                        </a>
-                    </li>
-                }
-                @if (this.state.Value.EditMode)
-                {
-                    <li class="tab-item tab-action">
-                        <button @onclick="OnCreateContainerClicked" class="btn btn-link tooltip tooltip-left"
-                                title="Create New Container" aria-label="Create New Container"
-                                data-tooltip="Create Container">
-                            +
-                        </button>
-                    </li>
-                }
-            </ul>
-        </div>
-
         <BookmarkContainer />
 
         @* Data management forms *@
@@ -90,31 +50,5 @@ else
 
 @code
 {
-    protected void ShowSidebar()
-    {
-        dispatch.Dispatch(new ShowSidebarAction());
-    }
 
-    protected void OnContainerSelected(int bookmarkContainerId)
-    {
-        dispatch.Dispatch(new LoadCurrentContainerAction(bookmarkContainerId));
-    }
-
-    protected void OnDeleteContainerClicked(int bookmarkContainerId)
-    {
-        BookmarkContainerDto? bookmarkContainerToDelete = this.state.Value.ContainerListState
-            .Containers
-            ?.FirstOrDefault(bc => bc.BookmarkContainerId == bookmarkContainerId);
-
-        if (bookmarkContainerToDelete == null)
-            return;
-
-        this.dispatch.Dispatch(new ShowDeleteContainerFormAction(
-            bookmarkContainerToDelete.BookmarkContainerId, bookmarkContainerToDelete.Title));
-    }
-
-    protected void OnCreateContainerClicked()
-    {
-        dispatch.Dispatch(new ShowCreateContainerFormAction());
-    }
 }

Start/Client/Sass/app.scss

@@ -41,6 +41,33 @@
 }
 
 
+.tab li.tab-item:not(.tab-action) {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-right: 0.4rem;
+
+	a {
+		flex: 1;
+		margin-right: 0;
+	}
+
+	.btn-clear {
+		margin-top: 0;
+		margin-right: 0.4rem;
+	}
+
+	&.active {
+		border-bottom: solid 0.1rem $primary-color;
+
+		a {
+			border-bottom: none;
+			margin-right: 0;
+		}
+	}
+}
+
+
 /* Spectre's default is no padding */
 .container {
 	padding: 0.4rem;