Functionnal UI with All Files

2025-07-15 02:29:44 +02:00
parent 9d7b1d3b76
commit 5929c758d3
52 changed files with 11979 additions and 0 deletions
--- a/src/app/view/components/menu-bar/menu-bar.component.scss
+++ b/src/app/view/components/menu-bar/menu-bar.component.scss
@ -0,0 +1,231 @@
+.menu-bar {
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border-primary);
+      box-shadow: var(--shadow-light);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      width: 100%;
+    }
+
+    .menu-container {
+      max-width: 950px;
+      margin: 0 auto;
+      padding: 0 var(--spacing-lg);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 48px;
+      gap: var(--spacing-lg);
+    }
+
+    // === BRAND SECTION ===
+    .menu-brand {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-md);
+      flex-shrink: 0;
+
+      .brand-icon {
+        color: var(--text-accent);
+        font-size: 18px;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: var(--color-primary);
+        }
+      }
+
+      .brand-text {
+        color: var(--text-primary);
+        font-weight: 600;
+        font-size: 16px;
+        letter-spacing: 0.3px;
+        white-space: nowrap;
+
+        @media (max-width: 600px) {
+          display: none;
+        }
+      }
+    }
+
+    // === NAVIGATION ACTIONS ===
+    .menu-actions {
+      display: flex;
+      gap: var(--spacing-sm);
+      align-items: center;
+    }
+
+    // === CONNECTION STATUS ===
+    .menu-status {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .menu-btn,
+    .menu-link {
+      // Reset & Base Styles
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      padding: var(--spacing-sm) var(--spacing-md);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-medium);
+      background: transparent;
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 1;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+      min-height: 32px;
+
+      // Focus Management
+      &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+      }
+
+      // Hover States
+      &:hover {
+        background: var(--bg-hover);
+        border-color: var(--border-secondary);
+        color: var(--text-primary);
+        transform: translateY(-1px);
+      }
+
+      // Active States
+      &:active {
+        transform: translateY(0);
+        background: var(--bg-active);
+        border-color: var(--border-active);
+      }
+
+      // Disabled States
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        transform: none;
+
+        &:hover {
+          background: transparent;
+          border-color: var(--border-primary);
+          color: var(--text-secondary);
+        }
+      }
+
+      // Icon Styling
+      i {
+        font-size: 12px;
+        width: 12px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+
+      // Text Styling
+      .btn-text {
+        font-family: inherit;
+
+        @media (max-width: 768px) {
+          display: none;
+        }
+      }
+    }
+
+    // === ROUTER LINK ACTIVE STATE ===
+    .menu-link {
+      &.active {
+        background: linear-gradient(135deg, var(--color-primary) 0%, var(--border-active) 100%);
+        border-color: var(--border-active);
+        color: white;
+        box-shadow: var(--shadow-medium);
+
+        &:hover {
+          background: linear-gradient(135deg, #005a9e 0%, var(--color-primary) 100%);
+          color: white;
+        }
+      }
+    }
+
+    // === RESPONSIVE DESIGN ===
+    @media (max-width: 768px) {
+      .menu-container {
+        padding: 0 var(--spacing-md);
+        height: 44px;
+      }
+
+      .menu-actions {
+        gap: var(--spacing-xs);
+      }
+
+      .menu-btn,
+      .menu-link {
+        padding: var(--spacing-sm);
+        min-width: 32px;
+        justify-content: center;
+
+        &:hover .btn-text {
+          display: none;
+        }
+      }
+    }
+
+    @media (max-width: 480px) {
+      .menu-container {
+        padding: 0 var(--spacing-sm);
+        height: 40px;
+      }
+
+      .menu-brand {
+        gap: var(--spacing-sm);
+
+        .brand-icon {
+          font-size: 16px;
+        }
+      }
+
+      .menu-btn,
+      .menu-link {
+        padding: var(--spacing-xs);
+        min-width: 28px;
+
+        i {
+          font-size: 11px;
+        }
+      }
+    }
+
+    // === ACCESSIBILITY ===
+    @media (prefers-reduced-motion: reduce) {
+      .menu-btn,
+      .menu-link {
+        transition: none;
+      }
+    }
+
+    // === HIGH CONTRAST MODE ===
+    @media (prefers-contrast: high) {
+      .menu-bar {
+        border-bottom-width: 2px;
+      }
+
+      .menu-btn,
+      .menu-link {
+        border-width: 2px;
+
+        &:focus-visible {
+          outline-width: 3px;
+        }
+      }
+    }
+
+    // === PRINT STYLES ===
+    @media print {
+      .menu-bar {
+        display: none;
+      }
+    }