Initial code commit.

ui/Sufi.Demo.PeopleDirectory.UI/Client/Shared/MainLayout.razor

@@ -0,0 +1,30 @@
+@inherits LayoutComponentBase
+
+<MudThemeProvider />
+<MudPopoverProvider />
+<MudDialogProvider MaxWidth="MaxWidth.ExtraSmall" FullWidth="true" />
+<MudSnackbarProvider />
+
+<MudLayout>
+	<MudAppBar Color="Color.Info">
+		<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => ToggleDrawer())" />
+		<MudSpacer />
+	</MudAppBar>
+	<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Never">
+		<SideNavMenu />
+	</MudDrawer>
+	<MudMainContent>
+		<MudContainer MaxWidth="MaxWidth.False">
+			@Body
+		</MudContainer>
+	</MudMainContent>
+</MudLayout>
+
+@code {
+	bool _drawerOpen = true;
+
+	void ToggleDrawer()
+	{
+		_drawerOpen = !_drawerOpen;
+	}
+}

ui/Sufi.Demo.PeopleDirectory.UI/Client/Shared/MainLayout.razor.css

@@ -0,0 +1,81 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

ui/Sufi.Demo.PeopleDirectory.UI/Client/Shared/SideNavMenu.razor

@@ -0,0 +1,11 @@
+<MudNavMenu Bordered>
+	<MudText Typo="Typo.h6" Class="px-4 pt-3">Sufi Demo App</MudText>
+	<MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">For demo only</MudText>
+	<MudDivider Class="my-2" />
+
+	<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard">Home</MudNavLink>
+
+	<MudNavLink Href="/contacts" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.List">Contact List</MudNavLink>
+	<MudDivider Class="my-2" />
+
+</MudNavMenu>