<ng-container>
    <div class="navbar flex relative lg:static surface-ground">
        <div id="sidebar"
            class="bg-gray-900 lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-2 border-gray-800 w-18rem lg:w-5rem select-none"
            [hidden]="dataService.m_showSidebar">
            <div class="flex flex-column h-full">
                <div class="mt-1 select-none">
                    <ul class="list-none p-3 lg:py-3 lg:px-2 m-0">
                        <li [routerLink]="'dashboard/status'" pTooltip="{{ 'navbar.dashboard' | translate }}"
                            [tooltipDisabled]="dataService.m_showSidebar === false" (click)="dataService.showSidebar(true)">
                            <a pRipple
                                class="p-ripple p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center
                                hover:bg-gray-800 border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                <i class="pi pi-home mr-2 lg:mr-0 text-base lg:text-xl"></i>
                                <span class="font-medium inline lg:hidden">{{ 'navbar.dashboard' | translate }}</span>
                                <span class="p-ink"></span>
                            </a>
                        </li>
                        <li [routerLink]="'setupwizard/dbsetup'" pTooltip="{{ 'navbar.backendSetup' | translate }}"
                            [tooltipDisabled]="dataService.m_showSidebar === false" (click)="dataService.showSidebar(true)">
                            <a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
                                border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                <i class="pi pi-cog mr-2 lg:mr-0 text-base lg:text-xl"></i>
                                <span class="font-medium inline lg:hidden">{{ 'navbar.backendSetup' | translate
                                    }}</span>
                                <span class="p-ink"></span>
                            </a>
                        </li>
                        <li [routerLink]="'dashboard/program-guide'" pTooltip="{{ 'dashboard.programguide' | translate }}"
                            [tooltipDisabled]="dataService.m_showSidebar === false" (click)="dataService.showSidebar(true)">
                            <a pRipple class="p-element flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-gray-800
                                border-round text-gray-300 hover:text-white transition-duration-150 transition-colors">
                                <i class="pi pi-map mr-2 lg:mr-0 text-base lg:text-xl"></i>
                                <span class="font-medium inline lg:hidden">{{ 'dashboard.programguide' | translate }}</span>
                                <span class="p-ink"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="contentarea px-0 lg:px-3 w-full">
            <router-outlet></router-outlet>
        </div>
    </div>
</ng-container>