forward_station_server_fss/main_header.php

  <header class="main-header">
    <!-- Logo -->
    <a href="index.php" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>TL</span>
      <!-- logo for regular state and mobile devices -->
      <!-- <span class="logo-lg"><b>Autoleum</b></span> -->
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- User Account: style can be found in dropdown.less -->
          <li><h5 style="color:#fff;text-align: center;font-size: 24px;font-family: 'Lobster', helvetica, arial;">Forward&nbsp;&nbsp;&nbsp; Station&nbsp;&nbsp;&nbsp; Server</h5></li>
          <li class="dropdown user user-menu pull-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="dist/img/profile.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs" style="color: white;">Admin</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="dist/img/profile.jpg" class="img-circle" alt="User Image">

                <p>
                  
                  <small>Member since Nov. 2012</small>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                  </div>
                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">Profile</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->
          <li>
            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="dist/img/Autoleum Logo.jpg" class="-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p style="color: #1fb9bb;margin-top: 10px;font-size:25px;font-family: 'Lobster', helvetica, arial;">Autoleum</p>
          <!-- <a href="#"><i class="fa fa-circle text-success"></i> Online</a> -->
        </div>
      </div>
      <!-- search form -->
     <!--  <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form> -->
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree" style="background:#c1cbd0;" id="mainNavMenu">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview" >
          <a href="#" class="active" style="margin-bottom: 20px;">
            <i class="fa fa-calculator " ></i>&nbsp; &nbsp;&nbsp; <span>Operations</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li style="margin-top: 20px;"><a href="shifts.php" class="collapse-item"><i class="far fa-calendar-alt" style="font-size:15px;"></i>&nbsp; Shifts</a></li>
            <li> <a href="sales.php" class="collapse-item"><i class="fa fa-industry"></i>&nbsp; Sales</a></li>
           <li><a href="update_prices.php" class="collapse-item"><i class="fas fa-money-check-alt"></i>&nbsp; Update Prices</a></li>
            <li><a href="deliveries.php" class="collapse-item"><i class="fas fa-truck"></i>&nbsp; Deliveries</a></li>
            <li> <a href="about.php" class="collapse-item"><i class="fas fa-award"></i>&nbsp; About</a></li>
           
          </ul>
        </li>
        <li class="treeview" style="color:cyan;">
          <a href="#">
            <i class="fa fa-pie-chart"></i>&nbsp; &nbsp;&nbsp;
            <span>Reports</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a class="collapse-item" href="shiftPumpReport.php"><i class="fas fa-gas-pump"></i>&nbsp;Shift Pump Report</a></li>
              <li><a class="collapse-item" href="shiftSaleReport.php"><i class="fas fa-bars"></i>&nbsp;Shift Sale Report</a></li>
              <li><a class="collapse-item" href="shiftTankReport.php"><i class="fas fa-sort-amount-up"></i>&nbsp;Shift Tank Report</a></li>
              <li><a class="collapse-item" href="shift_grade_report.php"><i class="fas fa-chart-bar"></i>&nbsp;Shift Grade Report</a></li>
              <li><a class="collapse-item" href="credit_sale_report.php"><i class="fas fa-align-center"></i>&nbsp;Credit Sale Report</a></li>
              <li><a class="collapse-item" href="reconciliation_report.php"><i class="fas fa-book"></i>&nbsp;Reconciliation Report</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-users"></i>&nbsp; &nbsp;&nbsp;
            <span>Admin</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
              <li><a class="collapse-item" href="customers.php"><i class="fas fa-users"></i>&nbsp;Customers</a></li>
              <li><a class="collapse-item" href="suppliers.php"><i class="fas fa-user-tie"></i>&nbsp;Suppliers</a></li>
              <li><a class="collapse-item" href="users.php"><i class="fas fa-grin"></i>&nbsp;User</a></li>
          </ul>
        </li>
        <li class="header">Footer</li>
         <li class="treeview">
          <a href="#">
            <i class="fa fa-wrench"></i>&nbsp; &nbsp;&nbsp;
            <span>Configurations</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
          <li><a class="collapse-item" href="configurations.php"><i class="far fa-calendar-alt" style="font-size:15px;"></i>&nbsp; Configurations</a></li>
          <li><a class="collapse-item" href="fuel_points.php"><i class="fa fa-industry"></i>&nbsp;Fuel Points</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fas fa-fw fa-table"></i>&nbsp; &nbsp;&nbsp;&nbsp; <span>Exit</span></a></li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>