Grafana like menu (#1837)

asynkron · Oct 24, 2022 · 8423917 · 8423917
1 parent edc824d
commit 8423917
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 28 deletions.
diff --git a/src/Proto.Cluster.Dashboard/Pages/ClusterDiagnostics.razor b/src/Proto.Cluster.Dashboard/Pages/ClusterDiagnostics.razor
@@ -5,28 +5,32 @@
 @inject IJSRuntime JS
 <PageTitle>Cluster Diagnostics</PageTitle>
 
-@if (_diagnostics is not null)
-{
-    <MudTable T="DiagnosticsEntry" Items="_diagnostics.OrderBy(e => e.Module).ThenBy(e => e.Message)">
-        <HeaderContent>
-            <MudTh>Module</MudTh>
-            <MudTh>Message</MudTh>
-            <MudTh>Data</MudTh>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="Nr">@context.Module</MudTd>
-            <MudTd DataLabel="Sign">@context.Message</MudTd>
-            <MudTd DataLabel="Name">
-                @if (context.Data is not null)
-                {
-                    <pre>
+<div class="px-4">
+    <MudPaper Elevation="2" Outlined>
+    @if (_diagnostics is not null)
+    {
+        <MudTable T="DiagnosticsEntry" Items="_diagnostics.OrderBy(e => e.Module).ThenBy(e => e.Message)">
+            <HeaderContent>
+                <MudTh>Module</MudTh>
+                <MudTh>Message</MudTh>
+                <MudTh>Data</MudTh>
+            </HeaderContent>
+            <RowTemplate>
+                <MudTd DataLabel="Nr">@context.Module</MudTd>
+                <MudTd DataLabel="Sign">@context.Message</MudTd>
+                <MudTd DataLabel="Name">
+                    @if (context.Data is not null)
+                    {
+                        <pre>
                         <code class="language-json">@AsJson(context.Data)</code>
                     </pre>
-                }
-            </MudTd>
-        </RowTemplate>
-    </MudTable>
-}
+                    }
+                </MudTd>
+            </RowTemplate>
+        </MudTable>
+    }
+    </MudPaper>
+</div>
 
 @code {
     private DiagnosticsEntry[]? _diagnostics;

diff --git a/src/Proto.Cluster.Dashboard/Shared/MainLayout.razor b/src/Proto.Cluster.Dashboard/Shared/MainLayout.razor
@@ -37,7 +37,7 @@
                              Icon="@Icons.Material.Filled.DarkMode" Color="@Color.Info" Title="Dark"
                              ToggledIcon="@Icons.Material.Filled.LightMode" ToggledColor="@Color.Warning" ToggledTitle="Light"/>
     </MudAppBar>
-    <MudDrawer @bind-Open="@_open" ClipMode="DrawerClipMode.Never" Elevation="0" Variant="@DrawerVariant.Mini" OpenMiniOnHover="true">
+    <MudDrawer  ClipMode="DrawerClipMode.Never" Elevation="0" Variant="@DrawerVariant.Mini" OpenMiniOnHover="false">
         <NavMenu/>
     </MudDrawer>
     <MudMainContent >
@@ -61,8 +61,6 @@
     }
 
     bool _dark = true;
-    bool _open;
 
-    void ToggleDrawer() => _open = !_open;
 
 }
diff --git a/src/Proto.Cluster.Dashboard/Shared/NavMenu.razor b/src/Proto.Cluster.Dashboard/Shared/NavMenu.razor
@@ -1,11 +1,12 @@
-<MudNavMenu Style="width: 240px; overflow: hidden" Color="Color.Info">
+<MudNavMenu Style="width: 64px; overflow-x: hidden" Color="Color.Info">
 
     <MudNavLink Href="./" Match="NavLinkMatch.All">
         <img src="./_content/Proto.Cluster.Dashboard/protosymbol.png" style="width: 32px;margin-left: -17px">
     </MudNavLink>
     <MudNavLink Disabled="true"></MudNavLink>
-    <MudNavLink Href="ClusterOverview" Match="NavLinkMatch.Prefix" Icon="@Icons.Filled.BarChart">Cluster Overview</MudNavLink>
-    <MudNavLink Href="ClusterState" Match="NavLinkMatch.Prefix" Icon="@Icons.Filled.RemoveRedEye">Cluster State</MudNavLink>
-    <MudNavLink Href="ActorDiagram" Match="NavLinkMatch.Prefix" Icon="@Icons.Filled.AccountTree">Actors</MudNavLink>
-    <MudNavLink Href="ClusterDiagnostics" Match="NavLinkMatch.Prefix" Icon="@Icons.Filled.Medication">Diagnostics</MudNavLink>
+    <ProtoNavLink Href="ClusterOverview" Icon="@Icons.Filled.BarChart">Cluster Overview</ProtoNavLink>
+    <ProtoNavLink Href="ClusterState" Icon="@Icons.Filled.RemoveRedEye">Cluster State</ProtoNavLink>
+    <ProtoNavLink Href="ActorDiagram" Icon="@Icons.Filled.AccountTree">Actors</ProtoNavLink>
+    <ProtoNavLink Href="ClusterDiagnostics" Icon="@Icons.Filled.Medication">Diagnostics</ProtoNavLink>
+
 </MudNavMenu>
diff --git a/src/Proto.Cluster.Dashboard/Shared/ProtoNavLink.razor b/src/Proto.Cluster.Dashboard/Shared/ProtoNavLink.razor
@@ -0,0 +1,29 @@
+<div>
+    <MudMenu FullWidth="false" 
+             ActivationEvent="@MouseEvent.MouseOver" 
+             AnchorOrigin="Origin.CenterRight" 
+             TransformOrigin="Origin.CenterLeft" 
+             Variant="Variant.Filled"
+             Color="Color.Secondary"
+             >
+        <ActivatorContent>
+            <MudNavLink Href="@Href" Match="NavLinkMatch.Prefix" Icon="@Icon"></MudNavLink>
+        </ActivatorContent>
+        <ChildContent>
+            <MudMenuItem Href="@Href" Match="NavLinkMatch.Prefix">@ChildContent</MudMenuItem>
+        </ChildContent>
+    </MudMenu>
+</div>
+
+@code {
+
+    [Parameter]
+    public string Href { get; set; }
+
+    [Parameter]
+    public string Icon { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+}