Menu

Admin Layout

An alternate, fluid, layout for admin dashboards. Uses Shelves for the grid.

Usage

  1. Add localmed-admin-layout.css & localmed-navbar.css to your <head>.
  2. Use the Mobile Menu for mobile responsive states.
  3. Add the required markup below:
<div class="site-wrapper">
  <div class="site-header header">
    <div class="row">
      <div class="header-column-left mobile-column-3 tablet-column-2">
        <a href="/styleguides/" class="header-logo">
          <img src="https://www.localmed.com/assets/images/localmed-w-sm.png" data-at2x="https://www.localmed.com/assets/images/localmed-w-sm@2x.png" alt="LocalMed Logo" width="140" height="38">
        </a>
      </div>
      <div class="header-column-right mobile-column-1 tablet-column-4">
        <ul class="header-menu menu">
          <li class="dropdown">
            <a href="javascript:void(0)" data-toggle="dropdown"><span>Practice Name</span> <i class="icon-caret-down"></i></a>
            <ul class="dropdown-menu">
              <li><a href="/practice/edit/"><i class="icon-pencil muted"></i> Edit Practice</a></li>
              <li><a href="/practice/settings/"><i class="icon-gear muted"></i> Settings</a></li>
              <li class="divider"></li>
              <li><a href="/practice/switch/"><i class="icon-sort muted"></i> Switch Practice</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="javascript:void(0)" data-toggle="dropdown"><span>account@localmed.com</span> <i class="icon-caret-down"></i></a>
            <ul class="dropdown-menu">
              <li class="dropdown-menu-content">
                <i class="icon-person"></i>
                <strong>Bob Smith</strong><br>
                bob@example.com
              </li>
              <li><a href="/account/edit/"> Manage Account</a></li>
              <li class="divider"></li>
              <li><a href="/logout/"><i class="icon-external muted"></i> Logout</a></li>
            </ul>
          </li>
        </ul>
        <a href="#mobile-menu" data-toggle="mobile-menu" class="header-menu-toggle" title="Menu">
          <i class="icon-list"></i> <span>Menu</span>
        </a>
      </div>
    </div>
  </div>
  <div class="site-sidebar sidebar">
    <nav class="vertical-navbar blue-navbar">
      <ul>
        <li>
          <a href="javascript:void(0)" class="is-active"><i class="icon-house"></i> <span>Dashboard</span></a>
        </li>
        <!-- More menu items... -->
      </ul>
    </nav>
  </div>
  <div class="site-content-wrapper">
    <div class="site-content content">
      <!-- BODY CONTENT GOES HERE -->
    </div>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu">
  <ul>
    <li>
      <a href="/admin/"><i class="icon-person"></i> My Account</a>&nbsp;
      <small><a href="/logout/">Logout</a></small>
    </li>
    <!-- More menu items... -->
  </ul>
</nav>