admin/ShopSolution-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

good

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-17 13:33:34 +02:00
parent 0db90396ea
commit 9d08672c4e
2 changed files with 89 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/app/shared/components/layout/sidebar/sidebar.component.css
View File

@@ -4,12 +4,13 @@
--sidebar-width-collapsed: 96px;
--sidebar-padding: 1rem;
--sidebar-margin: 1rem;
--transition-speed: 0.35s; /* Leicht langsamere Animation für ein weicheres Gefühl */
--transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Eine professionelle Easing-Funktion */
--transition-speed: 0.35s;
--transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 1. Der Sidebar-Container */
.sidebar {
/* WICHTIG: Dies ist jetzt der Positionierungs-Kontext für den Button */
position: relative;
display: flex;
flex-direction: column;
@@ -24,14 +25,13 @@
transition: width var(--transition-speed) var(--transition-ease);
}
/* 2. Der Header-Bereich (vereinfacht und stabilisiert) */
/* 2. Der Header-Bereich */
.sidebar-header {
display: flex;
align-items: center;
/* KEIN justify-content hier. Die Anordnung wird anders gesteuert. */
gap: 0.75rem;
padding: 0.5rem;
height: 32px; /* Feste Höhe für Stabilität */
height: 32px;
}
.sidebar-logo {
@@ -41,43 +41,79 @@
color: #111827;
}
/* ======================================================= */
/* --- HIER IST DIE WICHTIGSTE ÄNDERUNG --- */
/* ======================================================= */
.sidebar-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
white-space: nowrap;
opacity: 1;
overflow: hidden; /* Verhindert, dass Text während der Animation herausragt */
/* Präzise, gestaffelte Transition für einen organischen Effekt */
transition: width var(--transition-speed) var(--transition-ease),
opacity calc(var(--transition-speed) / 2) var(--transition-ease),
margin-left var(--transition-speed) var(--transition-ease);
clip-path: inset(0 0% 0 0);
transition: clip-path var(--transition-speed) var(--transition-ease);
}
.sidebar-header app-button {
margin-left: auto; /* Dies ist jetzt der EINZIGE Mechanismus, der den Button nach rechts schiebt */
/* 3. Navigation und Footer */
.sidebar-nav {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sidebar-footer {
margin-top: auto;
}
.nav-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 500;
color: #4b5563;
white-space: nowrap;
transition: background-color 0.2s, color 0.2s;
overflow: hidden;
}
.nav-item:hover {
background-color: #f3f4f6;
}
.nav-item.active {
background-color: #3b82f6;
color: #fff;
}
.nav-item app-icon {
font-size: 1.25rem;
width: 32px;
flex-shrink: 0;
transition: transform var(--transition-speed) var(--transition-ease);
transform: rotate(0deg);
}
/* 3. Navigation und Footer (unverändert) */
.sidebar-nav { flex-grow: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-footer { margin-top: auto; }
.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; color: #4b5563; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.nav-item:hover { background-color: #f3f4f6; }
.nav-item.active { background-color: #3b82f6; color: #fff; }
.nav-item app-icon { font-size: 1.25rem; }
.nav-item span {
white-space: nowrap;
overflow: hidden;
opacity: 1;
transition: width 0.3s var(--transition-ease) 0.05s, opacity 0.2s var(--transition-ease);
clip-path: inset(0 0 0 0);
margin-left: 0.75rem;
transition: clip-path 0.3s var(--transition-ease),
margin-left 0.3s var(--transition-ease);
}
/* ======================================================= */
/* --- NEU: Positionierung des Toggle-Buttons --- */
/* ======================================================= */
.sidebar-toggle-btn {
position: absolute;
/* width: 36px;
height: 36px; */
border-radius: 50%;
/* border: 1px solid #e5e7eb; */
/* background-color: #fff; */
/* Startposition (aufgeklappt): Im Header, rechts */
top: calc(var(--sidebar-padding)); /* Sidebar-Padding + Header-Padding */
right: var(--sidebar-padding);
transform: rotate(180deg);
/* Sanfter Übergang für alle Änderungen */
transition: top var(--transition-speed) var(--transition-ease),
right var(--transition-speed) var(--transition-ease),
transform var(--transition-speed) var(--transition-ease),
box-shadow var(--transition-speed) var(--transition-ease);
}
/* ======================================================= */
@@ -88,25 +124,20 @@
width: var(--sidebar-width-collapsed);
}
/* WICHTIG: Keine Änderung am .sidebar-header selbst mehr nötig! */
.sidebar.collapsed .sidebar-title {
width: 0; /* Animiert die Breite auf 0 */
opacity: 0;
margin-left: -0.75rem; /* Kompensiert den 'gap', damit das Logo perfekt zentriert wird */
clip-path: inset(0 100% 0 0);
pointer-events: none;
}
.sidebar.collapsed .sidebar-header app-button {
transform: rotate(180deg);
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
.sidebar.collapsed .nav-item span {
width: 0;
opacity: 0;
clip-path: inset(0 100% 0 0);
margin-left: -20px;
pointer-events: none;
}
}
/* Endposition (zugeklappt): Außen, vertikal zentriert */
.sidebar.collapsed .sidebar-toggle-btn {
/* top: 50%; */
right: -18px;
transform: rotate(0deg);
}

23
src/app/shared/components/layout/sidebar/sidebar.component.html
View File

@@ -1,7 +1,6 @@
<aside class="sidebar" [class.collapsed]="isCollapsed">
<div class="sidebar-header">
<div class="sidebar-logo">
<!-- Ersetzen Sie dies durch Ihr Logo, z.B. als <img> oder <svg> -->
<svg
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
@@ -13,15 +12,8 @@
</svg>
</div>
<h1 class="sidebar-title">Wetask</h1>
<app-button
buttonType="icon"
iconName="double_arrow"
(click)="toggleSidebar()"
></app-button>
</div>
<!-- 2. Der Button zum Ein- und Ausklappen. Er ruft unsere neue Methode auf. -->
<nav class="sidebar-nav">
<a
class="nav-item"
@@ -29,7 +21,7 @@
(click)="setActive('dashboard')"
title="Übersicht"
>
<app-icon name="placeholder"></app-icon>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Übersicht</span>
</a>
@@ -39,7 +31,7 @@
(click)="setActive('analytics')"
title="Analysen"
>
<app-icon name="placeholder"></app-icon>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Analysen</span>
</a>
@@ -49,7 +41,7 @@
(click)="setActive('reports')"
title="Berichte"
>
<app-icon name="placeholder"></app-icon>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Berichte</span>
</a>
</nav>
@@ -61,8 +53,15 @@
(click)="setActive('settings')"
title="Einstellungen"
>
<app-icon name="placeholder"></app-icon>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Einstellungen</span>
</a>
</div>
<app-button
class="sidebar-toggle-btn"
buttonType="icon"
iconName="double_arrow"
(click)="toggleSidebar()"
></app-button>
</aside>