<!-- Default -->
<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>

<!-- Toplevel -->
<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>

{{#if xbacklink}}
<div class="sidebar-back">
	<a href="/">{{ icon 'core/o-navigate-left' 12 }}</a> <a href="/">My Site</a>
</div>
{{/if}}

<header>
	<h2 class="sidebar-back"><a href="/" class="back">{{!-- {{ icon 'core/o-navigate-left' 10 'back' }} --}}{{ icon 'core/o-navigate-left' 12 }}</a> <a href="/">My Site</a></h2>
</header>

<ul class="appmenu">
	<li>
		<a href="/" class="selected">Pages</a>
		<a href="/pages/add">{{ icon 'core/o-plus' 8 }}</a>
	</li>
	<li>
		<a href="/">Blog</a>
		<a href="/blog/add">{{ icon 'core/o-plus' 8 }}</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">{{ icon 'core/o-plus' 8 }}</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>
/* Default */
{
  "backlink": true
}

/* Toplevel */
{
  "backlink": null
}

  • Content:
    .sidebar-back {
        font-weight: 200;
        @include font-scale(l, helvetica);
        text-decoration: none;
        color: palette(type,light);
        fill: palette(type,light);
        display: block;
        margin: 0 0 $half-gutter 0;
    }
    
    .sidebar-back svg {
        fill: palette(type);
    }
    
    .sidebar-back a {
      text-decoration: none;
      color: palette(type);
    }
    
    .sidebar-back a:hover,
    .sidebar-back a:focus {
      border-bottom: 1px solid palette(type);
    }
    
    .sidebar-back .icon-back {
      margin-bottom: 5px;
      margin-right: 2px;
    }
     
    .sidebar ul {
      margin: 0 0 2em 0;
      padding: 0;
      list-style: none;
    }
    
    .sidebar li {
        border-top: 1px solid palette(ui, keyline);
        display: flex;
        justify-content: space-between;
    }
    
    .sidebar li a,
    .sidebar li span {
      display: block;
      text-decoration: none;
      padding: .5em 15px .5em 15px;
      color: palette(type);
      font-weight: 200;
    }
    
    .sidebar li a:hover {
      color: #000; //palette(type, darker);
    }
    
    .sidebar .selected {
      color: palette(type, dark);
      font-weight: 500;
    }
    
    .sidebar h2 {
      font-weight: 200;
      @include font-scale(xxxl, helvetica);
      color: palette(type);
    }
    
    .sidebar h3 {
      @include font-scale(base, helvetica);
      color: palette(type, dark);
      margin-bottom: .5em;
    }
    
    .sidebar .badge {
      background-color: palette(info);
      color: #fff;
    }
  • URL: /components/raw/nav-sidebar/nav-sidebar.scss
  • Filesystem Path: src/components/13-navigation/02-sidebar/01-atoms/01-nav-sidebar/nav-sidebar.scss
  • Size: 1.3 KB

There are no notes for this item.