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 15:59:50 +02:00
parent 0d5ac83c77
commit b8b0e167af
6 changed files with 70 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/shared/components/layout/page-header/page-header.component.css
View File

@@ -2,6 +2,10 @@
display: block;
}
.header-left {
margin-left: 1.5rem;
}
.main-header {
display: flex;
justify-content: space-between;

2
src/app/shared/components/layout/page-header/page-header.component.html
View File

@@ -1,6 +1,6 @@
<header class="main-header">
<div class="header-left">
<app-search-bar></app-search-bar>
logo
</div>
<div class="header-actions">

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

@@ -3,8 +3,8 @@
--sidebar-width-expanded: 280px;
--sidebar-width-collapsed: 96px;
--sidebar-padding: 1rem;
--sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */
--transition-speed: 0.35s; /* Lokale Geschwindigkeit für spezifische Sidebar-Animationen */
--sidebar-margin: 1rem;
--transition-speed: 0.35s;
--transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -13,74 +13,49 @@
position: relative;
display: flex;
flex-direction: column;
gap: 2rem;
gap: 1.5rem; /* Reduzierter Abstand */
width: var(--sidebar-width-expanded);
height: calc(100vh - (var(--sidebar-margin) * 2));
/* margin: var(--sidebar-margin); */
height: calc(100vh - 2rem - 46px);
padding: var(--sidebar-padding);
/* background-color: var(--color-surface); ANGEPASST */
/* border: 1px solid var(--color-border); ANGEPASST */
border-radius: var(--border-radius-md); /* ANGEPASST */
/* border-right: 1px solid var(--color-border); */
/* border-radius: var(--border-radius-md); */
transition: width var(--transition-speed) var(--transition-ease);
/* background-color: var(--color-surface); */
}
/* 2. Der Header-Bereich */
.sidebar-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
height: auto;
}
/* ======================================================= */
/* --- HEADER & SEPARATER BUTTON WURDEN ENTFERNT --- */
/* ======================================================= */
.sidebar-logo {
flex-shrink: 0;
width: 32px;
height: 32px;
color: var(--color-primary); /* ANGEPASST für Akzent */
}
.sidebar-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text); /* ANGEPASST */
white-space: nowrap;
clip-path: inset(0 0% 0 0);
transition: clip-path var(--transition-speed) var(--transition-ease);
}
/* 3. Navigation und Footer */
/* 2. Navigation */
.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: var(--border-radius-md); /* ANGEPASST */
border-radius: var(--border-radius-md);
text-decoration: none;
font-weight: 500;
color: var(--color-text-light); /* ANGEPASST */
color: var(--color-text-light);
white-space: nowrap;
transition: background-color 0.2s, color 0.2s;
overflow: hidden;
position: relative;
cursor: pointer;
}
.nav-item:hover {
background-color: var(--color-body-bg-hover); /* ANGEPASST */
color: var(--color-text); /* ANGEPASST */
background-color: var(--color-body-bg-hover);
color: var(--color-text);
}
.nav-item.active {
background: var(--color-primary); /* ANGEPASST */
background: var(--color-primary);
color: #fff;
box-shadow: var(--box-shadow-sm); /* ANGEPASST für Tiefe */
box-shadow: var(--box-shadow-sm);
}
.nav-item app-icon {
font-size: 1.25rem;
@@ -88,7 +63,7 @@
flex-shrink: 0;
position: relative;
z-index: 2;
background-color: transparent; /* ANGEPASST */
background-color: transparent;
transition: background-color 0.2s;
}
.nav-item span {
@@ -101,46 +76,26 @@
z-index: 1;
}
/* 4. Positionierung des Toggle-Buttons */
.sidebar-toggle-btn {
position: absolute;
border-radius: 50%;
top: calc(var(--sidebar-padding) + 5px);
right: var(--sidebar-padding);
transform: scale(0.55) rotate(180deg);
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);
}
/* 5. Stile für den eingeklappten Zustand (.collapsed) */
/* 3. Stile für den eingeklappten Zustand (.collapsed) */
.sidebar.collapsed {
width: var(--sidebar-width-collapsed);
}
.sidebar.collapsed .sidebar-title {
clip-path: inset(0 100% 0 0);
pointer-events: none;
/* WICHTIG: Zentriert das Icon, wenn der Text weg ist, und entfernt den Leerraum */
.sidebar.collapsed .nav-item {
/* justify-content: center; */
}
.sidebar.collapsed .nav-item span {
clip-path: inset(0 100% 0 0);
margin-left: -20px;
/* margin-left: -20px; Dieser Wert muss raus er*/
pointer-events: none;
}
.sidebar.collapsed .sidebar-toggle-btn {
right: -2px;
transform: scale(0.55) rotate(0deg); /* Hinzugefügt für vertikale Zentrierung */
/* box-shadow: var(--box-shadow-md); ANGEPASST */
}
/* 6. Zustandsabhängige Hintergrundfarben für das Icon */
/* 4. Zustandsabhängige Hintergrundfarben für das Icon */
.nav-item:hover app-icon {
background-color: transparent; /* ANGEPASST */
background-color: var(--color-body-bg-hover);
}
.nav-item.active app-icon {
background: transparent;
background: var(--color-primary);
}

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

@@ -1,67 +1,33 @@
<aside class="sidebar" [class.collapsed]="isCollapsed">
<div class="sidebar-header">
<div class="sidebar-logo">
<svg
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
>
<path
d="M24 8C19.2 8 15.2 9.4 12 11.8C15.4 12.8 18.3 15.6 19.4 19C20.6 18.6 21.8 18.4 23 18.4C24.4 18.4 25.6 18.6 26.8 19C27.9 15.6 30.8 12.8 34.2 11.8C31 9.4 27.2 8 24 8ZM11.8 12.2C8.6 14.6 6 18.2 4.6 22.4C7.8 22.8 10.6 24.6 12.4 27.2C11.4 25.4 10.8 23.2 10.6 21C9.4 17.6 10 14.4 11.8 12.2ZM36.2 12.2C38 14.4 38.6 17.6 37.4 21C37.2 23.2 36.6 25.4 35.6 27.2C37.4 24.6 40.2 22.8 43.4 22.4C42 18.2 39.4 14.6 36.2 12.2ZM4.2 24C4 25.2 4 26.4 4 27.8C4 32.8 6 37.4 9.4 40.6C10.2 37.6 12 35 14.4 33C12 30.8 10.2 28.2 9.2 25.4C7.2 25.2 5.4 24.6 4.2 24ZM20.8 27.8C18.4 29.8 16.6 32.4 15.4 35.4C17.6 38.2 20.6 40 24 40C27.4 40 30.4 38.2 32.6 35.4C31.4 32.4 29.6 29.8 27.2 27.8C25.6 29 24.2 29.2 23.2 29.2C22.4 29.2 21.4 29 20.8 27.8ZM38.8 25.4C37.8 28.2 36 30.8 33.6 33C36 35 37.8 37.6 38.6 40.6C42 37.4 44 32.8 44 27.8C44 26.4 44 25.2 43.8 24C42.6 24.6 40.8 25.2 38.8 25.4Z"
/>
</svg>
</div>
<h1 class="sidebar-title">Wetask</h1>
</div>
<nav class="sidebar-nav">
<a
class="nav-item"
[class.active]="activeRoute === 'dashboard'"
(click)="setActive('dashboard')"
title="Übersicht"
>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Übersicht</span>
</a>
<div class="nav-item" (click)="toggleSidebar()">
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Toggle</span>
</div>
<a
<div
class="nav-item"
[class.active]="activeRoute === 'analytics'"
(click)="setActive('analytics')"
title="Analysen"
[class.active]="activeRoute === 'home'"
(click)="setActive('home')"
>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Analysen</span>
</a>
<a
<span>Home</span>
</div>
<div
class="nav-item"
[class.active]="activeRoute === 'reports'"
(click)="setActive('reports')"
title="Berichte"
[class.active]="activeRoute === 'uebersicht'"
(click)="setActive('uebersicht')"
>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Berichte</span>
</a>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Übersicht</span>
</div>
</nav>
<div class="sidebar-footer">
<a
class="nav-item"
[class.active]="activeRoute === 'settings'"
(click)="setActive('settings')"
title="Einstellungen"
>
<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>