PVR Tech Studio

Taxi CRM 2026

Layout

The page shell — header, sidebar, main content area and footer — and how to configure it.

3 min read

Updated June 20, 2026

Every page is built from the same shell: a top header/navbar, a left sidebar, the main content area (with a sticky page header), and a footer. This page documents the real markup and the layout variants.

Page shell — overall structure

<!-- 1. Header / top navbar -->
<header class="d-flex app-page flex-column"> … </header>
 
<!-- 2. Sidebar -->
<aside class="app-sidebar flex-column drawer drawer-start"> … </aside>
 
<!-- 3. Main content -->
<main class="d-flex flex-column has-sticky-header">
  <div class="page-header page-header-default page-header-fixed"> … </div>
  <div class="d-flex flex-column pageWrapper">
    <!-- ▼ YOUR PAGE CONTENT ▼ -->
  </div>
</main>
 
<!-- 4. Footer -->
<footer class="app-footer"> … </footer>

Key hooks:

Element	Class / id	Purpose
App wrapper	`#app-main` / `.app-main`	Outer flex container for the header.
Main area	`main.has-sticky-header`	Enables the sticky page-header behavior.
Page header	`.page-header.page-header-default.page-header-fixed`	Title + breadcrumb bar.
Content slot	`.pageWrapper`	Put your page content here.

<header class="d-flex app-page flex-column">
  <!-- Slide-down search -->
  <form class="site-search" method="get">
    <input type="text" name="site_search" placeholder="Type to search..." autocomplete="off">
    <div class="search-tools">
      <span class="clear-search">Clear</span>
      <span class="close-search"><span class="material-symbols-sharp">close</span></span>
    </div>
  </form>
 
  <nav class="navbar navbar-expand-md fixed-top">
    <div class="container-fluid ps-0 pe-0">
      <!-- Brand (mobile) -->
      <div class="d-flex align-items-center" id="mobileBrandingLink">
        <a class="d-flex align-items-center text-decoration-none" href="index.html">
          <img alt="Taxi CRM Logo" height="38" src="assets/img/logo/logo.png" width="38">
          <span class="text-nowrap fs-4 ms-2">Taxi CRM</span>
        </a>
      </div>
 
      <!-- Sidebar toggle (mobile) -->
      <div class="me-1 me-md-2" id="sidebarTrigger">
        <span class="material-symbols-sharp btn btn-primary btn-sm">menu</span>
      </div>
      <!-- Minify sidebar (desktop) -->
      <div class="d-lg-flex me-1 me-md-2" id="minifySidebar">
        <span class="material-symbols-sharp btn btn-primary btn-sm">menu</span>
      </div>
 
      <!-- Primary nav (optional quick-access dropdowns) -->
      <div class="collapse navbar-collapse" id="primaryNav">
        <ul class="navbar-nav align-items-center"> … </ul>
      </div>
 
      <!-- Right-side actions -->
      <div class="collapse navbar-collapse" id="navbarActions">
        <ul class="navbar-nav">
          <li class="nav-item languageSwitcher w-auto"> … </li>   <!-- language switcher -->
          <li class="nav-item">
            <button class="header-nav-link btn border-0 btn-lg btn-icons theme-toggle" id="themeToggle" type="button">
              <span class="material-symbols-sharp">dark_mode</span>
            </button>
          </li>
          <li class="nav-item searchBar"> … </li>                 <!-- opens .site-search -->
          <li class="nav-item appItems"> … </li>                  <!-- apps dropdown -->
          <li class="nav-item dropdown notification" data-bs-toggle="offcanvas" data-bs-target="#notificationsOffcanvas">
            <span class="notification-count">8</span> …
          </li>
          <li class="nav-item" data-bs-toggle="offcanvas" data-bs-target="#chat-app"> … </li> <!-- messages -->
          <li class="nav-item">
            <button class="header-nav-link btn border-0 btn-lg btn-icons" id="toggleFullScreen" type="button">
              <span class="material-symbols-sharp">fullscreen</span>
            </button>
          </li>
          <li class="nav-item userProfile"> … </li>               <!-- user/profile dropdown -->
        </ul>
      </div>
    </div>
  </nav>
</header>

