Pixelstrap - Admin Document

Unique layouts

1. Light Layout

<html lang="en" dir="ltr">
  <body class="light-only" main-theme-layout="ltr">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>

2. RTL Layout

<html lang="en" dir="rtl">
  <body class="light-only" main-theme-layout="rtl">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>

3. Box Layout

<html lang="en" dir="ltr">
  <body class="light-only" main-theme-layout="box-layout">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>

4. Dark Layout

<html lang="en" dir="ltr">
  <body class="dark-only" main-theme-layout="ltr">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>

5. Dark with RTL

<html lang="en" dir="rtl">
  <body class="dark-only" main-theme-layout="rtl">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>

6. Dark with Box

<html lang="en" dir="ltr">
  <body class="dark-only" main-theme-layout="box-layout">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>

7. Vertical Layout

<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/vertical-menu.css')}}">
  </head>  
  <body class="light-only" main-theme-layout="ltr">
    <div class="page-wrapper vertical">
      <div class="page-main-header">
        <div class="main-header-right"> 
                <!-- Content -->
        </div>  
      </div>
 
      <!-- add vertical menu -->
      <div class="vertical-menu-main">
        <nav id="main-nav">
                <!-- vertical menu links -->
        </nav>
      </div>  
 
      <div class="page-body-wrapper">
              <!-- Remove sidebar <div class="iconsidebar-menu"> *** </div> -->
              <!-- Content -->
      </div>
    </div>
    <script src="{{asset('assets/js/jquery.drilldown.js')}}"></script>
    <script src="{{asset('assets/js/vertical-menu.js')}}"></script>
  </body>
</html>

8. Vertical With RTL

<html lang="en" dir="rtl">
  <head>
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/vertical-menu.css')}}">
  </head>  
  <body class="light-only" main-theme-layout="rtl">
    <div class="page-wrapper vertical">
      <div class="page-main-header">
        <div class="main-header-right"> 
                <!-- Content -->
        </div>  
      </div>
 
      <!-- add vertical menu -->
      <div class="vertical-menu-main">
        <nav id="main-nav">
                <!-- vertical menu links -->
        </nav>
      </div>  
 
      <div class="page-body-wrapper">
              <!-- Remove sidebar <div class="iconsidebar-menu"> *** </div> -->
              <!-- Content -->
      </div>
    </div>
    <script src="{{asset('assets/js/jquery.drilldown.js')}}"></script>
    <script src="{{asset('assets/js/vertical-menu.js')}}"></script>
  </body>
</html>

9. Vertical With Box

<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/vertical-menu.css')}}">
  </head>  
  <body class="light-only" main-theme-layout="box-layout">
    <div class="page-wrapper vertical">
      <div class="page-main-header">
        <div class="main-header-right"> 
                <!-- Content -->
        </div>  
      </div>
 
      <!-- add vertical menu -->
      <div class="vertical-menu-main">
        <nav id="main-nav">
                <!-- vertical menu links -->
        </nav>
      </div>  
 
      <div class="page-body-wrapper">
              <!-- Remove sidebar <div class="iconsidebar-menu"> *** </div> -->
              <!-- Content -->
      </div>
    </div>
    <script src="{{asset('assets/js/jquery.drilldown.js')}}"></script>
    <script src="{{asset('assets/js/vertical-menu.js')}}"></script>
  </body>
</html>

10. Sidebar Dark

<html lang="en" dir="ltr">
  <body class="sidebar-dark">
    <div class="page-wrapper">
      <div class="page-main-header">
        <div class="main-header-right"> 
                {{-- Content --}}
        </div>  
      </div>
      <div class="page-body-wrapper">
          {{-- Page Sidebar Start --}}
          <div class="iconsidebar-menu">
                  {{-- sidebar links --}}
          </div>
          <div class="page-body">
                  {{-- Content --}}
          </div>
      </div>
    </div>
  </body>
</html>