Chris Chen
138 lines
6.7 KiB
HTML
138 lines
6.7 KiB
HTML
<div class="user-portal-container">
|
|
<!-- Background Elements -->
|
|
<div class="background-shapes">
|
|
<div class="shape shape-1"></div>
|
|
<div class="shape shape-2"></div>
|
|
<div class="shape shape-3"></div>
|
|
</div>
|
|
|
|
<!-- Main Portal Layout -->
|
|
<div class="portal-layout">
|
|
<!-- Sidebar Overlay for Mobile -->
|
|
<div *ngIf="isMobile && !sidebarCollapsed" class="sidebar-overlay" (click)="onSidebarOverlayClick()">
|
|
</div>
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="sidebar" [class.collapsed]="sidebarCollapsed">
|
|
<div class="sidebar-header">
|
|
<div class="logo-section">
|
|
<img src="assets/rbj-logo.svg" alt="RBJ Logo" class="logo-image">
|
|
<div class="logo-text" *ngIf="!sidebarCollapsed">
|
|
<h2>ROLCC AC</h2>
|
|
<span class="tagline">Escrow Portal</span>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-toggle" (click)="toggleSidebar()" title="Toggle sidebar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<h4 *ngIf="!sidebarCollapsed">Overview</h4>
|
|
<a routerLink="/user-portal/dashboard" routerLinkActive="active" class="nav-item"
|
|
(click)="onNavigationClick()">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg>
|
|
</div>
|
|
<span *ngIf="!sidebarCollapsed">Dashboard</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="nav-section" *ngIf="showAdminSection">
|
|
<h4 *ngIf="!sidebarCollapsed">Administration</h4>
|
|
<a routerLink="/user-portal/admin/users" routerLinkActive="active" class="nav-item"
|
|
(click)="onNavigationClick()">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</div>
|
|
<span *ngIf="!sidebarCollapsed">User Management</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer" *ngIf="!sidebarCollapsed">
|
|
<div class="user-info">
|
|
<div class="user-avatar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="user-details">
|
|
<div class="user-name">{{ getDisplayName() || 'User' }}
|
|
</div>
|
|
<div class="user-email">{{ currentUser?.email }}</div>
|
|
</div>
|
|
</div>
|
|
<button class="logout-btn" (click)="logout()" title="Logout" aria-label="Logout">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
<polyline points="16,17 21,12 16,7"></polyline>
|
|
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
</svg>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main [class]="mainContentClass">
|
|
<!-- Top Header -->
|
|
<header class="top-header">
|
|
<div class="header-left">
|
|
<button class="mobile-menu-btn" (click)="toggleSidebar()" *ngIf="isMobile" title="Toggle menu"
|
|
aria-label="Toggle menu">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="breadcrumb">
|
|
<span class="breadcrumb-item">{{ currentPageTitle }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="header-actions">
|
|
<button class="action-btn" title="Notifications">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg>
|
|
<div class="notification-badge" *ngIf="unreadNotifications > 0">{{ unreadNotifications }}
|
|
</div>
|
|
</button>
|
|
|
|
<button class="action-btn" title="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="M21 21l-4.35-4.35"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Content -->
|
|
<div class="page-content">
|
|
<router-outlet></router-outlet>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div> |