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

rdy

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-17 13:47:04 +02:00
parent 3b2fef82c2
commit c17bec1ca0
1 changed files with 21 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,6 @@
/* 1. Der Sidebar-Container */ /* 1. Der Sidebar-Container */
.sidebar { .sidebar {
/* WICHTIG: Dies ist jetzt der Positionierungs-Kontext für den Button */
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -71,6 +70,7 @@
white-space: nowrap; white-space: nowrap;
transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s;
overflow: hidden; overflow: hidden;
position: relative;
} }
.nav-item:hover { .nav-item:hover {
background-color: #f3f4f6; background-color: #f3f4f6;
@@ -83,6 +83,12 @@
font-size: 1.25rem; font-size: 1.25rem;
width: 32px; width: 32px;
flex-shrink: 0; flex-shrink: 0;
position: relative;
z-index: 2;
/* NEU: Fester Start-Hintergrund (Farbe der Sidebar) statt 'inherit' */
background-color: #fff;
/* NEU: Fügt eine sanfte Transition für den Farbwechsel hinzu */
transition: background-color 0.2s;
} }
.nav-item span { .nav-item span {
white-space: nowrap; white-space: nowrap;
@@ -90,38 +96,24 @@
margin-left: 0.75rem; margin-left: 0.75rem;
transition: clip-path 0.3s var(--transition-ease), transition: clip-path 0.3s var(--transition-ease),
margin-left 0.3s var(--transition-ease); margin-left 0.3s var(--transition-ease);
position: relative;
z-index: 1;
} }
/* ======================================================= */ /* 4. Positionierung des Toggle-Buttons */
/* --- NEU: Positionierung des Toggle-Buttons --- */
/* ======================================================= */
.sidebar-toggle-btn { .sidebar-toggle-btn {
position: absolute; position: absolute;
/* width: 36px;
height: 36px; */
border-radius: 50%; border-radius: 50%;
/* border: 1px solid #e5e7eb; */ top: calc(var(--sidebar-padding) + 4px);
/* background-color: #fff; */
/* Startposition (aufgeklappt): Im Header, rechts */
top: calc(
var(--sidebar-padding) + 5px
); /* Sidebar-Padding + Header-Padding */
right: var(--sidebar-padding); right: var(--sidebar-padding);
transform: rotate(180deg); transform: rotate(180deg);
/* Sanfter Übergang für alle Änderungen */
transition: top var(--transition-speed) var(--transition-ease), transition: top var(--transition-speed) var(--transition-ease),
right var(--transition-speed) var(--transition-ease), right var(--transition-speed) var(--transition-ease),
transform var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease),
box-shadow var(--transition-speed) var(--transition-ease); box-shadow var(--transition-speed) var(--transition-ease);
} }
/* ======================================================= */ /* 5. Stile für den eingeklappten Zustand (.collapsed) */
/* --- Stile für den eingeklappten Zustand (.collapsed) --- */
/* ======================================================= */
.sidebar.collapsed { .sidebar.collapsed {
width: var(--sidebar-width-collapsed); width: var(--sidebar-width-collapsed);
} }
@@ -131,19 +123,21 @@
pointer-events: none; pointer-events: none;
} }
.sidebar.collapsed .sidebar-logo {
justify-content: center;
}
.sidebar.collapsed .nav-item span { .sidebar.collapsed .nav-item span {
clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
margin-left: -20px; margin-left: -20px;
pointer-events: none; pointer-events: none;
} }
/* Endposition (zugeklappt): Außen, vertikal zentriert */
.sidebar.collapsed .sidebar-toggle-btn { .sidebar.collapsed .sidebar-toggle-btn {
/* top: 50%; */
right: -18px; right: -18px;
transform: rotate(0deg); transform: rotate(0deg);
} }
.nav-item:hover app-icon {
background-color: #f3f4f6; /* Derselbe Hintergrund wie .nav-item:hover */
}
.nav-item.active app-icon {
background-color: #3b82f6; /* Derselbe Hintergrund wie .nav-item.active */
}