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

23
src/app/core/components/default-layout/default-layout.component.css
View File

@@ -1,11 +1,10 @@
:host { :host {
display: block; display: block;
/* Stellt sicher, dass der Host-Container die volle Höhe einnimmt */ /* Stellt sicher, dass der Host-Container die volle Höhe einnimmt */
height: 100vh; height: 100vh;
} }
.main-layout-container { .main-layout-container {
padding:2rem;
display: grid; display: grid;
height: 100%; /* Wichtig, damit das Grid die Höhe vom Host erbt */ height: 100%; /* Wichtig, damit das Grid die Höhe vom Host erbt */
@@ -29,11 +28,17 @@
} }
/* Diese Regeln bleiben unverändert, da sie korrekt sind */ /* Diese Regeln bleiben unverändert, da sie korrekt sind */
app-page-header { grid-area: 1 / 1 / 2 / 6; } app-page-header {
app-sidebar { grid-area: 2 / 1 / 6 / 2; } margin: 1rem;
.main-content { grid-area: 1 / 1 / 2 / 6;
padding:2rem; }
padding-right: 0; app-sidebar {
grid-area: 2 / 2 / 6 / 6; margin: 1rem;
grid-area: 2 / 1 / 6 / 2;
}
.main-content {
background-color: var(--color-body-bg);
margin: 1rem;
grid-area: 2 / 2 / 6 / 6;
overflow-y: auto; /* Fügt Scrollen hinzu, falls der Inhalt den Bereich übersteigt */ overflow-y: auto; /* Fügt Scrollen hinzu, falls der Inhalt den Bereich übersteigt */
} }

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

@@ -2,6 +2,10 @@
display: block; display: block;
} }
.header-left {
margin-left: 1.5rem;
}
.main-header { .main-header {
display: flex; display: flex;
justify-content: space-between; 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"> <header class="main-header">
<div class="header-left"> <div class="header-left">
<app-search-bar></app-search-bar> logo
</div> </div>
<div class="header-actions"> <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-expanded: 280px;
--sidebar-width-collapsed: 96px; --sidebar-width-collapsed: 96px;
--sidebar-padding: 1rem; --sidebar-padding: 1rem;
--sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */ --sidebar-margin: 1rem;
--transition-speed: 0.35s; /* Lokale Geschwindigkeit für spezifische Sidebar-Animationen */ --transition-speed: 0.35s;
--transition-ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
} }
@@ -13,74 +13,49 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 1.5rem; /* Reduzierter Abstand */
width: var(--sidebar-width-expanded); width: var(--sidebar-width-expanded);
height: calc(100vh - (var(--sidebar-margin) * 2)); height: calc(100vh - 2rem - 46px);
/* margin: var(--sidebar-margin); */
padding: var(--sidebar-padding); padding: var(--sidebar-padding);
/* background-color: var(--color-surface); ANGEPASST */ /* border-right: 1px solid var(--color-border); */
/* border: 1px solid var(--color-border); ANGEPASST */ /* border-radius: var(--border-radius-md); */
border-radius: var(--border-radius-md); /* ANGEPASST */
transition: width var(--transition-speed) var(--transition-ease); transition: width var(--transition-speed) var(--transition-ease);
/* background-color: var(--color-surface); */
} }
/* 2. Der Header-Bereich */ /* ======================================================= */
.sidebar-header { /* --- HEADER & SEPARATER BUTTON WURDEN ENTFERNT --- */
display: flex; /* ======================================================= */
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
height: auto;
}
.sidebar-logo { /* 2. Navigation */
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 */
.sidebar-nav { .sidebar-nav {
flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
} }
.sidebar-footer {
margin-top: auto;
}
.nav-item { .nav-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: var(--border-radius-md); /* ANGEPASST */ border-radius: var(--border-radius-md);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
color: var(--color-text-light); /* ANGEPASST */ color: var(--color-text-light);
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; position: relative;
cursor: pointer;
} }
.nav-item:hover { .nav-item:hover {
background-color: var(--color-body-bg-hover); /* ANGEPASST */ background-color: var(--color-body-bg-hover);
color: var(--color-text); /* ANGEPASST */ color: var(--color-text);
} }
.nav-item.active { .nav-item.active {
background: var(--color-primary); /* ANGEPASST */ background: var(--color-primary);
color: #fff; color: #fff;
box-shadow: var(--box-shadow-sm); /* ANGEPASST für Tiefe */ box-shadow: var(--box-shadow-sm);
} }
.nav-item app-icon { .nav-item app-icon {
font-size: 1.25rem; font-size: 1.25rem;
@@ -88,7 +63,7 @@
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
background-color: transparent; /* ANGEPASST */ background-color: transparent;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.nav-item span { .nav-item span {
@@ -101,46 +76,26 @@
z-index: 1; z-index: 1;
} }
/* 4. Positionierung des Toggle-Buttons */ /* 3. Stile für den eingeklappten Zustand (.collapsed) */
.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) */
.sidebar.collapsed { .sidebar.collapsed {
width: var(--sidebar-width-collapsed); width: var(--sidebar-width-collapsed);
} }
.sidebar.collapsed .sidebar-title { /* WICHTIG: Zentriert das Icon, wenn der Text weg ist, und entfernt den Leerraum */
clip-path: inset(0 100% 0 0); .sidebar.collapsed .nav-item {
pointer-events: none; /* 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; Dieser Wert muss raus er*/
pointer-events: none; pointer-events: none;
} }
.sidebar.collapsed .sidebar-toggle-btn { /* 4. Zustandsabhängige Hintergrundfarben für das Icon */
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 */
.nav-item:hover app-icon { .nav-item:hover app-icon {
background-color: transparent; /* ANGEPASST */ background-color: var(--color-body-bg-hover);
} }
.nav-item.active app-icon { .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"> <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"> <nav class="sidebar-nav">
<a <div class="nav-item" (click)="toggleSidebar()">
class="nav-item" <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
[class.active]="activeRoute === 'dashboard'"
(click)="setActive('dashboard')" <span>Toggle</span>
title="Übersicht"
> </div>
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Übersicht</span>
</a>
<a <div
class="nav-item" class="nav-item"
[class.active]="activeRoute === 'analytics'" [class.active]="activeRoute === 'home'"
(click)="setActive('analytics')" (click)="setActive('home')"
title="Analysen"
> >
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon> <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Analysen</span>
</a> <span>Home</span>
<a </div>
<div
class="nav-item" class="nav-item"
[class.active]="activeRoute === 'reports'" [class.active]="activeRoute === 'uebersicht'"
(click)="setActive('reports')" (click)="setActive('uebersicht')"
title="Berichte"
> >
<app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon> <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
<span>Berichte</span>
</a> <span>Übersicht</span>
</div>
</nav> </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> </aside>

1
src/styles.css
View File

@@ -20,6 +20,7 @@
--color-text: #2c3e50; --color-text: #2c3e50;
--color-text-light: #7f8c8d; --color-text-light: #7f8c8d;
--color-body-bg: #f4f7fa; --color-body-bg: #f4f7fa;
--color-body-bg-active: rgb(238, 238, 240);
--color-body-bg-hover: #f2f3f5; --color-body-bg-hover: #f2f3f5;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-border: #e0e6ed; --color-border: #e0e6ed;