Body-Nav entfernen, Dashboard-Header mit Titel und Einstellungen-Link
- <nav id='nav'> samt nav.css komplett entfernt - Nav-Link-Logik aus app.js und router.js entfernt - Nav-Hide aus mobile.css entfernt - Dashboard-Template: Header mit Titel '// gott' und Link 'Einstellungen' - Dashboard CSS: .dashboard-header mit Flex-Layout - Einstellungen-Link navigiert zur Settings-Page
This commit is contained in:
1 parent
294145a04e
commit
9cffc5bbb7
7 files changed
+34
-69
No files matched your search
@@ -2,6 +2,29 @@
|
|||||||
padding: var(--page-padding);
|
padding: var(--page-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--page-spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-link {
|
||||||
|
color: var(--text);
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: var(--semi-transparent);
|
||||||
|
transition: opacity var(--transition-duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--text-accent);
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard section {
|
.dashboard section {
|
||||||
margin-bottom: var(--page-spacing);
|
margin-bottom: var(--page-spacing);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -1,8 +1,5 @@
|
|||||||
/* === Mobile === */
|
/* === Mobile === */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
#nav {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.msg, .tool-box {
|
.msg, .tool-box {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
#nav {
|
|
||||||
border-bottom: var(--border-width) solid var(--f2-border);
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--page-spacing);
|
|
||||||
width: var(--page-width);
|
|
||||||
max-width: 100%;
|
|
||||||
padding: var(--box-padding);
|
|
||||||
transition: var(--transition-duration);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-brand,
|
|
||||||
.nav-link {
|
|
||||||
padding: var(--badge-padding);
|
|
||||||
color: var(--text);
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--box-spacing);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover {
|
|
||||||
color: var(--text-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link.active {
|
|
||||||
color: var(--text-accent);
|
|
||||||
border-bottom-color: var(--primary);
|
|
||||||
}
|
|
||||||
+5
-11
@@ -10,7 +10,7 @@
|
|||||||
<link rel="stylesheet" href="css/theme.css">
|
<link rel="stylesheet" href="css/theme.css">
|
||||||
<link rel="stylesheet" href="css/base.css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<link rel="stylesheet" href="css/nav.css">
|
|
||||||
<link rel="stylesheet" href="css/form.css">
|
<link rel="stylesheet" href="css/form.css">
|
||||||
<link rel="stylesheet" href="css/dashboard.css">
|
<link rel="stylesheet" href="css/dashboard.css">
|
||||||
<link rel="stylesheet" href="css/chat.css">
|
<link rel="stylesheet" href="css/chat.css">
|
||||||
@@ -24,16 +24,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav id="nav">
|
|
||||||
<div class="nav-content">
|
|
||||||
<div class="nav-brand">// gott</div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="#" data-page="dashboard" class="nav-link active">Dashboard</a>
|
|
||||||
<a href="#" data-page="settings" class="nav-link">Einstellungen</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
||||||
<!-- Templates -->
|
<!-- Templates -->
|
||||||
@@ -41,6 +31,10 @@
|
|||||||
<template id="tpl-dashboard">
|
<template id="tpl-dashboard">
|
||||||
<div class="page dashboard">
|
<div class="page dashboard">
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
|
<div class="dashboard-header">
|
||||||
|
<h1 class="dashboard-title">// gott</h1>
|
||||||
|
<a href="#" id="dashboardSettingsLink" class="dashboard-link">Einstellungen</a>
|
||||||
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2>Sessions</h2>
|
<h2>Sessions</h2>
|
||||||
|
|||||||
@@ -1,15 +1,6 @@
|
|||||||
// ── App Init ──
|
// ── App Init ──
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
// Nav-Links
|
|
||||||
document.querySelectorAll('.nav-link[data-page]').forEach(link => {
|
|
||||||
link.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
navigateTo(link.dataset.page);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Route aus Hash laden
|
|
||||||
const { page, id } = parseHash();
|
const { page, id } = parseHash();
|
||||||
await navigateTo(page, { id });
|
await navigateTo(page, { id });
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -2,6 +2,12 @@
|
|||||||
|
|
||||||
registerPage('dashboard', {
|
registerPage('dashboard', {
|
||||||
async init() {
|
async init() {
|
||||||
|
// Einstellungen-Link
|
||||||
|
document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
navigateTo('settings');
|
||||||
|
});
|
||||||
|
|
||||||
// Globaler Click-Handler zum Schließen aller Card-Menüs
|
// Globaler Click-Handler zum Schließen aller Card-Menüs
|
||||||
document.addEventListener('click', this._closeCardMenus = () => closeAllCardMenus());
|
document.addEventListener('click', this._closeCardMenus = () => closeAllCardMenus());
|
||||||
|
|
||||||
|
|||||||
@@ -30,11 +30,6 @@ async function navigateTo(page, params = {}) {
|
|||||||
app.appendChild(tpl.content.cloneNode(true));
|
app.appendChild(tpl.content.cloneNode(true));
|
||||||
currentPage = page;
|
currentPage = page;
|
||||||
|
|
||||||
// Nav-Links aktualisieren
|
|
||||||
document.querySelectorAll('.nav-link').forEach(l => {
|
|
||||||
l.classList.toggle('active', l.dataset.page === page);
|
|
||||||
});
|
|
||||||
|
|
||||||
// URL Hash setzen
|
// URL Hash setzen
|
||||||
const hash = params.id ? `${page}/${params.id}` : page;
|
const hash = params.id ? `${page}/${params.id}` : page;
|
||||||
history.replaceState(null, '', `#${hash}`);
|
history.replaceState(null, '', `#${hash}`);
|
||||||
|
|||||||
Reference in new issue
Block a user