@flusys/ng-layout 4.0.0-rc → 4.0.2

package/README.md

@@ -11,7 +11,7 @@
 | Property | Value |
 |----------|-------|
 | Package | `@flusys/ng-layout` |
-| Version | 4.0.0-rc |
+| Version | 4.0.2 |
 | Dependencies | ng-core, ng-shared |
 | Build | `npm run build:ng-layout` |
 
@@ -73,6 +73,7 @@ export class AppComponent {
 **Layout Modes:**
 - **Static** - Sidebar always visible on desktop, overlay on mobile
 - **Overlay** - Sidebar overlays content when opened
+- **Topbar** - Horizontal menu bar at the top for desktop, sidebar on mobile
 
 **Dynamic CSS Classes:**
 | Class | Condition |
@@ -90,18 +91,27 @@ export class AppComponent {
 
 ### AppTopbar
 
-Application header with branding and user actions.
+Application header with branding and user actions. Supports different layouts via `menuMode`.
 
+**Static/Overlay Modes:**
 ```
 ┌─────────────────────────────────────────────────────────────────┐
 │ [≡] CompanyName          [☀/🌙] [🎨] [...] [Apps] [🏢] [👤]    │
 └─────────────────────────────────────────────────────────────────┘
 ```
 
+**Topbar Mode (Desktop):**
+```
+┌───────────────────────────────────────────────────────────────────────────────┐
+│ CompanyName  [Dashboard] [Admin] [IAM] [Storage]  [☀/🌙] [🎨] [Apps] [🏢] [👤]│
+└───────────────────────────────────────────────────────────────────────────────┘
+```
+
 | Element | Description |
 |---------|-------------|
-| `[≡]` | Menu toggle → `layoutService.onMenuToggle()` |
+| `[≡]` | Menu toggle (Static/Overlay on mobile, Topbar on desktop) |
 | CompanyName | From `layoutService.companyName` → links to `/` |
+| Menu Items | In topbar mode, rendered horizontally on desktop |
 | `[☀/🌙]` | Dark mode toggle |
 | `[🎨]` | AppConfigurator panel |
 | `[...]` | Mobile menu (hidden on desktop) |
@@ -109,6 +119,11 @@ Application header with branding and user actions.
 | `[🏢]` | AppCompanyBranchSelector (if company feature enabled) |
 | `[👤]` | AppProfile dropdown |
 
+**Behavior:**
+- **Topbar on desktop:** Renders menu items horizontally with hover-triggered submenus
+- **Topbar on mobile:** Falls back to vertical sidebar menu
+- **Static/Overlay:** Standard sidebar behavior (unchanged)
+
 ### AppMenu & AppMenuitem
 
 Menu container renders permission-filtered items from `layoutService.menu`.
@@ -133,6 +148,75 @@ Menu container renders permission-filtered items from `layoutService.menu`.
 :host ul.submenu-expanded { max-height: 1000px; }
 ```
 
+**Topbar Mode Behavior:**
+- `@if (layoutService.isTopbar())` - Conditional rendering for topbar-specific UI
+- `onMouseEnter()` - Triggers submenu display on hover (topbar only)
+- Parent link positioning tracked via `@viewChild('parentLink')` for submenu alignment
+- Submenu visibility controlled by `submenu-expanded` / `submenu-collapsed` classes
+- Submenus only expand/collapse in sidebar mode (`!layoutService.isTopbar()`)
+
+---
+
+## Topbar Mode (v4.0.1)
+
+Horizontal navigation bar at the top of the page, replacing traditional sidebar on desktop.
+
+### Features
+
+- **Desktop:** Horizontal menu items with hover-triggered submenus
+- **Mobile:** Falls back to traditional vertical sidebar
+- **Responsive:** Auto-switches between topbar and sidebar based on viewport
+- **Submenus:** Positioned below parent items, auto-adjusted to viewport
+- **Persistence:** Menu visibility state persists in `layoutService.layoutState().topbarMenuVisible`
+
+### Layout Behavior
+
+**Desktop (Topbar Mode):**
+- Menu items rendered horizontally next to company name
+- Hovering over items with children shows submenu
+- No sidebar visible
+- Menu toggle only appears on mobile
+
+**Mobile (Topbar Mode):**
+- Menu items rendered in vertical sidebar (same as overlay mode)
+- Topbar shows menu toggle button
+- Sidebar overlays content when open
+
+### Configuration
+
+```typescript
+// Set menu mode to topbar
+layoutService.updateLayoutConfig({ menuMode: 'topbar' });
+
+// Or persist via LayoutPersistenceService
+layoutPersistenceService.save({
+  preset: 'Aura',
+  primary: 'blue',
+  menuMode: 'topbar',
+  darkTheme: false,
+});
+```
+
+### Styling
+
+Topbar styles are defined in `assets/layout/_topbar_nav.scss`:
+
+- `.layout-topbar-nav-horizontal` - Main horizontal nav container
+- `.layout-topbar-nav-hidden` - Hide nav on mobile (Tailwind: `hidden`)
+- Submenu positioning with `position: absolute`
+- Chevron icon for topbar (vs angle-down for sidebar)
+- Hover effects with opacity and visibility transitions
+
+### AppMenuitem Changes for Topbar
+
+When in topbar mode:
+- Submenu toggler icon changes to `pi-chevron-right` (vs `pi-angle-down`)
+- Parent links show `cursor: default` instead of pointer
+- Submenus positioned absolutely with auto-adjustment logic
+- Hover-triggered submenu display (vs click-triggered in sidebar)
+
+---
+
 ### AppFooter
 
 Displays branding from `LayoutService`: `appName`, `authorName`, `authorUrl`
@@ -144,7 +228,7 @@ User profile dropdown in topbar.
 **Features:**
 - User info (picture, name, email) with text truncation
 - Profile link → `/profile`
-- Copy SignUp Link → `{origin}/auth/register?companySlug={slug}`
+- Copy SignUp Link → `{origin}/auth/register?companySlug={slug}` (hidden if sign-up disabled)
 - Logout with toast feedback
 
 **Computed Signals:**
@@ -153,6 +237,12 @@ User profile dropdown in topbar.
 | `userName` | `authState.loginUserData()?.name` | `'Guest'` |
 | `userEmail` | `authState.loginUserData()?.email` | `''` |
 | `profilePicture` | `layoutService.userProfilePictureUrl()` | `''` |
+| `signUpEnabled` | `APP_CONFIG` via `isSignUpEnabled()` helper | `false` |
+
+**Sign-up Link Visibility:**
+- Only shown when `APP_CONFIG.services.auth.features.signUp === true`
+- Controlled via `signUpEnabled()` computed signal
+- Uses `isSignUpEnabled()` helper from `@flusys/ng-core`
 
 ### AppCompanyBranchSelector
 
@@ -207,7 +297,7 @@ Theme customizer dropdown.
 | Primary colors | `emerald`, `green`, `lime`, `orange`, `amber`, `yellow`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `noir` |
 | Surface colors | `slate`, `gray`, `zinc`, `neutral`, `stone`, `soho`, `viva`, `ocean` |
 | Presets | `Aura` (default), `Lara`, `Nora` |
-| Menu mode | `static`, `overlay` |
+| Menu mode | `static`, `overlay`, `topbar` |
 
 Uses `$t()`, `updatePreset()`, `updateSurfacePalette()` from `@primeuix/themes`.
 
@@ -241,7 +331,7 @@ interface LayoutConfig {
   primary?: string;          // "emerald" | "green" | etc.
   surface?: string | null;   // "slate" | "gray" | etc.
   darkTheme?: boolean;
-  menuMode?: 'static' | 'overlay';
+  menuMode?: 'static' | 'overlay' | 'topbar';
 }
 
 interface LayoutState {
@@ -249,6 +339,7 @@ interface LayoutState {
   overlayMenuActive?: boolean;
   staticMenuMobileActive?: boolean;
   menuHoverActive?: boolean;
+  topbarMenuVisible?: boolean;  // For topbar mode on desktop
 }
 
 interface UserProfile { id: string; name: string; email: string; profilePictureUrl?: string | null; }
@@ -281,7 +372,9 @@ interface CompanyProfile { id: string; name: string; slug: string; logoUrl?: str
 | `hasApps` | Whether apps exist |
 | `isDarkTheme` | Dark theme active |
 | `isSidebarActive` | Sidebar visible |
+| `isStatic` | Static menu mode |
 | `isOverlay` | Overlay menu mode |
+| `isTopbar` | Topbar menu mode (horizontal nav on desktop) |
 | `getPrimary` / `getSurface` | Current colors |
 | `userName` / `userEmail` | User info (with fallbacks) |
 | `userProfilePictureUrl` / `companyLogoUrl` | Image URLs |
@@ -337,7 +430,7 @@ Persists layout configuration to localStorage.
 
 **Validation:**
 - Invalid preset → `'Aura'`
-- Invalid menuMode → `'static'`
+- Invalid menuMode → `'static'` (valid: `'static'`, `'overlay'`, `'topbar'`)
 - Non-boolean darkTheme → `false`
 - Version mismatch or invalid JSON → Clear and return null
 
@@ -480,21 +573,51 @@ export class AppComponent {
 
 ### Menu Configuration
 
+**Centralized Config File (v4.0.1):**
+
 ```typescript
-const menuItems: IMenuItem[] = [
-  { id: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/dashboard'] },
+// app-menu.config.ts
+import { IMenuItem } from '@flusys/ng-layout';
+
+export const APP_MENU: IMenuItem[] = [
   {
-    id: 'admin', label: 'Admin', icon: 'pi pi-cog',
+    id: 'dashboard',
+    labelKey: 'menu.dashboard',
+    icon: 'pi pi-home',
+    iconType: 1,
+    routerLink: ['/'],
+  },
+  {
+    id: 'admin',
+    labelKey: 'menu.administration',
+    icon: 'pi pi-cog',
+    iconType: 1,
     permissionLogic: { id: 'admin', type: 'action', actionId: 'admin.access' },
     children: [
-      { id: 'users', label: 'Users', icon: 'pi pi-users', routerLink: ['/admin/users'] },
-      { id: 'roles', label: 'Roles', icon: 'pi pi-shield', routerLink: ['/admin/roles'] },
+      {
+        id: 'users',
+        labelKey: 'menu.users',
+        icon: 'pi pi-users',
+        iconType: 1,
+        routerLink: ['/admin/users'],
+      },
     ],
   },
-  { separator: true },
-  { id: 'settings', label: 'Settings', icon: 'pi pi-cog', routerLink: ['/settings'] },
 ];
-layoutService.setMenu(menuItems);
+```
+
+**Benefits:**
+- Centralized menu definition in config file
+- Uses `labelKey` for localization (not hardcoded labels)
+- Easier to maintain and share across multiple layouts
+- Supports nested children and permission logic
+
+**Usage in App:**
+```typescript
+import { APP_MENU } from './config/app-menu.config.ts';
+import { LayoutService } from '@flusys/ng-layout';
+
+layoutService.setMenu(APP_MENU);
 ```
 
 ### Profile Setup

package/assets/layout/_footer.scss

@@ -5,4 +5,11 @@
     padding: 1rem 0 1rem 0;
     gap: 0.5rem;
     border-top: 1px solid var(--surface-border);
+
+    .logo-image {
+      height: 2rem;
+      width: auto;
+      max-width: 2.5rem;
+      object-fit: contain;
+    }
 }

package/assets/layout/_responsive.scss

@@ -57,6 +57,24 @@
             }
         }
 
+        &.layout-topbar-mode {
+            .layout-sidebar {
+                display: none;
+            }
+
+            .layout-main-container {
+                margin-left: 0;
+                padding-left: 2rem;
+                padding-top: 6rem;
+            }
+
+            &.layout-topbar-nav-hidden {
+                .layout-main-container {
+                    padding-top: 4rem;
+                }
+            }
+        }
+
         .layout-mask {
             display: none;
         }

package/assets/layout/_topbar.scss

@@ -1,161 +1,192 @@
-@use 'mixins' as *;
+@use "mixins" as *;
 
 .layout-topbar {
-    position: fixed;
-    height: 4rem;
-    z-index: 997;
-    left: 0;
-    top: 0;
-    width: 100%;
-    padding: 0 2rem;
-    background-color: var(--surface-card);
-    transition: left var(--layout-section-transition-duration);
+  position: fixed;
+  height: 4rem;
+  z-index: 997;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 2rem;
+  background-color: var(--surface-card);
+  transition: left var(--layout-section-transition-duration);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  .layout-topbar-logo-container {
+    width: 20rem;
     display: flex;
     align-items: center;
+    flex-shrink: 0;
 
-    .layout-topbar-logo-container {
-        width: 20rem;
-        display: flex;
-        align-items: center;
+    &.layout-topbar-logo-container-desktop {
+      justify-content: space-between;
     }
+  }
 
-    .layout-topbar-logo {
-        display: inline-flex;
-        align-items: center;
-        font-size: 1.5rem;
-        border-radius: var(--content-border-radius);
-        color: var(--text-color);
-        font-weight: 500;
-        gap: 0.5rem;
-
-        svg {
-            width: 3rem;
-        }
-
-        &:focus-visible {
-            @include focused();
-        }
+  .layout-topbar-logo {
+    display: inline-flex;
+    align-items: center;
+    font-size: 1.5rem;
+    border-radius: var(--content-border-radius);
+    color: var(--text-color);
+    font-weight: 500;
+    gap: 0.5rem;
+
+    svg {
+      width: 3rem;
     }
 
-    .layout-topbar-action {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--text-color-secondary);
-        border-radius: 50%;
-        width: 2.5rem;
-        height: 2.5rem;
-        color: var(--text-color);
-        transition: background-color var(--element-transition-duration);
-        cursor: pointer;
-
-        &:hover {
-            background-color: var(--surface-hover);
-        }
-
-        &:focus-visible {
-            @include focused();
-        }
-
-        i {
-            font-size: 1.25rem;
-        }
-
-        span {
-            font-size: 1rem;
-            display: none;
-        }
+    .logo-image {
+      height: 2.5rem;
+      width: auto;
+      max-width: 3rem;
+      object-fit: contain;
+    }
 
-        &.layout-topbar-action-highlight {
-            background-color: var(--primary-color);
-            color: var(--primary-contrast-color);
-        }
+    &:focus-visible {
+      @include focused();
     }
+  }
 
-    .layout-menu-button {
-        margin-right: 0.5rem;
+  .layout-topbar-action {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--text-color-secondary);
+    border-radius: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: var(--text-color);
+    transition: background-color var(--element-transition-duration);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: var(--surface-hover);
     }
 
-    .layout-topbar-menu-button {
-        display: none;
+    &:focus-visible {
+      @include focused();
     }
 
-    .layout-topbar-actions {
-        margin-left: auto;
-        display: flex;
-        gap: 1rem;
+    i {
+      font-size: 1.25rem;
     }
 
-    .layout-topbar-menu-content {
-        display: flex;
-        gap: 1rem;
+    span {
+      font-size: 1rem;
+      display: none;
     }
 
-    .layout-config-menu {
-        display: flex;
-        gap: 1rem;
+    &.layout-topbar-action-highlight {
+      background-color: var(--primary-color);
+      color: var(--primary-contrast-color);
+    }
+  }
+
+  .layout-topbar-action-right {
+    margin-left: auto !important;
+    margin-right: -0.9rem !important;
+  }
+
+  .layout-menu-button {
+    margin-right: 0.5rem;
+  }
+
+  .layout-menu-button-right {
+    order: -1;
+    margin-right: 1rem;
+    opacity: 1;
+    transition: opacity var(--element-transition-duration);
+
+    &.hidden {
+      display: none;
+      opacity: 0;
     }
+  }
+
+  .layout-topbar-menu-button {
+    display: none;
+  }
+
+  .layout-topbar-actions {
+    margin-left: auto;
+    display: flex;
+    gap: 1rem;
+    flex-shrink: 0;
+  }
+
+  .layout-topbar-menu-content {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .layout-config-menu {
+    display: flex;
+    gap: 1rem;
+  }
 }
 
 @media (max-width: 991px) {
-    .layout-topbar {
-        padding: 0 2rem;
+  .layout-topbar {
+    padding: 0 2rem;
 
-        .layout-topbar-logo-container {
-            width: auto;
-        }
+    .layout-topbar-logo-container {
+      width: auto;
+    }
 
-        .layout-menu-button {
-            margin-left: 0;
-            margin-right: 0.5rem;
-        }
+    .layout-menu-button {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
 
-        .layout-topbar-menu-button {
-            display: inline-flex;
-        }
+    .layout-topbar-menu-button {
+      display: inline-flex;
+    }
+
+    .layout-topbar-menu {
+      position: absolute;
+      background-color: var(--surface-overlay);
+      transform-origin: top;
+      box-shadow:
+        0px 3px 5px rgba(0, 0, 0, 0.02),
+        0px 0px 2px rgba(0, 0, 0, 0.05),
+        0px 1px 4px rgba(0, 0, 0, 0.08);
+      border-radius: var(--content-border-radius);
+      padding: 1rem;
+      right: 2rem;
+      top: 4rem;
+      min-width: 15rem;
+      border: 1px solid var(--surface-border);
+
+      .layout-topbar-menu-content {
+        gap: 0.5rem;
+      }
+
+      .layout-topbar-action {
+        display: flex;
+        width: 100%;
+        height: auto;
+        justify-content: flex-start;
+        border-radius: var(--content-border-radius);
+        padding: 0.5rem 1rem;
 
-        .layout-topbar-menu {
-            position: absolute;
-            background-color: var(--surface-overlay);
-            transform-origin: top;
-            box-shadow:
-                0px 3px 5px rgba(0, 0, 0, 0.02),
-                0px 0px 2px rgba(0, 0, 0, 0.05),
-                0px 1px 4px rgba(0, 0, 0, 0.08);
-            border-radius: var(--content-border-radius);
-            padding: 1rem;
-            right: 2rem;
-            top: 4rem;
-            min-width: 15rem;
-            border: 1px solid var(--surface-border);
-
-            .layout-topbar-menu-content {
-                gap: 0.5rem;
-            }
-
-            .layout-topbar-action {
-                display: flex;
-                width: 100%;
-                height: auto;
-                justify-content: flex-start;
-                border-radius: var(--content-border-radius);
-                padding: 0.5rem 1rem;
-
-                i {
-                    font-size: 1rem;
-                    margin-right: 0.5rem;
-                }
-
-                span {
-                    font-weight: medium;
-                    display: block;
-                }
-            }
+        i {
+          font-size: 1rem;
+          margin-right: 0.5rem;
         }
 
-        .layout-topbar-menu-content {
-            flex-direction: column;
+        span {
+          font-weight: medium;
+          display: block;
         }
+      }
     }
-}
 
+    .layout-topbar-menu-content {
+      flex-direction: column;
+    }
+  }
+}