From a43b2efdcac2d49af243bd07ab3cc3c567fda614 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Tue, 30 Dec 2025 01:20:52 +0100
Subject: [PATCH] Creates comprehensive UI layout for Salon OS

Develops a responsive and feature-rich HTML layout with custom styling for the Salon OS application

Includes key UI components:
- Side navigation menu
- Top bar with search and profile actions
- Responsive theme switching
- Placeholder content for dashboard
- Detailed CSS design system with light/dark modes

Provides foundational structure for application interface
---
 wwwroot/poc-layout.html | 921 +++++++++++++++++++++++++++++++---------
 1 file changed, 726 insertions(+), 195 deletions(-)

diff --git a/wwwroot/poc-layout.html b/wwwroot/poc-layout.html
index fa3d523..b025832 100644
--- a/wwwroot/poc-layout.html
+++ b/wwwroot/poc-layout.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Salon OS</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
   <style>
     /* ==========================================
        FONT FACE (Poppins)
@@ -160,10 +161,9 @@
       border-bottom: 1px solid var(--color-border);
     }
 
-    swp-side-menu-header svg {
-      width: 28px;
-      height: 28px;
-      fill: var(--color-teal);
+    swp-side-menu-header i {
+      font-size: 26px;
+      color: var(--color-teal);
     }
 
     swp-side-menu-logo {
@@ -217,10 +217,8 @@
       font-weight: 500;
     }
 
-    swp-side-menu-item svg {
-      width: 20px;
-      height: 20px;
-      fill: currentColor;
+    swp-side-menu-item i {
+      font-size: 20px;
       flex-shrink: 0;
     }
 
@@ -233,55 +231,12 @@
       margin-top: auto;
     }
 
-    swp-side-menu-user {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 8px;
-      border-radius: 6px;
-      background: var(--color-background-alt);
-    }
-
-    swp-side-menu-user-avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: var(--color-teal);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 600;
-    }
-
-    swp-side-menu-user-info {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 0;
-    }
-
-    swp-side-menu-user-name {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--color-text);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    swp-side-menu-user-role {
-      font-size: 11px;
-      color: var(--color-text-secondary);
-    }
-
-    swp-side-menu-logout {
+    swp-side-menu-action {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
-      padding: 8px;
+      padding: 10px;
       font-size: 13px;
       color: var(--color-text-secondary);
       background: transparent;
@@ -292,16 +247,22 @@
       font-family: var(--font-family);
     }
 
-    swp-side-menu-logout:hover {
+    swp-side-menu-action:hover {
       background: var(--color-background-hover);
+    }
+
+    swp-side-menu-action.lock:hover {
+      color: var(--color-amber);
+      border-color: var(--color-amber);
+    }
+
+    swp-side-menu-action.logout:hover {
       color: var(--color-red);
       border-color: var(--color-red);
     }
 
-    swp-side-menu-logout svg {
-      width: 16px;
-      height: 16px;
-      fill: currentColor;
+    swp-side-menu-action i {
+      font-size: 18px;
     }
 
     /* ==========================================
@@ -332,10 +293,9 @@
       border-color: var(--color-teal);
     }
 
-    swp-topbar-search svg {
-      width: 18px;
-      height: 18px;
-      fill: var(--color-text-secondary);
+    swp-topbar-search i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
       flex-shrink: 0;
     }
 
@@ -381,16 +341,15 @@
       cursor: pointer;
       transition: background 150ms ease;
       position: relative;
+      color: var(--color-text-secondary);
     }
 
     swp-topbar-btn:hover {
       background: var(--color-background-hover);
     }
 
-    swp-topbar-btn svg {
-      width: 20px;
-      height: 20px;
-      fill: var(--color-text-secondary);
+    swp-topbar-btn i {
+      font-size: 22px;
     }
 
     swp-notification-badge {
@@ -465,77 +424,428 @@
       color: var(--color-text-secondary);
     }
 
-    swp-topbar-profile svg {
-      width: 16px;
-      height: 16px;
-      fill: var(--color-text-secondary);
-      transition: transform 200ms ease;
-    }
-
-    swp-topbar-profile[aria-expanded="true"] svg {
-      transform: rotate(180deg);
-    }
-
-    /* Profile Dropdown */
-    swp-profile-dropdown {
-      position: absolute;
-      top: calc(100% + 8px);
-      right: 0;
-      width: 200px;
-      background: var(--color-surface);
-      border: 1px solid var(--color-border);
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    /* ==========================================
+       PROFILE DRAWER
+       ========================================== */
+    swp-drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.2);
       opacity: 0;
       visibility: hidden;
