diff --git a/CaddyManager/Components/Layout/NavigationDrawer.razor b/CaddyManager/Components/Layout/NavigationDrawer.razor index d39e9f9..d37df72 100644 --- a/CaddyManager/Components/Layout/NavigationDrawer.razor +++ b/CaddyManager/Components/Layout/NavigationDrawer.razor @@ -1,11 +1,16 @@ + OverlayAutoClose="true"> - - Reverse Proxies - - - Global Caddyfile - + @foreach (var item in _drawerItems) + { +
+ + + @item.Text + + +
+ }
\ No newline at end of file diff --git a/CaddyManager/Components/Layout/NavigationDrawer.razor.cs b/CaddyManager/Components/Layout/NavigationDrawer.razor.cs index 5979750..8b58d63 100644 --- a/CaddyManager/Components/Layout/NavigationDrawer.razor.cs +++ b/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 { + /// + /// List of navigation drawer items to be rendered in the UI + /// + private readonly List _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; } +} + +/// +/// Model for a navigation drawer item +/// +internal struct DrawerItem +{ + /// + /// Text to display + /// + public string Text { get; set; } + + /// + /// Icon to display + /// + public string Icon { get; set; } + + /// + /// Url to navigate to + /// + public string Url { get; set; } } \ No newline at end of file diff --git a/CaddyManager/Components/Layout/NavigationDrawer.razor.css b/CaddyManager/Components/Layout/NavigationDrawer.razor.css new file mode 100644 index 0000000..b685a8a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/CaddyManager/wwwroot/app.css b/CaddyManager/wwwroot/app.css index 62eac32..e958b20 100644 --- a/CaddyManager/wwwroot/app.css +++ b/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; } \ No newline at end of file