ROLAC/APP/src/app/portals/user-portal/user-portal.component.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/images/ROLCC-Logo-Color.png" alt="ROLCC Logo" class="logo-image">
                    <div class="logo-text" *ngIf="!sidebarCollapsed">
                        <h2>ROLCC AC</h2>
                        <span class="tagline">Church 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">Main</h4>
                    <a *ngFor="let item of mainNavItems" class="nav-item" [class.active]="item.active"
                        [title]="item.text" (click)="navigateTo(item.path)">
                        <div class="nav-icon">
                            <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                        </div>
                        <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                    </a>
                </div>

                <div class="nav-section">
                    <h4 *ngIf="!sidebarCollapsed">Personal</h4>
                    <a *ngFor="let item of personalNavItems" class="nav-item" [class.active]="item.active"
                        [title]="item.text" (click)="navigateTo(item.path)">
                        <div class="nav-icon">
                            <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                        </div>
                        <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                    </a>
                </div>

                <div class="nav-section">
                    <h4 *ngIf="!sidebarCollapsed">Management</h4>
                    <a *ngFor="let item of managementNavItems" class="nav-item" [class.active]="item.active"
                        [title]="item.text" (click)="navigateTo(item.path)">
                        <div class="nav-icon">
                            <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                        </div>
                        <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                    </a>
                </div>

                <div class="nav-section" *ngIf="showMemberAdminSection || showUserAdminSection">
                    <h4 *ngIf="!sidebarCollapsed">Administration</h4>
                    <a *ngFor="let item of memberAdminNavItems" class="nav-item" [class.active]="item.active"
                        [title]="item.text" (click)="navigateTo(item.path)">
                        <div class="nav-icon">
                            <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                        </div>
                        <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                    </a>
                    <ng-container *ngIf="showUserAdminSection">
                        <a *ngFor="let item of userAdminNavItems" class="nav-item" [class.active]="item.active"
                            [title]="item.text" (click)="navigateTo(item.path)">
                            <div class="nav-icon">
                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                            </div>
                            <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                        </a>
                    </ng-container>
                </div>

                <div class="nav-section" *ngIf="showFinanceSection">
                    <h4 *ngIf="!sidebarCollapsed">Finance</h4>
                    <a *ngFor="let item of financeNavItems" class="nav-item" [class.active]="item.active"
                        [title]="item.text" (click)="navigateTo(item.path)">
                        <div class="nav-icon">
                            <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                        </div>
                        <span *ngIf="!sidebarCollapsed">{{ item.text }}</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>