marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-06-24 07:52:05 +02:00
parent 12125d0f2d
commit 3b1e84e17d
13 changed files with 46 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/App.vue
View File

@@ -14,6 +14,7 @@ const selectedTopic = ref(null)
const previewGuide = ref(null)
const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false')
const sidebarSticky = ref(false)
const fokusOffen = ref(false) // Baustein-Vollbild aktiv → Sidebar als Overlay über das Fokus-Overlay heben
const darkMode = ref(
localStorage.getItem('darkMode') === null
? window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -374,9 +375,9 @@ onMounted(async () => {
</script>
<template>
<div class="layout" :class="{ 'sidebar-floating': !sidebarPinned, 'sidebar-open': sidebarSticky }">
<div class="layout" :class="{ 'sidebar-floating': !sidebarPinned, 'sidebar-open': sidebarSticky, 'sidebar-over-fokus': fokusOffen && sidebarSticky }">
<div v-if="!sidebarPinned" class="hover-zone" @click="clickHoverZone"></div>
<div v-if="!sidebarPinned && sidebarSticky" class="sidebar-backdrop" @click="sidebarSticky = false"></div>
<div v-if="(!sidebarPinned && sidebarSticky) || (fokusOffen && sidebarSticky)" class="sidebar-backdrop" @click="sidebarSticky = false"></div>
<TopicSidebar
:topics="topics"
:selectedTopic="selectedTopic"
@@ -441,6 +442,8 @@ onMounted(async () => {
:ansichtModus="ansichtModus"
@progressChanged="loadStats(); loadBausteine()"
@setAnsicht="setAnsicht"
@open-sidebar="sidebarSticky = true"
@fokus-active="fokusOffen = $event"
/>
<div v-else class="empty-main">
<p>Thema in der Sidebar anlegen oder auswählen.</p>
@@ -583,6 +586,21 @@ textarea::placeholder {
transform: translateX(0);
}
/* Baustein-Vollbild: Sidebar als Overlay ÜBER das Fokus-Overlay (z-index 40) heben.
Greift für gepinnt UND floating. */
.layout.sidebar-over-fokus > .sidebar {
position: fixed;
left: 0;
top: 0;
height: 100dvh;
transform: translateX(0);
z-index: 50;
box-shadow: 0 0 16px var(--shadow);
}
.layout.sidebar-over-fokus .sidebar-backdrop {
z-index: 49;
}
.empty-main {
flex: 1;
display: flex;