From 955c25d40abae0273ef869dd447066b4abc5f7cf Mon Sep 17 00:00:00 2001
From: Runxi Yu <me@runxiyu.org>
Date: Tue, 25 Mar 2025 08:33:53 +0800
Subject: [PATCH] Better nav bar

---
 static/style.css       | 37 +++++++++++++++++++++++++++++++++----
 templates/_header.tmpl |  8 ++++++++

diff --git a/static/style.css b/static/style.css
index 4f84182a45edd9448e9bd7bbf7b872e6acafc224..6645af45d0db3081ae124ebdee2a10acf04a8151 100644
--- a/static/style.css
+++ b/static/style.css
@@ -386,16 +386,45 @@ /* Header layout */
 header#main-header {
 	background-color: var(--lighter-box-background-color);
 	display: flex;
+	flex-direction: row;
+	align-items: center;
 	justify-content: space-between;
+	flex-wrap: wrap;
+	padding: 0.625rem 1rem;
+	gap: 0.5rem;
+}
+#main-header-forge-title {
+	white-space: nowrap;
+}
+#breadcrumb-nav {
+	display: flex;
 	align-items: center;
-	padding: 10px;
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow-x: auto;
+	font-size: 0.9rem;
+	gap: 0.25rem;
+	white-space: nowrap;
 }
-header#main-header > div#main-header-forge-title {
-	flex-grow: 1;
+.breadcrumb-separator {
+	margin: 0 0.25rem;
 }
-header#main-header > div#main-header-user {
+#main-header-user {
 	display: flex;
 	align-items: center;
+	white-space: nowrap;
+	font-size: 0.95rem;
+}
+@media (max-width: 37.5rem) {
+	header#main-header {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	#breadcrumb-nav {
+		width: 100%;
+		overflow-x: auto;
+	}
 }
 
 /* Uncategorized */
diff --git a/templates/_header.tmpl b/templates/_header.tmpl
index 6a20f557658c5d3e63e014c6ceae8a95019bfd7c..8265422eeb9369753f7b86289a1b7097c464ac0d 100644
--- a/templates/_header.tmpl
+++ b/templates/_header.tmpl
@@ -7,6 +7,14 @@ <header id="main-header">
 	<div id="main-header-forge-title">
 		<a href="/">{{- .global.forge_title -}}</a>
 	</div>
+	<nav id="breadcrumb-nav">
+		{{- $path := "" -}}
+		{{- range $i, $segment := .url_segments -}}
+			{{- $path = printf "%s/%s" $path $segment -}}
+			<span class="breadcrumb-separator">/</span>
+			<a href="{{ $path }}">{{ $segment }}</a>
+		{{- end -}}
+	</nav>
 	<div id="main-header-user">
 		{{- if ne .user_id_string "" -}}
 			<a href="/:/users/{{- .user_id_string -}}">{{- .username -}}</a>

-- 
2.48.1