-      transform: translateY(-8px);
-      transition: all 200ms ease;
-      z-index: 100;
+      transition: opacity 200ms ease, visibility 200ms ease;
+      z-index: 900;
     }
 
-    swp-topbar-profile[aria-expanded="true"] swp-profile-dropdown {
+    swp-drawer-overlay.open {
       opacity: 1;
       visibility: visible;
-      transform: translateY(0);
     }
 
-    swp-profile-dropdown-item {
+    swp-profile-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 320px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+    }
+
+    swp-profile-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-drawer-header {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 10px 14px;
-      font-size: 13px;
+      justify-content: space-between;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-title {
+      font-size: 14px;
+      font-weight: 600;
       color: var(--color-text);
+    }
+
+    swp-drawer-close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-drawer-close i {
+      font-size: 20px;
+    }
+
+    swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    /* Profile header in drawer */
+    swp-drawer-profile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-drawer-avatar {
+      width: 72px;
+      height: 72px;
+      border-radius: 50%;
+      background: var(--color-purple);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    swp-drawer-name {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 2px;
+    }
+
+    swp-drawer-role {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-drawer-email {
+      font-size: 13px;
+      color: var(--color-teal);
+    }
+
+    /* Drawer sections */
+    swp-drawer-section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-drawer-section-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 4px;
+    }
+
+    swp-drawer-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
       cursor: pointer;
       transition: background 150ms ease;
     }
 
-    swp-profile-dropdown-item:first-child {
-      border-radius: 7px 7px 0 0;
-    }
-
-    swp-profile-dropdown-item:last-child {
-      border-radius: 0 0 7px 7px;
-    }
-
-    swp-profile-dropdown-item:hover {
+    swp-drawer-item:hover {
       background: var(--color-background-hover);
     }
 
-    swp-profile-dropdown-item.danger {
-      color: var(--color-red);
+    swp-drawer-item i {
+      font-size: 20px;
+      color: var(--color-text-secondary);
     }
 
-    swp-profile-dropdown-item svg {
-      width: 18px;
-      height: 18px;
-      fill: currentColor;
+    swp-drawer-item-text {
+      flex: 1;
+      font-size: 14px;
+      color: var(--color-text);
     }
 
-    swp-profile-dropdown-divider {
-      height: 1px;
+    swp-drawer-item-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Theme toggle in drawer */
+    swp-drawer-theme-toggle {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+    }
+
+    swp-drawer-theme-toggle swp-drawer-item-text {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-drawer-theme-toggle i {
+      font-size: 20px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-theme-switch {
+      width: 44px;
+      height: 24px;
       background: var(--color-border);
-      margin: 4px 0;
+      border-radius: 12px;
+      position: relative;
+      cursor: pointer;
+      transition: background 200ms ease;
+    }
+
+    swp-theme-switch::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      background: white;
+      border-radius: 50%;
+      transition: transform 200ms ease;
+    }
+
+    swp-theme-switch.active {
+      background: var(--color-teal);
+    }
+
+    swp-theme-switch.active::after {
+      transform: translateX(20px);
+    }
+
+    /* Drawer footer */
+    swp-drawer-footer {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 16px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-drawer-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      background: transparent;
+      color: var(--color-text-secondary);
+    }
+
+    swp-drawer-action:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-drawer-action.lock:hover {
+      color: var(--color-amber);
+      border-color: var(--color-amber);
+    }
+
+    swp-drawer-action.logout:hover {
+      color: var(--color-red);
+      border-color: var(--color-red);
+    }
+
+    swp-drawer-action i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       LOCK SCREEN
+       ========================================== */
+    swp-lock-screen {
+      position: fixed;
+      inset: 0;
+      background: var(--color-background);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 2000;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 300ms ease, visibility 300ms ease;
+    }
+
+    swp-lock-screen.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    swp-lock-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      padding: 40px;
+      background: var(--color-surface);
+      border-radius: 16px;
+      border: 1px solid var(--color-border);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    }
+
+    swp-lock-icon {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--color-teal) 12%, transparent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-lock-icon i {
+      font-size: 36px;
+      color: var(--color-teal);
+    }
+
+    swp-lock-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-lock-subtitle {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      margin-top: -16px;
+    }
+
+    swp-pin-input {
+      display: flex;
+      gap: 12px;
+    }
+
+    swp-pin-digit {
+      width: 56px;
+      height: 64px;
+      border: 2px solid var(--color-border);
+      border-radius: 12px;
+      background: var(--color-surface);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      transition: all 150ms ease;
+    }
+
+    swp-pin-digit.filled {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, transparent);
+    }
+
+    swp-pin-digit.error {
+      border-color: var(--color-red);
+      background: color-mix(in srgb, var(--color-red) 8%, transparent);
+      animation: shake 0.4s ease;
+    }
+
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      20%, 60% { transform: translateX(-8px); }
+      40%, 80% { transform: translateX(8px); }
+    }
+
+    swp-pin-keypad {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-top: 8px;
+    }
+
+    swp-pin-key {
+      width: 72px;
+      height: 56px;
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      background: var(--color-surface);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+      font-weight: 500;
+      color: var(--color-text);
+      cursor: pointer;
+      transition: all 150ms ease;
+      font-family: var(--font-family);
+    }
+
+    swp-pin-key:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-teal);
+    }
+
+    swp-pin-key:active {
+      transform: scale(0.95);
+    }
+
+    swp-pin-key.empty {
+      visibility: hidden;
+    }
+
+    swp-pin-key.backspace {
+      font-size: 20px;
+    }
+
+    swp-pin-key.backspace i {
+      font-size: 24px;
+    }
+
+    swp-lock-time {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-top: -12px;
+    }
+
+    swp-lock-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: -8px;
     }
 
     /* ==========================================
@@ -562,10 +872,9 @@
       color: var(--color-text-secondary);
     }
 
-    swp-content-placeholder svg {
-      width: 64px;
-      height: 64px;
-      fill: var(--color-border);
+    swp-content-placeholder i {
+      font-size: 64px;
+      color: var(--color-border);
       margin-bottom: 16px;
     }
 
@@ -588,7 +897,7 @@
     <!-- Side Menu -->
     <swp-side-menu>
       <swp-side-menu-header>
-        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
+        <i class="ph ph-squares-four"></i>
         <swp-side-menu-logo>Salon OS</swp-side-menu-logo>
       </swp-side-menu-header>
 
@@ -597,15 +906,15 @@
         <swp-side-menu-group>
           <swp-side-menu-label>Dashboard</swp-side-menu-label>
           <swp-side-menu-item data-active="true">
-            <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+            <i class="ph ph-squares-four"></i>
             Dashboard
           </swp-side-menu-item>
           <swp-side-menu-item onclick="location.href='poc-calendar.html'">
-            <svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
+            <i class="ph ph-calendar"></i>
             Kalender
           </swp-side-menu-item>
           <swp-side-menu-item>
-            <svg viewBox="0 0 24 24"><path d="M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H7V4h10v16zm-4.5-1c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5z"/></svg>
+            <i class="ph ph-device-mobile"></i>
             Kasse
           </swp-side-menu-item>
         </swp-side-menu-group>
@@ -614,19 +923,19 @@
         <swp-side-menu-group>
           <swp-side-menu-label>Data</swp-side-menu-label>
           <swp-side-menu-item onclick="location.href='poc-produkter.html'">
-            <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
+            <i class="ph ph-package"></i>
             Produkter & Lager
           </swp-side-menu-item>
           <swp-side-menu-item onclick="location.href='poc-leverandoerer.html'">
-            <svg viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
+            <i class="ph ph-truck"></i>
             Leverandører
           </swp-side-menu-item>
           <swp-side-menu-item>
-            <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+            <i class="ph ph-users"></i>
             Kunder
           </swp-side-menu-item>
           <swp-side-menu-item onclick="location.href='poc-employee.html'">
-            <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+            <i class="ph ph-user"></i>
             Medarbejdere
           </swp-side-menu-item>
         </swp-side-menu-group>
@@ -635,7 +944,7 @@
         <swp-side-menu-group>
           <swp-side-menu-label>Analyse</swp-side-menu-label>
           <swp-side-menu-item>
-            <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
+            <i class="ph ph-chart-bar"></i>
             Statistik & Rapporter
           </swp-side-menu-item>
         </swp-side-menu-group>
@@ -644,78 +953,48 @@
         <swp-side-menu-group>
           <swp-side-menu-label>System</swp-side-menu-label>
           <swp-side-menu-item>
-            <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
+            <i class="ph ph-gear"></i>
             Indstillinger
           </swp-side-menu-item>
           <swp-side-menu-item>
-            <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>
+            <i class="ph ph-credit-card"></i>
             Abonnement & Konto
           </swp-side-menu-item>
         </swp-side-menu-group>
       </swp-side-menu-nav>
 
       <swp-side-menu-footer>
-        <swp-side-menu-user>
-          <swp-side-menu-user-avatar>MJ</swp-side-menu-user-avatar>
-          <swp-side-menu-user-info>
-            <swp-side-menu-user-name>Maria Jensen</swp-side-menu-user-name>
-            <swp-side-menu-user-role>Administrator</swp-side-menu-user-role>
-          </swp-side-menu-user-info>
-        </swp-side-menu-user>
-        <swp-side-menu-logout>
-          <svg viewBox="0 0 24 24"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
-          Log ud
-        </swp-side-menu-logout>
+        <swp-side-menu-action class="lock">
+          <i class="ph ph-lock"></i>
+          Lås skærm
+        </swp-side-menu-action>
       </swp-side-menu-footer>
     </swp-side-menu>
 
     <!-- Top Bar -->
     <swp-app-topbar>
       <swp-topbar-search>
-        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
+        <i class="ph ph-magnifying-glass"></i>
         <input type="text" placeholder="Søg i Salon OS..." id="globalSearch">
         <kbd>⌘K</kbd>
       </swp-topbar-search>
 
       <swp-topbar-actions>
-        <!-- Theme Toggle -->
-        <swp-topbar-btn id="themeToggle" title="Skift tema">
-          <svg id="sunIcon" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
-          <svg id="moonIcon" viewBox="0 0 24 24" style="display:none"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
-        </swp-topbar-btn>
-
         <!-- Notifications -->
         <swp-topbar-btn id="notificationsBtn" title="Notifikationer">
-          <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
+          <i class="ph ph-bell"></i>
           <swp-notification-badge>3</swp-notification-badge>
         </swp-topbar-btn>
 
         <swp-topbar-divider></swp-topbar-divider>
 
-        <!-- Profile -->
-        <swp-topbar-profile id="profileDropdown" aria-expanded="false">
+        <!-- Profile (opens drawer) -->
+        <swp-topbar-profile id="profileTrigger">
           <swp-profile-avatar>MJ</swp-profile-avatar>
           <swp-profile-info>
             <swp-profile-name>Maria Jensen</swp-profile-name>
             <swp-profile-role>Administrator</swp-profile-role>
           </swp-profile-info>
-          <svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
-
-          <swp-profile-dropdown>
-            <swp-profile-dropdown-item>
-              <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-              Min profil
-            </swp-profile-dropdown-item>
-            <swp-profile-dropdown-item>
-              <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
-              Indstillinger
-            </swp-profile-dropdown-item>
-            <swp-profile-dropdown-divider></swp-profile-dropdown-divider>
-            <swp-profile-dropdown-item class="danger">
-              <svg viewBox="0 0 24 24"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
-              Log ud
-            </swp-profile-dropdown-item>
-          </swp-profile-dropdown>
         </swp-topbar-profile>
       </swp-topbar-actions>
     </swp-app-topbar>
@@ -723,7 +1002,7 @@
     <!-- Main Content -->
     <swp-main-content>
       <swp-content-placeholder>
-        <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+        <i class="ph ph-squares-four"></i>
         <swp-content-placeholder-title>Dashboard</swp-content-placeholder-title>
         <swp-content-placeholder-text>
           Vælg et menupunkt i venstre side for at navigere til den ønskede sektion.
@@ -734,23 +1013,169 @@
     </swp-main-content>
   </swp-app-layout>
 
-  <script>
-    // Theme toggle
-    const themeToggle = document.getElementById('themeToggle');
-    const sunIcon = document.getElementById('sunIcon');
-    const moonIcon = document.getElementById('moonIcon');
-    const root = document.documentElement;
+  <!-- Profile Drawer -->
+  <swp-drawer-overlay id="drawerOverlay"></swp-drawer-overlay>
+  <swp-profile-drawer id="profileDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>Min profil</swp-drawer-title>
+      <swp-drawer-close id="drawerClose">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
 
-    function updateIcons() {
-      const isDark = root.classList.contains('dark-mode') ||
-        (window.matchMedia('(prefers-color-scheme: dark)').matches && !root.classList.contains('light-mode'));
-      sunIcon.style.display = isDark ? 'none' : 'block';
-      moonIcon.style.display = isDark ? 'block' : 'none';
+    <swp-drawer-content>
+      <swp-drawer-profile>
+        <swp-drawer-avatar>MJ</swp-drawer-avatar>
+        <swp-drawer-name>Maria Jensen</swp-drawer-name>
+        <swp-drawer-role>Administrator</swp-drawer-role>
+        <swp-drawer-email>maria@salon.dk</swp-drawer-email>
+      </swp-drawer-profile>
+
+      <swp-drawer-section>
+        <swp-drawer-section-label>Konto</swp-drawer-section-label>
+        <swp-drawer-item>
+          <i class="ph ph-user-circle"></i>
+          <swp-drawer-item-text>Rediger profil</swp-drawer-item-text>
+          <i class="ph ph-caret-right"></i>
+        </swp-drawer-item>
+        <swp-drawer-item>
+          <i class="ph ph-key"></i>
+          <swp-drawer-item-text>Skift adgangskode</swp-drawer-item-text>
+          <i class="ph ph-caret-right"></i>
+        </swp-drawer-item>
+        <swp-drawer-item>
+          <i class="ph ph-bell"></i>
+          <swp-drawer-item-text>Notifikationer</swp-drawer-item-text>
+          <swp-drawer-item-hint>3 ulæste</swp-drawer-item-hint>
+        </swp-drawer-item>
+      </swp-drawer-section>
+
+      <swp-drawer-section>
+        <swp-drawer-section-label>Udseende</swp-drawer-section-label>
+        <swp-drawer-theme-toggle id="themeToggleDrawer">
+          <swp-drawer-item-text>
+            <i class="ph ph-moon"></i>
+            Mørkt tema
+          </swp-drawer-item-text>
+          <swp-theme-switch id="themeSwitch"></swp-theme-switch>
+        </swp-drawer-theme-toggle>
+      </swp-drawer-section>
+
+      <swp-drawer-section>
+        <swp-drawer-section-label>Support</swp-drawer-section-label>
+        <swp-drawer-item>
+          <i class="ph ph-question"></i>
+          <swp-drawer-item-text>Hjælp & Support</swp-drawer-item-text>
+          <i class="ph ph-caret-right"></i>
+        </swp-drawer-item>
+        <swp-drawer-item>
+          <i class="ph ph-info"></i>
+          <swp-drawer-item-text>Om Salon OS</swp-drawer-item-text>
+          <swp-drawer-item-hint>v2.1.0</swp-drawer-item-hint>
+        </swp-drawer-item>
+      </swp-drawer-section>
+    </swp-drawer-content>
+
+    <swp-drawer-footer>
+      <swp-drawer-action class="logout">
+        <i class="ph ph-sign-out"></i>
+        Log ud
+      </swp-drawer-action>
+    </swp-drawer-footer>
+  </swp-profile-drawer>
+
+  <!-- Lock Screen -->
+  <swp-lock-screen id="lockScreen">
+    <swp-lock-content>
+      <swp-lock-icon>
+        <i class="ph ph-lock"></i>
+      </swp-lock-icon>
+      <swp-lock-title>Skærm låst</swp-lock-title>
+      <swp-lock-subtitle>Indtast PIN for at fortsætte</swp-lock-subtitle>
+
+      <swp-lock-time id="lockTime">Låst kl. 14:32</swp-lock-time>
+
+      <swp-pin-input id="pinInput">
+        <swp-pin-digit></swp-pin-digit>
+        <swp-pin-digit></swp-pin-digit>
+        <swp-pin-digit></swp-pin-digit>
+        <swp-pin-digit></swp-pin-digit>
+      </swp-pin-input>
+
+      <swp-pin-keypad id="pinKeypad">
+        <swp-pin-key data-key="1">1</swp-pin-key>
+        <swp-pin-key data-key="2">2</swp-pin-key>
+        <swp-pin-key data-key="3">3</swp-pin-key>
+        <swp-pin-key data-key="4">4</swp-pin-key>
+        <swp-pin-key data-key="5">5</swp-pin-key>
+        <swp-pin-key data-key="6">6</swp-pin-key>
+        <swp-pin-key data-key="7">7</swp-pin-key>
+        <swp-pin-key data-key="8">8</swp-pin-key>
+        <swp-pin-key data-key="9">9</swp-pin-key>
+        <swp-pin-key class="empty"></swp-pin-key>
+        <swp-pin-key data-key="0">0</swp-pin-key>
+        <swp-pin-key class="backspace" data-key="backspace">
+          <i class="ph ph-backspace"></i>
+        </swp-pin-key>
+      </swp-pin-keypad>
+
+      <swp-lock-hint>Indtast 4 cifre for at låse op</swp-lock-hint>
+    </swp-lock-content>
+  </swp-lock-screen>
+
+  <script>
+    // Elements
+    const root = document.documentElement;
+    const profileTrigger = document.getElementById('profileTrigger');
+    const profileDrawer = document.getElementById('profileDrawer');
+    const drawerOverlay = document.getElementById('drawerOverlay');
+    const drawerClose = document.getElementById('drawerClose');
+    const themeSwitch = document.getElementById('themeSwitch');
+    const themeToggleDrawer = document.getElementById('themeToggleDrawer');
+
+    // Open drawer
+    function openDrawer() {
+      profileDrawer.classList.add('open');
+      drawerOverlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
     }
 
-    updateIcons();
+    // Close drawer
+    function closeDrawer() {
+      profileDrawer.classList.remove('open');
+      drawerOverlay.classList.remove('open');
+      document.body.style.overflow = '';
+    }
 
-    themeToggle.addEventListener('click', () => {
+    // Profile trigger opens drawer
+    profileTrigger.addEventListener('click', openDrawer);
+
+    // Close on overlay click
+    drawerOverlay.addEventListener('click', closeDrawer);
+
+    // Close on X button
+    drawerClose.addEventListener('click', closeDrawer);
+
+    // Close on Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeDrawer();
+    });
+
+    // Theme toggle functionality
+    function isDarkMode() {
+      return root.classList.contains('dark-mode') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches && !root.classList.contains('light-mode'));
+    }
+
+    function updateThemeSwitch() {
+      if (isDarkMode()) {
+        themeSwitch.classList.add('active');
+      } else {
+        themeSwitch.classList.remove('active');
+      }
+    }
+
+    function toggleTheme() {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       if (prefersDark) {
@@ -761,22 +1186,14 @@
         root.classList.remove('light-mode');
       }
 
-      updateIcons();
-    });
+      updateThemeSwitch();
+    }
 
-    // Profile dropdown
-    const profileDropdown = document.getElementById('profileDropdown');
+    // Initialize theme switch state
+    updateThemeSwitch();
 
-    profileDropdown.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const isExpanded = profileDropdown.getAttribute('aria-expanded') === 'true';
-      profileDropdown.setAttribute('aria-expanded', !isExpanded);
-    });
-
-    // Close dropdown when clicking outside
-    document.addEventListener('click', () => {
-      profileDropdown.setAttribute('aria-expanded', 'false');
-    });
+    // Theme toggle click
+    themeToggleDrawer.addEventListener('click', toggleTheme);
 
     // Keyboard shortcut for search (Cmd/Ctrl + K)
     document.addEventListener('keydown', (e) => {
@@ -785,6 +1202,120 @@
         document.getElementById('globalSearch').focus();
       }
     });
+
+    // ==========================================
+    // LOCK SCREEN
+    // ==========================================
+    const lockScreen = document.getElementById('lockScreen');
+    const pinInput = document.getElementById('pinInput');
+    const pinKeypad = document.getElementById('pinKeypad');
+    const lockBtn = document.querySelector('swp-side-menu-action.lock');
+    const pinDigits = pinInput.querySelectorAll('swp-pin-digit');
+    const lockTimeEl = document.getElementById('lockTime');
+
+    let currentPin = '';
+
+    // Show lock screen
+    function showLockScreen() {
+      closeDrawer();
+      lockScreen.classList.add('active');
+      document.body.style.overflow = 'hidden';
+      currentPin = '';
+      updatePinDisplay();
+
+      // Set lock time
+      const now = new Date();
+      const hours = now.getHours().toString().padStart(2, '0');
+      const minutes = now.getMinutes().toString().padStart(2, '0');
+      lockTimeEl.textContent = `Låst kl. ${hours}:${minutes}`;
+    }
+
+    // Hide lock screen
+    function hideLockScreen() {
+      lockScreen.classList.remove('active');
+      document.body.style.overflow = '';
+      currentPin = '';
+      updatePinDisplay();
+    }
+
+    // Update PIN display
+    function updatePinDisplay() {
+      pinDigits.forEach((digit, index) => {
+        digit.classList.remove('filled', 'error');
+        if (index < currentPin.length) {
+          digit.textContent = '•';
+          digit.classList.add('filled');
+        } else {
+          digit.textContent = '';
+        }
+      });
+    }
+
+    // Show error animation
+    function showPinError() {
+      pinDigits.forEach(digit => {
+        digit.classList.add('error');
+      });
+      setTimeout(() => {
+        currentPin = '';
+        updatePinDisplay();
+      }, 400);
+    }
+
+    const correctPin = '3911';
+
+    // Handle PIN key press
+    function handlePinKey(key) {
+      if (key === 'backspace') {
+        currentPin = currentPin.slice(0, -1);
+        updatePinDisplay();
+        return;
+      }
+
+      if (currentPin.length >= 4) return;
+
+      currentPin += key;
+      updatePinDisplay();
+
+      // Check if 4 digits entered
+      if (currentPin.length === 4) {
+        setTimeout(() => {
+          if (currentPin === correctPin) {
+            hideLockScreen();
+          } else {
+            showPinError();
+          }
+        }, 200);
+      }
+    }
+
+    // Lock button click
+    lockBtn.addEventListener('click', showLockScreen);
+
+    // Keypad clicks
+    pinKeypad.addEventListener('click', (e) => {
+      const key = e.target.closest('swp-pin-key');
+      if (!key || key.classList.contains('empty')) return;
+      handlePinKey(key.dataset.key);
+    });
+
+    // Keyboard support for PIN entry
+    document.addEventListener('keydown', (e) => {
+      // Alt+L to lock screen
+      if (e.altKey && e.key === 'x') {
+        e.preventDefault();
+        showLockScreen();
+        return;
+      }
+
+      if (!lockScreen.classList.contains('active')) return;
+
+      if (e.key >= '0' && e.key <= '9') {
+        handlePinKey(e.key);
+      } else if (e.key === 'Backspace') {
+        handlePinKey('backspace');
+      }
+    });
   </script>
 </body>
 </html>