feat: unified header across all pages (Notion-inspired breadcrumb + actions)
Created a shared _header.html template with: - Hamburger button (toggle sidebar) - Breadcrumb navigation with clickable segments and separators - Page icon + title display - Right-side action buttons (configurable per page) - Dropdown panel CSS for More/New menus Updated all pages to use the unified header: - workspaces.html: Home / Workspaces + login/settings - workspace.html: Workspace — Projects + login/settings - local_workspace.html: workspace name - gitea_workspace.html: Home / owner/repo + New/Upload/Refresh/Settings - page_editor.html: title + Edited/Share/Copy/Favorite/More dropdown - settings.html: Settings Added CSS for breadcrumb, dropdown panel components.
This commit is contained in:
+1
-41
@@ -329,47 +329,7 @@
|
||||
|
||||
<!-- Topbar -->
|
||||
{% block topbar %}
|
||||
<header class="topbar">
|
||||
<!-- Hamburger / uncollapse sidebar -->
|
||||
<button class="hamburger-btn" @click="sidebarCollapsed ? (sidebarCollapsed = false) : (mobileSidebarOpen = true, sidebarCollapsed = false)" title="Menu">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||
</button>
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-breadcrumb">
|
||||
<span x-text="workspaceName"></span>
|
||||
<span class="text-dim">/</span>
|
||||
<span class="text-dim" x-text="currentPage"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-center">
|
||||
<div class="topbar-page-title">
|
||||
<span class="page-icon" x-text="pageIcon"></span>
|
||||
<span x-text="pageTitle"></span>
|
||||
</div>
|
||||
<div class="topbar-page-status">
|
||||
<span>🔒</span> Private
|
||||
<span style="cursor:pointer;">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
<span class="text-xs text-dim">Edited <span x-text="lastEdited"></span></span>
|
||||
<button class="topbar-btn">🔔</button>
|
||||
<button class="topbar-btn">🕒</button>
|
||||
<button class="topbar-btn">🔍</button>
|
||||
<button class="topbar-btn share-btn">🔗 Share ▾</button>
|
||||
<button class="topbar-btn">⭐</button>
|
||||
<button class="topbar-btn" @click="showNewPageMenu = !showNewPageMenu" style="position:relative;">
|
||||
New ▾
|
||||
<div class="dropdown-panel" :class="{ visible: showNewPageMenu }" style="top:100%; right:0; left:auto; min-width:200px;" @click.stop>
|
||||
<div class="dropdown-option" @click="createEmptyPage()"><span class="option-icon">📄</span> Empty page</div>
|
||||
<div class="dropdown-option" @click="createDatabase()"><span class="option-icon">📊</span> Database</div>
|
||||
<div class="dropdown-option" @click="createBoard()"><span class="option-icon">📋</span> Kanban board</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{% include '_header.html' %}
|
||||
{% endblock %}
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
Reference in New Issue
Block a user