Set correct active class on the navigation menu

handler/routes.go

@@ -76,7 +76,7 @@ func WireGuardClients() echo.HandlerFunc {
 		}
 
 		return c.Render(http.StatusOK, "clients.html", map[string]interface{}{
-			"name":           "Khanh",
+			"baseData":       model.BaseData{""},
 			"clientDataList": clientDataList,
 		})
 	}
@@ -149,7 +149,6 @@ func RemoveClient() echo.HandlerFunc {
 // WireGuardServer handler
 func WireGuardServer() echo.HandlerFunc {
 	return func(c echo.Context) error {
-
 		// initialize database directory
 		dir := "./db"
 		db, err := scribble.New(dir, nil)
@@ -168,7 +167,7 @@ func WireGuardServer() echo.HandlerFunc {
 		}
 
 		return c.Render(http.StatusOK, "server.html", map[string]interface{}{
-			"name":            "Khanh",
+			"baseData":        model.BaseData{"wg-server"},
 			"serverInterface": serverInterface,
 			"serverKeyPair":   serverKeyPair,
 		})
@@ -248,7 +247,7 @@ func GlobalSettings() echo.HandlerFunc {
 		}
 
 		return c.Render(http.StatusOK, "global_settings.html", map[string]interface{}{
-			"name":           "Khanh",
+			"baseData":       model.BaseData{"global-settings"},
 			"globalSettings": globalSettings,
 		})
 	}

model/misc.go

@@ -5,3 +5,8 @@ type Interface struct {
 	Name      string `json:"name"`
 	IPAddress string `json:"ip_address"`
 }
+
+// BaseData struct to pass value to the base template
+type BaseData struct {
+	Active string
+}

templates/base.html

@@ -86,7 +86,7 @@
                 <nav class="mt-2">
                     <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                         <li class="nav-item">
-                            <a href="/" class="nav-link active">
+                            <a href="/" class="nav-link {{if eq .baseData.Active "" }}active{{end}}">
                                 <i class="nav-icon fas fa-user-secret"></i>
                                 <p>
                                     Wireguard Clients
@@ -94,7 +94,7 @@
                             </a>
                         </li>
                         <li class="nav-item">
-                            <a href="/wg-server" class="nav-link">
+                            <a href="/wg-server" class="nav-link {{if eq .baseData.Active "wg-server" }}active{{end}}">
                                 <i class="nav-icon fas fa-server"></i>
                                 <p>
                                     Wireguard Server
@@ -102,7 +102,7 @@
                             </a>
                         </li>
                         <li class="nav-item">
-                            <a href="/global-settings" class="nav-link">
+                            <a href="/global-settings" class="nav-link {{if eq .baseData.Active "global-settings" }}active{{end}}">
                                 <i class="nav-icon fas fa-cog"></i>
                                 <p>
                                     Global Settings

templates/clients.html

@@ -3,7 +3,7 @@ Wireguard Clients
 {{end}}
 
 {{define "username"}}
-{{index . "name"}}
+Admin
 {{end}}
 
 {{define "page_title"}}

templates/global_settings.html

@@ -3,7 +3,7 @@ Global Settings
 {{end}}
 
 {{define "username"}}
-{{index . "name"}}
+Admin
 {{end}}
 
 {{define "page_title"}}

templates/server.html

@@ -3,7 +3,7 @@ Wireguard Server
 {{end}}
 
 {{define "username"}}
-{{index . "name"}}
+Admin
 {{end}}
 
 {{define "page_title"}}