Highlight the current tab in the dashboard nav

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

3 files changed, 15 insertions, 8 deletions

diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css
index 48f9eff..455daec 100644
--- a/internal/web/static/dashboard.css
+++ b/internal/web/static/dashboard.css
@@ -22,6 +22,8 @@ code { background: #eef; padding: 0 0.25em; border-radius: 3px; font-size: 0.95e
 .blogbar .topbar-inner { padding: 0.5em 1em; }
 .blogbar a { display: inline-block; padding: 0.3em 0.6em; text-decoration: none; color: #333; border-radius: 4px; }
 .blogbar a:hover { background: #eef1f5; }
+.blogbar a.active { background: #1f2933; color: #fff; }
+.topbar .links a.active { text-decoration: underline; }
 .blogbar .blogname { margin-right: 0.6em; }
 .blogbar .view { float: right; color: #1a5fb4; font-weight: bold; }
 
diff --git a/internal/web/templates.go b/internal/web/templates.go
index f322ccc..1e17654 100644
--- a/internal/web/templates.go
+++ b/internal/web/templates.go
@@ -99,6 +99,8 @@ var funcs = template.FuncMap{
 		return *p
 	},
 	"lower": strings.ToLower,
+	// hasPrefix marks the current dashboard tab: {{if hasPrefix .Path "/b/x/posts"}}
+	"hasPrefix": strings.HasPrefix,
 	// dict builds a map for passing several values to a partial: {{template "x" (dict "a" 1 "b" 2)}}
 	"dict": func(kv ...any) (map[string]any, error) {
 		if len(kv)%2 != 0 {
diff --git a/internal/web/templates/partials/dashnav.html b/internal/web/templates/partials/dashnav.html
index 13a04d0..44e518e 100644
--- a/internal/web/templates/partials/dashnav.html
+++ b/internal/web/templates/partials/dashnav.html
@@ -4,23 +4,26 @@
     {{if .User}}
     <span class="who">{{.User.Username}}{{if .User.IsSuperadmin}} (superadmin){{end}}</span>
     <span class="links">
-      {{if .User.IsSuperadmin}}<a href="/admin/">Admin</a>{{end}}
-      <a href="/account/password">Password</a>
+      {{if .User.IsSuperadmin}}<a href="/admin/"{{if hasPrefix .Path "/admin/"}} class="active"{{end}}>Admin</a>{{end}}
+      <a href="/account/password"{{if eq .Path "/account/password"}} class="active"{{end}}>Password</a>
       <form method="post" action="/logout" class="inline"><input type="hidden" name="_csrf" value="{{.CSRF}}"><button type="submit" class="linkbtn">Log out</button></form>
     </span>
     {{end}}
   </div>
 </div>
 {{if .Blog}}
+{{$b := printf "/b/%s/" .Blog.Subdomain}}
 <div class="blogbar">
   <div class="topbar-inner">
     <strong class="blogname">{{.Blog.Title}}</strong>
-    <a href="/b/{{.Blog.Subdomain}}/">Overview</a>
-    <a href="/b/{{.Blog.Subdomain}}/posts">Posts</a>
-    <a href="/b/{{.Blog.Subdomain}}/pages">Pages</a>
-    <a href="/b/{{.Blog.Subdomain}}/design">Design</a>
-    <a href="/b/{{.Blog.Subdomain}}/images">Images</a>
-    <a href="/b/{{.Blog.Subdomain}}/settings">Settings</a>
+    <span class="tabs">
+    <a href="{{$b}}"{{if eq .Path $b}} class="active"{{end}}>Overview</a>
+    <a href="{{$b}}posts"{{if hasPrefix .Path (print $b "posts")}} class="active"{{end}}>Posts</a>
+    <a href="{{$b}}pages"{{if hasPrefix .Path (print $b "pages")}} class="active"{{end}}>Pages</a>
+    <a href="{{$b}}design"{{if hasPrefix .Path (print $b "design")}} class="active"{{end}}>Design</a>
+    <a href="{{$b}}images"{{if hasPrefix .Path (print $b "images")}} class="active"{{end}}>Images</a>
+    <a href="{{$b}}settings"{{if hasPrefix .Path (print $b "settings")}} class="active"{{end}}>Settings</a>
+    </span>
     <a class="view" href="{{.BlogURL}}" target="_blank">View blog &#8599;</a>
   </div>
 </div>