UI: Add breadcrumb navigation to chat page

- Breadcrumb bar above chat header (Home › Boards › Chat Name)
- Styled to match chat container with themed colors
- Includes dark mode support
jocadbz
Joca 2026-01-15 22:50:58 -03:00
parent f7b8055062
commit d36d0d46fd
Signed by: jocadbz
GPG Key ID: B1836DCE2F50BDF7
1 changed files with 33 additions and 0 deletions

View File

@ -4,6 +4,7 @@
<head>
<title>{{.Title}}</title>
<link rel="stylesheet" href="{{.StaticPath}}/style.css">
<script src="{{.StaticPath}}/app.js" defer></script>
<style>
body {
margin: 0;
@ -34,6 +35,25 @@
text-align: center;
border-bottom: 1px solid #001858;
}
.chat-breadcrumb {
background-color: #f3d2c1;
padding: 8px 12px;
border-bottom: 1px solid #001858;
font-size: 0.85em;
text-align: left;
}
.chat-breadcrumb a {
color: #001858;
text-decoration: none;
}
.chat-breadcrumb a:hover {
color: #f582ae;
text-decoration: underline;
}
.chat-breadcrumb-separator {
margin: 0 6px;
opacity: 0.6;
}
.chat-messages {
flex: 1;
overflow-y: auto;
@ -195,6 +215,12 @@
.chat-container {
background-color: #444;
}
.chat-breadcrumb {
background-color: #555;
}
.chat-breadcrumb a {
color: #fef6e4;
}
.chat-header {
border-color: #fef6e4;
}
@ -259,6 +285,13 @@
{{template "navbar" .}}
<main>
<div class="chat-container">
<div class="chat-breadcrumb">
<a href="{{.BasePath}}/">Home</a>
<span class="chat-breadcrumb-separator"></span>
<a href="{{.BasePath}}/boards/">Boards</a>
<span class="chat-breadcrumb-separator"></span>
<span>{{.Board.Name}}</span>
</div>
<header class="chat-header">
<h2>{{.Board.Name}}</h2>
<p>{{.Board.Description}}</p>