angular-reccos-shop/src/app/layout/header/header.html at 756b09fb57be195681090c9f33cf0cecee1c5dc0 · enterpriseShop/angular-reccos-shop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<header
  class="fixed top-0 left-0 right-0 h-[64px] bg-white dark:bg-slate-800 border-b border-gray-200/80 dark:border-slate-700/80 z-30 px-4 flex items-center justify-between gap-4 transition-colors"
>
  <!-- Left Section: Logo & Sidebar Toggle -->
  <div class="flex items-center gap-3 shrink-0">
    <!-- Mobile Drawer Toggle -->
    <button
      type="button"
      (click)="shellState.toggleMobileDrawer()"
      class="lg:hidden p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
      title="Abrir Menu"
    >
      <app-icon name="menu" size="w-5 h-5" />
    </button>

    <!-- Desktop Sidebar Collapse Toggle -->
    <button
      type="button"
      (click)="shellState.toggleDesktopSidebar()"
      class="hidden lg:flex p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
      title="Reduzir/Expandir Sidebar"
    >
      <app-icon [name]="shellState.sidebarExpanded() ? 'menu' : 'chevron-right'" size="w-5 h-5" />
    </button>

    <!-- Brand Identity -->
    <a
      (click)="navigateHome()"
      (keydown.enter)="navigateHome()"
      tabindex="0"
      role="button"
      class="flex items-center gap-2.5 cursor-pointer group focus:outline-none"
    >
      <div
        class="w-8 h-8 rounded-xl bg-[#4F8A6B] text-white flex items-center justify-center font-bold text-sm shadow-xs group-hover:bg-[#38624C] transition-colors"
      >
        R
      </div>
      <div class="hidden sm:flex flex-col">
        <span
          class="font-bold text-sm text-gray-900 dark:text-slate-100 leading-none tracking-tight"
        >
          RECCOS
          <span class="text-[#4F8A6B]">SHOP</span>
        </span>
        <span class="text-[10px] text-gray-400 dark:text-slate-400 font-mono tracking-wider mt-0.5">
          CATÁLOGO V2.4
        </span>
      </div>
    </a>
  </div>

  <!-- Center Section: Global Quick Search Input -->
  <div class="flex-1 max-w-xl hidden md:block">
    <app-search-input
      [value]="shellState.globalSearchQuery()"
      (valueChange)="shellState.setGlobalSearch($event)"
      placeholder="Busca global por código Reccos, OEM, nome ou aplicação..."
    />
  </div>

  <!-- Right Section: Actions, Theme Toggle & User Menu -->
  <div class="flex items-center gap-2 shrink-0">
    <!-- Dark Mode Toggle Button -->
    <button
      type="button"
      (click)="themeService.toggleTheme()"
      class="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
      [title]="themeService.isDarkMode() ? 'Modo Claro' : 'Modo Escuro'"
    >
      <app-icon [name]="themeService.isDarkMode() ? 'sun' : 'moon'" size="w-5 h-5" />
    </button>

    <!-- Notifications Drawer Button -->
    <button
      type="button"
      (click)="shellState.openNotificationsDrawer()"
      class="relative p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
      title="Notificações"
    >
      <app-icon name="bell" size="w-5 h-5" />
      @if (shellState.unreadNotificationsCount() > 0) {
      <span
        class="absolute top-1.5 right-1.5 w-2 h-2 bg-[#4F8A6B] rounded-full ring-2 ring-white dark:ring-slate-800"
      ></span>
      }
    </button>

    <div class="h-6 w-px bg-gray-200 dark:bg-slate-700 mx-1"></div>

    <!-- User Profile Dropdown -->
    <app-dropdown [items]="userMenuItems">
      <div
        trigger
        class="flex items-center gap-2 p-1 rounded-xl hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer transition-colors"
      >
        <div
          class="w-8 h-8 rounded-full bg-[#EAF4EE] dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] font-semibold text-xs flex items-center justify-center border border-[#4F8A6B]/20"
        >
          JS
        </div>
        <div class="hidden xl:flex flex-col text-left pr-1">
          <span class="text-xs font-semibold text-gray-800 dark:text-slate-100 leading-tight">
            João Silva
          </span>
          <span class="text-[10px] text-gray-400 dark:text-slate-400 leading-none">
            Gestor de Catálogo
          </span>
        </div>
        <app-icon name="chevron-down" size="w-4 h-4 text-gray-400" />
      </div>
    </app-dropdown>
  </div>
</header>