Sidebar

<aside class="sidebar">

    <div class="sidebar-nav">
        <div class="appmenu-container">

            <header>
                <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
            </header>

            <ul class="appmenu">
                <li>
                    <a href="/" class="selected">Pages</a>
                    <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                </li>
                <li>
                    <a href="/">Blog</a>
                    <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                </li>
                <li>
                    <a href="/">Forms</a>
                    <span class="badge">22</span>
                </li>
                <li><a href="/">Shop</a></li>
                <li>
                    <a href="/">Products</a>
                    <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                </li>
                <li><a href="/">Orders</a></li>
                <li><a href="/">Members</a></li>
            </ul>

            <h3>Organise</h3>
            <ul class="appmenu">
                <li><a href="/">Categories</a></li>
                <li><a href="/">Assets</a></li>
            </ul>

        </div>
        <div class="submenu-container">

            <header>
                <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
            </header>

            <ul class="appmenu">
                <li>
                    <a href="/" class="selected">Pages</a>
                    <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                </li>
                <li>
                    <a href="/">Blog</a>
                    <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                </li>
                <li>
                    <a href="/">Forms</a>
                    <span class="badge">22</span>
                </li>
                <li><a href="/">Shop</a></li>
                <li>
                    <a href="/">Products</a>
                    <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                </li>
                <li><a href="/">Orders</a></li>
                <li><a href="/">Members</a></li>
            </ul>

            <h3>Organise</h3>
            <ul class="appmenu">
                <li><a href="/">Categories</a></li>
                <li><a href="/">Assets</a></li>
            </ul>

        </div>
    </div>

</aside>

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="/assets/js/sidebar.js"></script>
<aside class="sidebar">

	<div class="sidebar-nav">
		<div class="appmenu-container">
			{{ render "@nav-sidebar--toplevel" }}
		</div>
		<div class="submenu-container">
			{{ render "@nav-sidebar" }}
		</div>
	</div>

</aside>


<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="/assets/js/sidebar.js"></script>
/* No context defined for this component. */
  • Content:
    .sidebar {
      width: $sidebar-width;
      flex: 0 0 auto;
      background-color: palette(ui, panel);
      padding: $main-gutter;
      padding-left: $half-gutter;
      overflow-x: hidden;
      left: -$sidebar-width;
      position: absolute;
      transition: all .2s ease-in-out;
    }
    
    .show-sidebar .sidebar {
      left: 0;
      bottom: 0;
      top: 50px;
      box-shadow: 0 0 5px rgba(0,0,0,0.5);
      z-index: 1;
    }
    
    .customer-logo {
      margin: 0 0 $half-gutter 0;
    }
    
    .sidebar-nav {
    	width: $sidebar-width*2;
    	display: flex;
    	margin-left: 0 - $sidebar-width;
    }
    
    .appmenu-container,
    .submenu-container {
    	width: $sidebar-width - $main-gutter;
    }
    
    .appmenu-container {
    	margin-right: $main-gutter;
    }
    
    
    @include media(">bp-s") {
      .sidebar {
        left: 0;
        position: relative;
      }
    
      .topbar li.sidebar-trigger {
        display: none;
      }
    }
  • URL: /components/raw/sidebar/sidebar.scss
  • Filesystem Path: src/components/30-layout/02-molecules/02-sidebar/sidebar.scss
  • Size: 791 Bytes

There are no notes for this item.