The header behaviors (theme toggle, language switcher, fullscreen, search, sidebar minify) are wired up automatically by app.js — see 08 — JavaScript. The notifications and chat panels live in shared offcanvas markup near the end of the page (#notificationsOffcanvas, #chat-app).

Sidebar

<aside class="app-sidebar flex-column drawer drawer-start">
  <div class="d-flex" id="brandingLink">
    <a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none" href="index.html">
      <img alt="Taxi CRM Logo" height="44" src="assets/img/logo/logo.png" width="44">
      <span class="text-nowrap">Taxi CRM</span>
    </a>
  </div>
 
  <div class="d-flex flex-column flex-shrink-0" id="navigations">
    <ul class="nav nav-pills flex-row mb-auto addSlimScroll">
      <div class="nav-hover-bg"></div>
      <div class="nav-active-bg"></div>
 
      <!-- Section divider -->
      <li class="nav-item divider">
        <span class="text">Taxi Booking</span>
        <span class="material-symbols-sharp">filter_list</span>
      </li>
 
      <!-- Collapsible group with children -->
      <li class="nav-item nav-accordion active">
        <span class="nav-link">
          <span class="make_icon material-symbols-sharp">database</span>
          <span class="nav-title">Masters</span>
          <span class="nav-arrow"></span>
        </span>
        <div class="nav-sub nav-sub-accordion">
          <div class="nav-item-sub active">
            <a class="nav-link" href="roleMaster.html"><span class="nav-title">Role Master</span></a>
            <a class="nav-add-icon" href="addRoleMaster.html" title="Add Role">
              <span class="material-symbols-sharp">add</span>
            </a>
          </div>
          <!-- more .nav-item-sub … -->
        </div>
      </li>
 
      <!-- Plain item with no children -->
      <li class="nav-item no-child">
        <a class="nav-link" href="faqPage.html">
          <span class="make_icon material-symbols-sharp">help</span>
          <span class="nav-title">FAQ Page</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

Sidebar class reference:

Class	Role
`nav-accordion`	Collapsible menu group (shows the `nav-arrow` chevron). Add `active` to expand/highlight.
`nav-sub` / `nav-sub-accordion`	The submenu container, revealed when the group is open.
`nav-item-sub`	A single submenu entry (link + optional `nav-add-icon`).
`no-child`	A top-level item that links directly (no submenu).
`make_icon` + `material-symbols-sharp`	The leading menu icon.
`nav-title`	The menu label (translate with `data-i18n`).
`divider`	A section heading inside the menu.
`addSlimScroll`	Applies the slim-scroll plugin to the menu list.

To highlight the current page: add active to its .nav-item-sub (and to the parent .nav-accordion), or to its .nav-item.no-child.

Footer

<footer class="app-footer">
  <nav class="navbar navbar-expand-lg fixed-bottom">
    <div class="container-fluid navbar-brand">
      <div class="d-flex flex-column">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="javascript:void(0);">Terms</a></li>
          <li class="nav-item"><a class="nav-link" href="javascript:void(0);">Privacy Policy</a></li>
        </ul>
      </div>
      <div class="text-dark pb-0">
        <span class="me-2">© 2026</span>
        <a class="text-dark me-0" href="http://www.pvrtechstudio.com/">PVR Tech Studio</a>
      </div>
    </div>
  </nav>
</footer>

<div class="page-header page-header-default page-header-fixed">
  <div class="page-header-content d-flex justify-content-between align-items-end">
    <div class="page-title">
      <h5><span class="fw-bold">Role Master</span><span> - </span><span>Masters</span></h5>
      <ul class="breadcrumb d-flex flex-wrap list-unstyled mb-0">
        <li><a class="text-primary text-decoration-none" href="index.html">Home</a></li>
        <li><a class="text-primary text-decoration-none" href="javascript:void(0)">Masters</a></li>
        <li class="active text-secondary"><span>Role Master</span></li>
      </ul>
    </div>
  </div>
</div>

Layout variants

The kit ships several demo pages showing different header/footer/sidebar modes. Copy the one that matches the behavior you want:

Page	What changes	Driven by
`topNavFixed.html`	Top navbar sticks to the top.	`<nav class="navbar … fixed-top">`
`unfixedTopNav.html`	Navbar scrolls away with the page.	navbar without `fixed-top`
`fixedNavUnfixedHeader.html`	Navbar fixed, page-header not sticky.	navbar `fixed-top` + page-header without `page-header-fixed`
`unfixedNavFixedHeader.html`	Navbar scrolls, page-header sticky.	navbar without `fixed-top` + `.page-header-fixed`
`minifiedSidebar.html`	Sidebar collapsed to icons.	`<body class="minSidebar">`
`sidebarLayout.html`	Header without the quick-access dropdowns (actions only).	no `#primaryNav` block
`bothMenubar.html`	Full sidebar and full top nav.	standard shell, all dropdowns present
`fixedFooter.html`	Footer pinned to the bottom.	footer navbar `fixed-bottom`
`unfixedFooter.html`	Footer scrolls with content.	footer navbar without `fixed-bottom`
`lockScreen.html`	Auth-style shell — no sidebar/header/footer.	`<body class="login-v1-page">` + `.login-v1-container`

Body-level toggles

<body class="minSidebar"> — start with the sidebar minified (icons only).
<body class="login-v1-page"> — full-screen auth layout (login, lock, register, etc.).

Was this page helpful?

PreviousPage Layouts NextComponents

Layout

Page shell — overall structure

Header / top navbar

Sidebar

Footer

Page header (title + breadcrumb)

Layout variants