app.component.html

<mat-sidenav-container class="main-menu-container" [ngClass]="{'main-menu-container_native': !isCustomAccentedColor}" autosize>
    <mat-sidenav #drawer
        fixedInViewport="true"
        mode="over"
        class="main-menu-sidenav"
        >
        <mat-toolbar>Rocketadmin</mat-toolbar>
        <mat-nav-list *ngIf="userLoggedIn === true">
            <a mat-list-item routerLink="/connections-list"
                routerLinkActive="nav-bar__button_active"
                aria-label="List of connections">
                <mat-icon matListItemIcon class="connection-navigation__icon">
                    list
                </mat-icon>
                <div matListItemTitle>Connections</div>
            </a>
            <mat-nav-list *ngIf="connectionID && visibleTabs" class="connection-navigation">
                <a mat-list-item *ngFor="let tab of visibleTabs" attr.data-testid="{{tab}}-header-link"
                    routerLink="{{tab}}/{{connectionID}}"
                    routerLinkActive="nav-bar__button_active">
                    {{navigationTabs[tab].caption}}
                </a>
            </mat-nav-list>
            <a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user" data-testid="account-link-account-menu">
                <mat-icon matListItemIcon class="connection-navigation__icon connection-navigation__icon_account"
                    matBadge="1" [matBadgeHidden]="currentUser.isActive"
                    matBadgeColor="accent" matBadgeSize="small">
                    face
                </mat-icon>
                <div matListItemTitle>Account</div>
                <div matListItemLine>{{currentUser.email}}</div>
            </a>
            <a mat-list-item routerLink="/company" data-testid="company-link-account-menu">
                <mat-icon matListItemIcon class="connection-navigation__icon">
                    apartment
                </mat-icon>
                <div matListItemTitle>Company</div>
            </a>
            <a mat-list-item routerLink="/secrets" data-testid="secrets-link-account-menu">
                <mat-icon matListItemIcon class="connection-navigation__icon">
                    key
                </mat-icon>
                <div matListItemTitle>Secrets</div>
            </a>
            <a mat-list-item *ngIf="isSaas" routerLink="/zapier" data-testid="zapier-link-account-menu">
                <mat-icon matListItemIcon class="connection-navigation__icon">
                    electric_bolt
                </mat-icon>
                <div matListItemTitle>Zapier</div>
            </a>
            <a mat-list-item href="https://docs.rocketadmin.com/" target="_blank">
                <mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-symbols-outlined">help</mat-icon>
                <div matListItemTitle>Help center</div>
            </a>
            <mat-list-item (click)="logOut()" data-testid="logout-button-account-menu">
                <mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
                <div matListItemTitle>Log out</div>
            </mat-list-item>
        </mat-nav-list>
        <a mat-flat-button color="accent" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'" class="connection-navigation__upgrade-button" routerLink="/upgrade"
            routerLinkActive="nav-bar__button_active">
            Upgrade
        </a>
    </mat-sidenav>

    <mat-sidenav-content class="main-menu-content"
        [ngClass]="{'main-menu-content_exterior': userLoggedIn === false, 'main-menu-content_interior': userLoggedIn === true}">
        <app-view-as-banner></app-view-as-banner>
        <mat-toolbar color="primary" class="nav-bar"
            [ngClass]="{'nav-bar_home': !connectionID, 'nav-bar_connection': connectionID,
                'nav-bar_exterior': userLoggedIn === false, 'nav-bar_interior': userLoggedIn === true}">
            <!--<a routerLink="/connections-list" *ngIf="userLoggedIn && whiteLabelSettings.logo" class="logo">
                <img [src]="whiteLabelSettings.logo" alt="Logo" class="logo__image">
            </a>

            <a routerLink="/connections-list" *ngIf="userLoggedIn && !whiteLabelSettings.logo" class="logo">
                <img src="../assets/rocketadmin_logo_white.svg" *ngIf="whiteLabelSettings.logo !== '' && !whiteLabelSettings.logo" class="logo__image">
            </a>-->

            <div class="logo-box">
                <a routerLink="/connections-list"
                    *ngIf="userLoggedIn"
                    class="logo">
                    <img *ngIf="whiteLabelSettingsLoaded"
                        [src]="whiteLabelSettings.logo || '../assets/rocketadmin_logo_white.svg'"
                        alt="Logo"
                        class="logo__image"
                    >
                </a>

                <a *ngIf="userLoggedIn === false" href="https://rocketadmin.com/" class="logo">
                    <picture>
                        <source media="(max-width: 767px)" srcset="../assets/rocketadmin_logo_white-short.svg">
                        <img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
                    </picture>
                </a>
                <span *ngIf="connectionID" class="nav-bar__slash">/</span>
                <button *ngIf="connectionID"
                    mat-button type="button" class="nav-bar__button nav-bar__buttonConnectionsMenu"
                    [disabled]="ownUserConnections && ownUserConnections.length === 1 && !isTestConnection"
                    [matMenuTriggerFor]="connectionsListMenu">
                    {{currentConnectionName}}
                    <mat-icon iconPositionEnd
                        *ngIf="ownUserConnections && ownUserConnections.length !== 1 || isTestConnection"
                        style="margin-left: 4px">
                        arrow_drop_down
                    </mat-icon>
                </button>
                <mat-menu #connectionsListMenu="matMenu">
                    <a *ngIf="ownUserConnections && ownUserConnections.length === 0; else connectionsList"
                        mat-menu-item
                        routerLink="/connect-db">
                        Add your own connection
                    </a>
                    <ng-template #connectionsList>
                        <a mat-menu-item *ngFor="let connection of ownUserConnections"
                            routerLink="/dashboard/{{connection.connection.id}}"
                            [ngClass]="{'connection_active': connectionID === connection.connection.id}">
                            {{connection.displayTitle}}
                        </a>
                    </ng-template>
                </mat-menu>
                <span *ngIf="isDemo" class="logo__demo-mark">demo</span>
            </div>

            <div *ngIf="connectionID" class="menu">
                <a mat-button *ngFor="let tab of visibleTabs" attr.data-testid="{{tab}}-header-link"
                    routerLink="{{tab === 'edit-db' && isHostedConnection ? '/hosted-databases' : tab + '/' + connectionID}}"
                    routerLinkActive="nav-bar__button_active"
                    class="nav-bar__button">
                    <span *ngIf="tab !== 'edit-db' ">{{navigationTabs[tab].caption}}</span>
                    <mat-icon *ngIf="tab === 'edit-db' "
                        matTooltip="Database credentials">
                        key_vertical
                    </mat-icon>
                </a>
            </div>

            <button type="button" mat-icon-button *ngIf="userLoggedIn === true" color="primary" class="menu-button" (click)="drawer.toggle()">
                <mat-icon>menu</mat-icon>
            </button>

            <div *ngIf="userLoggedIn === true" class="actions actions_auth">
                <a routerLink="/upgrade" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN' && !isDemo"
                    mat-flat-button color="accent"
                    data-testid="upgrade-header-link"
                    class="nav-bar__upgrade-button">
                    Upgrade
                </a>

                <button type="button" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN' && isDemo"
                    mat-flat-button color="accent"
                    data-testid="upgrade-header-link"
                    class="nav-bar__upgrade-button"
                    angulartics2On="click"
                    angularticsAction="Demo navbar: Create account is clicked"
                    (click)="logoutAndRedirectToRegistration(); posthog.capture('Demo navbar: Create account is clicked')">
                    Create account
                </button>

                <button mat-icon-button type="button" data-testid="account-menu-anchor-header-button"
                    matBadge="1" [matBadgeHidden]="currentUser.isActive"
                    matBadgeColor="accent" matBadgeSize="small"
                    [matMenuTriggerFor]="accountMenu"
                    matTooltip="{{currentUser.email}}"
                    class="nav-bar__account-button">
                    <mat-icon>account_circle</mat-icon>
                </button>
                <mat-menu #accountMenu="matMenu" data-testid="account-menu-dropdown">
                    <a mat-menu-item routerLink="/user-settings" data-testid="account-link-account-menu">
                        <mat-icon class="nav-menu__list-link-icon"
                            matBadge="1" [matBadgeHidden]="currentUser.isActive"
                            matBadgeColor="accent" matBadgeSize="small">
                            face
                        </mat-icon>
                        <span>Account</span>
                        <br/>
                        <span class="user-email">{{currentUser.email}}</span>
                    </a>
                    <a mat-menu-item routerLink="/company" data-testid="company-link-account-menu">
                        <mat-icon class="nav-menu__list-link-icon">
                            apartment
                        </mat-icon>
                        <span>Company</span>
                    </a>
                    <a mat-menu-item routerLink="/secrets" data-testid="secrets-link-account-menu">
                        <mat-icon class="nav-menu__list-link-icon">
                            key
                        </mat-icon>
                        <span>Secrets</span>
                    </a>
                    <a mat-menu-item *ngIf="isSaas" routerLink="/zapier" data-testid="zapier-link-account-menu">
                        <mat-icon class="nav-menu__list-link-icon">
                            electric_bolt
                        </mat-icon>
                        <span>Zapier</span>
                    </a>
                    <button type="button" mat-menu-item (click)="openSupportChat()"
                        data-testid="support-chat-button-account-menu">
                        <mat-icon fontSet="material-symbols-outlined">chat_bubble</mat-icon>
                        <span>Chat with support</span>
                    </button>
                    <a mat-menu-item href="https://docs.rocketadmin.com/" target="_blank">
                        <mat-icon fontSet="material-symbols-outlined">help</mat-icon>
                        <span>Help center</span>
                    </a>
                    <button type="button" mat-menu-item (click)="logOut()" data-testid="logout-button-account-menu">
                        <mat-icon>logout</mat-icon>
                        <span>Log out</span>
                    </button>
                </mat-menu>
            </div>

            <div *ngIf="!currentUser" class="actions">
                <ng-container *ngIf="page === '/login'">
                    <a mat-stroked-button routerLink="/login"
                        data-testid="login-header-link"
                        class="action">
                        Login
                    </a>
                    <a *ngIf="isSaas" mat-flat-button color="accent" routerLink="/registration"
                        data-testid="registration-header-link"
                        class="action">
                        Sign up
                    </a>
                </ng-container>
                <ng-container *ngIf="page === '/registration' && isSaas">
                    <a mat-flat-button color="accent" routerLink="/login"
                        data-testid="login-header-link"
                        class="action">
                        Login
                    </a>
                    <a mat-stroked-button routerLink="/registration"
                        data-testid="registration-header-link"
                        class="action">
                        Sign up
                    </a>
                </ng-container>

            </div>
            <!-- <ng-template #nonAuthBlock>

            </ng-template> -->
        </mat-toolbar>

        <mat-tab-nav-panel #tabPanel class="tab-content-wrapper">
            <div class="content">
                <router-outlet></router-outlet>
            </div>
        </mat-tab-nav-panel>

        <div *ngIf="!authBarTheme" class="footer">
            <span class="footer__text">&copy; 2026 Rocketadmin • v{{appVersion}}</span>
        </div>
        <app-feature-notification *ngIf="isFeatureNotificationShown" (dismiss)="dismissFeatureNotification()"></app-feature-notification>
    </mat-sidenav-content>
</mat-sidenav-container>