fix: active nav drawer item color

CaddyManager/Components/Layout/NavigationDrawer.razor

@@ -1,11 +1,16 @@
 <MudDrawer @bind-Open="@_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="1" Variant="@DrawerVariant.Mini"
-           OverlayAutoClose="true">
+    OverlayAutoClose="true">
     <MudNavMenu>
-        <MudNavLink Match="NavLinkMatch.All" Href="/" Icon="@Icons.Custom.FileFormats.FileCode">
+        @foreach (var item in _drawerItems)
-            Reverse Proxies
+        {
-        </MudNavLink>
+            <div>
-        <MudNavLink Match="NavLinkMatch.All" Href="/caddyfile" Icon="@Icons.Material.Filled.Language">
+                <MudTooltip Text="@(_drawerOpen ? string.Empty : item.Text)" Placement="Placement.Right"
-            Global Caddyfile
+                    RootClass="drawer-item-tooltip">
-        </MudNavLink>
+                    <MudNavLink Href="@item.Url" Icon="@item.Icon" Match="NavLinkMatch.All">
+                        @item.Text
+                    </MudNavLink>
+                </MudTooltip>   
+            </div>
+        }
     </MudNavMenu>
 </MudDrawer>

CaddyManager/Components/Layout/NavigationDrawer.razor.cs

@@ -1,13 +1,54 @@
 using Microsoft.AspNetCore.Components;
+using MudBlazor;
 
 namespace CaddyManager.Components.Layout;
 
 public partial class NavigationDrawer : ComponentBase
 {
+    /// <summary>
+    /// List of navigation drawer items to be rendered in the UI
+    /// </summary>
+    private readonly List<DrawerItem> _drawerItems =
+    [
+        new()
+        {
+            Text = "Configurations",
+            Icon = Icons.Custom.FileFormats.FileCode,
+            Url = "/"
+        },
+        new()
+        {
+            Text = "Global Caddyfile",
+            Icon = Icons.Material.Filled.Language,
+            Url = "/caddyfile"
+        },
+    ];
+
     private bool _drawerOpen = false;
     
     internal void ToggleDrawer()
     {
         _drawerOpen = !_drawerOpen;
     }
+}
+
+/// <summary>
+/// Model for a navigation drawer item
+/// </summary>
+internal struct DrawerItem
+{
+    /// <summary>
+    /// Text to display
+    /// </summary>
+    public string Text { get; set; }
+    
+    /// <summary>
+    /// Icon to display
+    /// </summary>
+    public string Icon { get; set; }
+    
+    /// <summary>
+    /// Url to navigate to
+    /// </summary>
+    public string Url { get; set; }
 }

CaddyManager/Components/Layout/NavigationDrawer.razor.css

@@ -0,0 +1,9 @@
+::deep .drawer-item-tooltip {
+    width: 100%;
+}
+
+::deep .mud-nav-link-text {
+    /* This is to enforce showing only 1 line for the drawer item text */
+    height: 14px;
+    overflow: hidden;
+}

CaddyManager/wwwroot/app.css

@@ -11,4 +11,9 @@
 .caddy-file-editor .monaco-editor {
     overflow: hidden;
     border-radius: inherit;
+}
+
+/*This is for having the active drawer item's icon color same as the text*/
+.mud-nav-link.active svg {
+    color: var(--mud-palette-primary)!important;
 }