diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index f3e333e..f25241c 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -1 +1,41 @@
-<h1>Hello World</h1>
+<div class="flex h-screen overflow-hidden">
+  <!-- Sidebar -->
+  <div
+    [class]="
+      isCollapsed
+        ? 'bg-primary w-20 transition-all duration-300 ease-in-out'
+        : 'bg-primary w-48 transition-all duration-300 ease-in-out'
+    "
+    class="transform">
+    <div class="p-5 text-primary-content">Logo</div>
+    <ul>
+      <li class="p-4" *ngFor="let item of menuItems">
+        <span class="cursor-pointer text-primary-content" *ngIf="isCollapsed">
+          {{ item.icon }}
+        </span>
+        <span
+          class="cursor-pointer text-primary-content"
+          *ngIf="!isCollapsed"
+          (click)="toggleSubMenu(item)">
+          {{ item.name }}
+        </span>
+        <ul
+          *ngIf="!isCollapsed && item.open"
+          class="transition-all duration-300 ease-in-out">
+          <li
+            class="pl-8 py-2 cursor-pointer text-primary-content"
+            *ngFor="let subItem of item.subItems">
+            {{ subItem }}
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <!-- Toggle Button -->
+  <button class="p-2 text-xl" (click)="toggleSidebar()">
+    {{ isCollapsed ? '👉' : '👈' }}
+  </button>
+
+  <!-- Main content -->
+  <div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
+</div>
diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
index 6a160af..abcc404 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -1,14 +1,64 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+} from '@angular/core';
+
+interface MenuItem {
+  name: string;
+  icon: string;
+  subItems: string[];
+  open?: boolean;
+}
 
 @Component({
   selector: 'app-dashboard-root',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   providers: [],
   templateUrl: './dashboard-root.component.html',
   styleUrl: './dashboard-root.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardRootComponent {
+  public isCollapsed: boolean = false;
+  public showMobileMenu: boolean = false;
+  public userHasInteracted: boolean = false;
+  public menuItems: MenuItem[] = [
+    { name: 'Home', icon: '🏠', subItems: [] },
+    { name: 'About', icon: 'ℹ️', subItems: [] },
+    {
+      name: 'Services',
+      icon: '🛠️',
+      subItems: ['Web Design', 'SEO', 'Development'],
+      open: false,
+    },
+    { name: 'Contact', icon: '📞', subItems: [] },
+  ];
+
   public constructor() {}
+
+  @HostListener('window:resize', ['$event'])
+  public onResize(): void {
+    if (!this.userHasInteracted) {
+      this.isCollapsed = window.innerWidth < 768;
+    } else {
+      if (window.innerWidth > 768) {
+        this.isCollapsed = false;
+        this.userHasInteracted = false;
+      }
+    }
+  }
+
+  public toggleSidebar(): void {
+    this.isCollapsed = !this.isCollapsed;
+    this.userHasInteracted = true;
+  }
+
+  public toggleSubMenu(item: any): void {
+    if (item.subItems.length) {
+      item.open = !item.open;
+    }
+  }
 }