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