<!-- Sidebar starts -->
<aside class="c-sidebar c-sidebar--horizontal">
    <div class="c-sidebar__wrapper">
        <header class="c-sidebar__header">
            <a href="/" class="c-sidebar__logo" title="Home Page">
                <!-- Logo starts -->
                <svg class="c-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.13 181.89">
  <defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:0.5px}.cls-1{stroke:#e6e7e8}.cls-3{fill:#f1f2f2}.cls-4{fill:#e6e7e8}.cls-5{fill:#d1d3d4}.cls-6{fill:#bcbec0}.cls-11{fill:#fff}</style></defs>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_6" data-name="Layer 6">
      <path d="M0.62 0.62L81.16 0.62" class="cls-1"/>
      <path fill="none" stroke="#a7a9ac" stroke-miterlimit="10" stroke-width="0.5px" d="M80.36 0.62L160.09 80.15"/>
      <path d="M0.18 0.18L80.36 80.15" class="cls-1"/>
      <path d="M80.36 80.15L80.36 100.03" class="cls-1"/>
      <path d="M40.49 40.38L0.62 0.62 40.49 0.62 40.49 40.38z" class="cls-3"/>
      <path d="M40.49 0.62L80.36 40.38 40.49 40.38 40.49 0.62z" class="cls-4"/>
      <path d="M80.36 40.38L40.49 0.62 80.36 0.62 80.36 40.38z" class="cls-5"/>
      <path d="M80.36 0.62L120.22 40.38 80.36 40.38 80.36 0.62z" class="cls-6"/>
      <path d="M120.22 40.38L160.09 80.15 120.22 80.15 120.22 40.38z" class="cls-6"/>
      <path d="M120.22 80.15L80.36 40.38 120.22 40.38 120.22 80.15z" class="cls-5"/>
      <path d="M80.36 40.38L120.22 80.15 80.36 80.15 80.36 40.38z" class="cls-4"/>
      <path d="M80.36 80.15L40.49 40.38 80.36 40.38 80.36 80.15z" class="cls-3"/>
      <path d="M120.22 119.91L160.09 80.15 120.22 80.15 120.22 119.91z" class="cls-5"/>
      <path d="M120.22 80.15L80.36 119.91 120.22 119.91 120.22 80.15z" class="cls-4"/>
      <path d="M80.36 119.91L120.22 80.15 80.36 80.15 80.36 119.91z" class="cls-3"/>
      <path d="M80.36 139.79L40.49 100.03 80.36 100.03 80.36 139.79z" class="cls-4"/>
      <path fill="#a7a9ac" d="M130.38 159.67L90.52 119.91 130.38 119.91 130.38 159.67z"/>
      <path fill="#414042" d="M130.38 133.81L156.31 159.67 130.38 159.67 130.38 133.81z"/>
      <path fill="#a9abac" d="M120.22 119.91L146.27 93.98 146.27 119.91 120.22 119.91z"/>
      <path fill="#DD2A0E" d="M148.21 94.02L174.13 119.88 148.21 119.88 148.21 94.02z"/>
      <g class="c-logo__text">
        <path d="M51.09,177a4.08,4.08,0,0,0-1.69-3.68A8.43,8.43,0,0,0,45.51,172a4.76,4.76,0,0,1-2.83-1.13,1.59,1.59,0,0,1,0-2c.43-.74,1.4-1.11,2.88-1.11A4.29,4.29,0,0,1,48.8,169l2-2a7.78,7.78,0,0,0-2.24-1.51,9.51,9.51,0,0,0-3.66-.56,6.75,6.75,0,0,0-3.92,1.35,4.06,4.06,0,0,0-1.87,3.5,3.59,3.59,0,0,0,1.62,3.38,9.13,9.13,0,0,0,3.72,1.24c1.64.16,2.65.6,3.08,1.34a2.08,2.08,0,0,1,0,2.22c-.43.75-1.45,1.11-3.11,1.11a6.06,6.06,0,0,1-4-1.51l-2,2A8.63,8.63,0,0,0,41,181.22a10.09,10.09,0,0,0,3.95.68,6.81,6.81,0,0,0,4.31-1.45A4.19,4.19,0,0,0,51.09,177Z" class="cls-11"/>
        <path d="M16.78,181.89h3.41l-4.27-7.47.29-.09c2-.66,3-2.15,3-4.56,0-3.2-1.91-4.76-5.83-4.76H6.07v16.89H9v-7.19h3.57ZM9,172v-4.2H14.2c1.91.06,2.34,1.14,2.37,2s-.47,2.14-2.4,2.17H9Z" class="cls-11"/><path d="M21.8 167.75L27.59 167.75 27.59 181.89 30.57 181.89 30.57 167.75 36.37 167.75 36.37 165.01 21.8 165.01 21.8 167.75z" class="cls-11"/><path d="M69.57 181.56L69.57 164.74 68.45 164.74 68.45 172.37 58.27 172.37 58.27 164.74 57.15 164.74 57.15 181.56 58.27 181.56 58.27 173.34 68.45 173.34 68.45 181.56 69.57 181.56z" class="cls-11"/>
        <path d="M85.3,177l1.88,4.6h1.27l-7.08-16.82H80l-7.34,16.82h1.14l2-4.6ZM80.63,165.6,84.92,176h-8.7Z" class="cls-11"/>
        <path d="M110.32 164.74L106.01 180.07 105.64 180.07 105.53 179.89 101.21 164.74 99.53 164.74 95.15 180.07 94.77 180.07 94.67 179.89 90.42 164.74 89.28 164.74 94.17 181.56 95.78 181.56 100.16 166.15 100.53 166.15 100.63 166.33 104.96 181.56 106.56 181.56 111.46 164.74 110.32 164.74z" class="cls-11"/><path d="M116.23 172.68L124.93 181.56 126.56 181.56 117.55 172.4 126.02 164.74 124.53 164.74 116.14 172.37 115.65 172.37 115.65 164.74 114.54 164.74 114.54 181.56 115.65 181.56 115.65 172.6 116.15 172.6 116.23 172.68z" class="cls-11"/>
        <path d="M139.01 173.34L139.01 172.37 130.6 172.37 130.6 165.71 139.57 165.71 139.57 164.74 129.48 164.74 129.48 181.56 139.97 181.56 139.97 180.59 130.6 180.59 130.6 173.34 139.01 173.34z" class="cls-11"/><path d="M153.88 164.74L148.38 173.17 143.01 164.74 141.68 164.74 147.83 174.27 147.83 181.56 148.94 181.56 148.94 174.27 155.09 164.74 153.88 164.74z" class="cls-11"/><path d="M167.56 173.34L167.56 172.37 159.14 172.37 159.14 165.71 168.12 165.71 168.12 164.74 158.03 164.74 158.03 181.56 168.51 181.56 168.51 180.59 159.14 180.59 159.14 173.34 167.56 173.34z" class="cls-11"/>
      </g>
    </g>
  </g>
</svg>
                <!-- Logo ends -->

            </a>
        </header>

        <!-- Mobile menu button starts -->
        <button class="c-btn c-btn--link c-btn--link--no-underline c-sidebar__nav__trigger js-c-sidebar__nav__trigger" aria-label="Toggle menu">
      Menu
    </button>
        <!-- Mobile menu button ends -->

        <!-- Navigation starts -->
        <nav class="c-sidebar__nav">
            <ul class="c-sidebar__nav__list">
                <li class="c-sidebar__nav__item c-sidebar__nav__item--parent">
                    <span class="c-sidebar__nav__link">Facilities</span>
                    <ul class="c-sidebar__nav-child">
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Dashboard</a>
                        </li>
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">DBOL</a>
                        </li>
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">IBOL</a>
                        </li>
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">WO</a>
                        </li>
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Transfer</a>
                        </li>
                    </ul>
                </li>
                <li class="c-sidebar__nav__item c-sidebar__nav__item--parent">
                    <span class="c-sidebar__nav__link">Asset management</span>
                    <ul class="c-sidebar__nav-child">
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Inventory Viewer</a>
                        </li>
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Order History</a>
                        </li>
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Inspection report</a>
                        </li>
                    </ul>
                </li>
                <li class="c-sidebar__nav__item">
                    <a href="#" class="c-sidebar__nav__link">Well analysis</a>
                </li>
                <li class="c-sidebar__nav__item">
                    <a href="#" class="c-sidebar__nav__link">CRM</a>
                </li>
                <li class="c-sidebar__nav__item c-sidebar__nav__item--parent">
                    <span class="c-sidebar__nav__link">Data Structure</span>
                    <ul class="c-sidebar__nav-child">
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">People</a>
                        </li>
                        <!--
            -->
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Companies</a>
                        </li>
                        <!--
            -->
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Wells</a>
                        </li>
                        <!--
            -->
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Racks</a>
                        </li>
                        <!--
            -->
                        <li class="c-sidebar__nav-child__item">
                            <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Facilities</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- Navigation ends -->

        <footer class="c-sidebar__footer">
            <button class="c-btn c-btn--link c-sidebar__layout-btn">Switch layout</button>
            <div class="c-sidebar__username-dropdown">
                <h2 class="c-sidebar__username">Joseph Saliba</h2>
                <a href="#" class="c-sidebar__nav-link__logout">Sign Out</a>
            </div>
        </footer>
    </div>
</aside>
<!-- Sidebar ends -->
<!-- Sidebar starts -->
<aside class="c-sidebar c-sidebar--horizontal">
  <div class="c-sidebar__wrapper">
    <header class="c-sidebar__header">
      <a href="/" class="c-sidebar__logo" title="Home Page">
        {{ render '@logo' }}
      </a>
    </header>

    <!-- Mobile menu button starts -->
    <button class="c-btn c-btn--link c-btn--link--no-underline c-sidebar__nav__trigger js-c-sidebar__nav__trigger" aria-label="Toggle menu">
      Menu
    </button>
    <!-- Mobile menu button ends -->

    <!-- Navigation starts -->
    <nav class="c-sidebar__nav">
      <ul class="c-sidebar__nav__list">
        <li class="c-sidebar__nav__item c-sidebar__nav__item--parent">
          <span class="c-sidebar__nav__link">Facilities</span>
          <ul class="c-sidebar__nav-child">
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Dashboard</a>
            </li>
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">DBOL</a>
            </li>
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">IBOL</a>
            </li>
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">WO</a>
            </li>
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Transfer</a>
            </li>
          </ul>
        </li>
        <li class="c-sidebar__nav__item c-sidebar__nav__item--parent">
          <span class="c-sidebar__nav__link">Asset management</span>
          <ul class="c-sidebar__nav-child">
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Inventory Viewer</a>
            </li>
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Order History</a>
            </li>
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Inspection report</a>
            </li>
          </ul>
        </li>
        <li class="c-sidebar__nav__item">
          <a href="#" class="c-sidebar__nav__link">Well analysis</a>
        </li>
        <li class="c-sidebar__nav__item">
          <a href="#" class="c-sidebar__nav__link">CRM</a>
        </li>
        <li class="c-sidebar__nav__item c-sidebar__nav__item--parent">
          <span class="c-sidebar__nav__link">Data Structure</span>
          <ul class="c-sidebar__nav-child">
            <li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">People</a>
            </li><!--
            --><li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Companies</a>
            </li><!--
            --><li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Wells</a>
            </li><!--
            --><li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Racks</a>
            </li><!--
            --><li class="c-sidebar__nav-child__item">
              <a href="#" class="c-sidebar__nav__link c-sidebar__nav-child__link">Facilities</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <!-- Navigation ends -->

    <footer class="c-sidebar__footer">
      <button class="c-btn c-btn--link c-sidebar__layout-btn">Switch layout</button>
      <div class="c-sidebar__username-dropdown">
        <h2 class="c-sidebar__username">{{ username }}</h2>
        <a href="#" class="c-sidebar__nav-link__logout">Sign Out</a>
      </div>
    </footer>
  </div>
</aside>
<!-- Sidebar ends -->
{
  "username": "Joseph Saliba"
}
  • Content:
    .c-sidebar {
      z-index: 100;
      position: sticky;
      top: 0;
      flex-grow: 1;
      width: 100%;
      padding: $space-unit $space-md $space-md;
      background-color: $color-brand-secondary-1000;
      font-size: $text-size-7;
    
      @include mq(678px) {
        position: relative;
        padding: $space-lg 0;
        width: rem(190);
      }
    }
    
      .c-sidebar__wrapper {
        display: flex;
        flex-wrap: wrap;
    
        @include mq(678px) {
          position: -webkit-sticky;
          position: sticky;
          top: $space-lg;
          flex-direction: column;
          min-height: calc(100vh - 4rem);
        }
      }
    
        .c-sidebar__header {
    
          @include mq(678px) {
            margin-bottom: $space-lg;
          }
        }
    
          .c-sidebar__logo {
            display: block;
            text-align: center;
          }
    
            .c-logo {
              width: rem(50);
              margin-bottom: rem(-8);
    
              @include mq(678px) {
                width: 100%;
                max-width: rem(100);
                margin-bottom: 0;
              }
            }
    
            .c-logo__text {
              display: none;
    
              @include mq(678px) {
                display: block;
              }
            }
    
        .c-sidebar__nav {
          display: none;
          position: relative;
          width: calc(#{$space-md} * 2 + 100%);
          margin-right: -#{$space-md};
          margin-bottom: $space-unit;
          margin-left: -#{$space-md};
          padding-top: $space-unit;
    
          @include mq(678px) {
            display: block;
            width: 100%;
            margin: 0 0 $space-xl;
            padding-top: $space-lg;
    
            &::before {
              position: absolute;
              top: 0;
              left: $space-unit;
              width: calc(100% - 2rem);
              height: rem(1.5);
              background-color: rgba($color-brand-secondary-800, 0.5);
              content: '';
            }
          }
        }
    
        .c-sidebar__nav__list {
          padding: 0;
        }
    
          .c-sidebar__nav__item--parent {
    
            > .c-sidebar__nav__link {
              padding-right: rem(24);
    
              &::after {
                display: block;
                position: absolute;
                top: 44%;
                right: $space-md;
                width: $space-xxs;
                height: $space-xxs;
                transform: rotate(135deg);
                border-top: rem(1) solid;
                border-left: rem(1) solid;
                border-color: rgba($color-white, 0.8);
                content: '';
              }
    
              &.is-active {
                border: 0;
                background: lighten($color-brand-secondary-900, 2%);
    
                &::after {
                  top: 38%;
                  transform: rotate(-135deg);
                  border-color: $color-white;
                }
              }
            }
          }
    
          .c-sidebar__nav__link {
            display: block;
            position: relative;
            padding: $space-unit $space-md;
            color: rgba($color-white, 0.8);
            text-decoration: none;
            cursor: pointer;
            transition: $global-transition;
    
            @include hocus() {
              background-color: lighten($color-brand-secondary-1000, 2.5%);
              color: $color-brand-primary-100;
              text-decoration: none;
            }
    
            &.is-active {
              border-right: rem(4) solid $color-brand-tertiary-600;
              background: linear-gradient(90deg,lighten($color-brand-secondary-900, 2%) 80%, lighten($color-brand-secondary-900, 8%) 100%);
              color: $color-white;
              font-size: rem(14);
    
              & + .c-sidebar__nav-child {
                display: block;
              }
            }
          }
    
            .c-sidebar__nav-child {
              display: none;
              padding: $space-sm 0;
              background-color: darken($color-brand-secondary-1000, 2%);
              font-size: $text-size-7;
            }
    
            .c-sidebar__nav-child__link {
              padding-left: $space-lg;
              background-color: darken($color-brand-secondary-1000, 2%);
              color: $color-brand-primary-100;
    
              @include acthocus() {
                background: darken($color-brand-secondary-1000, 1%);
              }
    
              &.is-active {
                background: linear-gradient(90deg, $color-brand-secondary-1000 80%, lighten($color-brand-secondary-1000, 3%) 100%);
                color: $color-white;
                font-size: rem(14);
              }
            }
    
        .c-sidebar__footer {
          display: none;
          width: calc(#{$space-md} * 2 + 100%);
          margin-right: -#{$space-md};
          margin-left: -#{$space-md};
    
          @include mq(678px) {
            display: block;
            width: 100%;
            margin: auto 0 0;
          }
        }
    
          .c-sidebar__username-dropdown {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: space-between;
            margin: 0 $space-unit;
            padding: $space-xs $space-xs;
            border: rem(1) solid lighten($color-brand-secondary-1000, 3%);
            border-radius: $global-radius;
            background-color: darken($color-brand-secondary-1000, 2%);
    
            @include mq(678px) {
              display: block;
              padding: $space-sm $space-xs;
    
              @include hocus() {
    
                .c-sidebar__username {
                  opacity: 1;
                }
    
                .c-sidebar__nav-link__logout {
                  transform: translateY(rem(-40));
                  opacity: 1;
                }
              }
            }
          }
    
            .c-sidebar__username {
              color: $color-grey-100;
              font-size: $text-size-7;
              font-weight: 400;
              line-height: 1.5;
              opacity: 0.8;
              transition: $global-transition;
    
              @include mq(678px) {
                padding-right: $space-unit;
                background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='1'%3e%3c/circle%3e%3ccircle cx='12' cy='5' r='1'%3e%3c/circle%3e%3ccircle cx='12' cy='19' r='1'%3e%3c/circle%3e%3c/svg%3e") 100% center/rem(16) no-repeat;
                opacity: 0.6;
              }
            }
    
            .c-sidebar__nav-link__logout {
              display: block;
              padding: $space-xxs $space-xs;
              border: rem(1) solid rgba($color-brand-primary-200, 0.6);
              border-radius: $global-radius;
              color: $color-brand-primary-200;
              font-size: $text-size-8;
              text-decoration: none;
              transition: $global-transition;
    
              @include mq(678px) {
                position: absolute;
                top: 0;
                right: 0;
                padding: $space-sm;
                border: 0;
                border-radius: $global-radius $global-radius 0 0;
                background-color: $color-brand-primary-200;
                color: $color-brand-primary-800;
                font-size: $text-size-7;
                opacity: 0;
              }
    
              @include acthocus() {
                background-color: lighten($color-brand-primary-100, 5%);
                color: $color-brand-primary-900;
              }
            }
    
            .c-sidebar__layout-btn {
              display: none;
    
              @include mq(678px) {
                display: block;
                width: 100%;
                margin: 0 $space-md $space-xs;
                padding-left: $space-md;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32' stroke='%23f7f7f7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4v25h25V4H3zm24 24H4V11h23v17zm0-18H4V5h23v5z'/%3E%3C/svg%3E") left center/$space-unit no-repeat;
                color: $color-grey-100;
                font-size: $text-size-7;
                text-align: left;
                opacity: 0.5;
    
                @include acthocus() {
                  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32' stroke='%23f7f7f7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4v25h25V4H3zm24 24H4V11h23v17zm0-18H4V5h23v5z'/%3E%3C/svg%3E") left center/$space-unit no-repeat;
                  color: $color-grey-100;
                  opacity: 0.8;
                  text-decoration: none;
                }
    
                &::after {
                  content: none;
                }
              }
            }
    
    
    /* ==========================================================================
       #HORIZONTAL SIDEBAR STYLES
       ========================================================================== */
    
    .c-sidebar--horizontal {
    
      @include mq(782px) {
    
        flex-basis: 100%;
        width: 100%;
        padding: 0 $space-xl;
    
        > .c-sidebar__wrapper {
          display: flex;
          position: static;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-between;
          min-height: auto;
        }
    
        .c-sidebar__header {
          margin: 0;
        }
    
        .c-logo {
          width: rem(50);
          margin-bottom: rem(-8);
        }
    
        .c-logo__text {
          display: none;
        }
    
        .c-sidebar__nav {
          position: static;
          width: auto;
          margin: 0;
          padding: 0;
    
          &::before {
            content: none;
          }
        }
    
        .c-sidebar__nav__item {
          display: inline-block;
        }
    
        .c-sidebar__nav__item--parent {
    
          > .c-sidebar__nav__link.is-active {
            border: 0;
            background: lighten($color-brand-secondary-900, 3%);
          }
        }
    
        .c-sidebar__nav__link {
          display: block;
          z-index: 5;
          position: relative;
          padding: $space-lg $space-unit;
          @include text-preset-8;
    
          @include hocus() {
            background-color: lighten($color-brand-secondary-1000, 2.5%);
            color: $color-brand-primary-100;
          }
    
          &::after {
            top: 47.5%;
            right: $space-xs;
          }
    
          &.is-active {
    
            &::after {
              top: 45%;
            }
          }
    
          &.is-active {
            border-right: 0;
            border-bottom: rem(4) solid $color-brand-tertiary-600;
            background: radial-gradient(circle at center 130%, lighten($color-brand-secondary-900, 10%) 20%, transparent 60%);
            font-size: $text-size-7;
    
    
            & + .c-sidebar__nav-child {
              display: flex;
              transform: translateY(0);
              padding: 0 $space-xl;
              background-color: darken($color-brand-secondary-1000, 4%);
              opacity: 1;
              pointer-events: auto;
              overflow: auto;
    
              .c-sidebar__nav-child__link {
                padding: $space-unit $space-md;
              }
            }
          }
        }
    
        .c-sidebar__nav-child {
          display: flex;
          position: absolute;
          right: 0;
          left: 0;
          width: 100%;
          padding: 0;
          transform: translateY(rem(-60));
          background-color: transparent;
          opacity: 0;
          pointer-events: none;
          transition: $global-transition;
        }
    
        .c-sidebar__nav-child__link {
          border-bottom: rem(4) solid transparent;
          background-color: transparent;
    
          &.is-active {
            border-right: 0;
            border-color: $color-brand-tertiary-600;
            background: radial-gradient(circle at center 160%, lighten($color-brand-secondary-900, 10%) 30%, transparent 80%);
          }
        }
    
        .c-sidebar__footer {
          display: flex;
          flex-direction: column-reverse;
          width: auto;
          margin: 0;
          text-align: center;
        }
    
        .c-sidebar__layout-btn {
          min-height: auto;
          margin: 0 0 rem(-6);
          padding: $space-xs 0 $space-xs $space-md;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32' stroke='%23f7f7f7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4v25h25V4H3zm8 24H4V5h7v23zm16 0H12V5h15v23z'/%3E%3C/svg%3E");
          font-size: $text-size-8;
          text-align: center;
    
          &:hover,
          &:active,
          &:focus {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32' stroke='%23f7f7f7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4v25h25V4H3zm8 24H4V5h7v23zm16 0H12V5h15v23z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            text-decoration: none;
          }
        }
    
        .c-sidebar__username-dropdown {
          margin: 0 0 rem(2);
          padding: rem(6) $space-xs;
          min-width: rem(100);
    
          @include hocus() {
    
            .c-sidebar__username {
              opacity: 1;
            }
    
            .c-sidebar__nav-link__logout {
              z-index: 0;
              transform: translateY(rem(28));
            }
          }
        }
    
        .c-sidebar__username {
          background-size: rem(12);
          font-size: $text-size-8;
        }
    
        .c-sidebar__nav-link__logout {
          padding: rem(6);
          border: rem(.5) solid transparent;
          border-radius: 0 0 $global-radius $global-radius;
          font-size: $text-size-8;
    
          &:hover {
            border-color: currentColor;
          }
        }
      }
    }
    
    
    .c-sidebar__nav__trigger {
        display: flex;
        flex-flow: row-reverse;
        align-items: center;
        margin-left: auto;
        padding: 0;
        color: $color-white;
    
        @include mq(678px) {
          display: none;
        }
    
        @include acthocus() {
          color: $color-white;
        }
      }
        .c-sidebar__nav__trigger::before {
        display: inline-block;
        width: rem(40);
        height: rem(40);
        font-size: 3em;
        font-weight: 200;
        line-height: 0.7;
        text-align: right;
        content: "\2630"; // Hamburger icon ☰
      }
      .c-sidebar__nav__trigger.is-open::before {
        width: rem(24);
        font-size: 2rem;
        line-height: 1.2;
        content: "×"; // Close icon X
      }
      .c-sidebar__nav__trigger.is-open + .c-sidebar__nav,
      .c-sidebar__nav__trigger.is-open + .c-sidebar__nav + .c-sidebar__footer {
        display: block;
      }
    
  • URL: /components/raw/sidebar-nav/_sidebar-nav.scss
  • Filesystem Path: components/_code-components/navigation/sidebar-nav/_sidebar-nav.scss
  • Size: 13.6 KB
  • Content:
    var sidebarLink = document.querySelectorAll('.c-sidebar__nav__item > .c-sidebar__nav__link');
    var sidebarParentLink = document.querySelectorAll('.c-sidebar__nav__item--parent');
    var sidebarChildLink = document.querySelectorAll('.c-sidebar__nav-child__link');
    var switchLayout = document.querySelectorAll('.c-sidebar__layout-btn');
    var sidebar = document.querySelectorAll('.c-sidebar');
    
    sidebarLink.forEach((sidebarLink) => {
      sidebarLink.onclick = (event) => {
        const sl = event.target;
        if(sl.classList.contains("is-active")) {
          removeAllActiveClasses();
        } else {
          removeAllActiveClasses();
          sl.classList.add("is-active");
        }
      };
    })
    
    function removeAllActiveClasses() {
      sidebarLink.forEach((sidebarLink) => {
        sidebarLink.classList.remove("is-active");
      });
    }
    
    sidebarChildLink.forEach((sidebarChildLink) => {
      sidebarChildLink.onclick = (event) => {
        const sl = event.target;
        if(sl.classList.contains("is-active")) {
          removeAllChildActiveClasses();
        } else {
          removeAllChildActiveClasses();
          sl.classList.add("is-active");
        }
      };
    })
    
    function removeAllChildActiveClasses() {
      sidebarChildLink.forEach((sidebarChildLink) => {
        sidebarChildLink.classList.remove("is-active");
      });
    }
    
    
    // # Works but can't toggle if you click in an active items
    //
    // for (var i = 0, l = sidebarLink.length; i < l; i++) {
    //
    //   sidebarLink[i].onclick = function() {
    //     this.classList.toggle("is-active");
    //
    //     sidebarLink.forEach(function(elem) {
    //       elem.classList.remove("is-active");
    //     });
    //     element = this;
    //     if (element.classList.contains("is-active")) {
    //       element.classList.remove("is-active");
    //     } else {
    //       element.classList.add("is-active");
    //     }
    //     return false;
    //   }
    // }
    //
    // for (var i = 0, l = sidebarChildLink.length; i < l; i++) {
    //
    //   sidebarChildLink[i].onclick = function() {
    //     sidebarChildLink.forEach(function(elem) {
    //       elem.classList.remove("is-active");
    //     });
    //     element = this;
    //     if (element.classList.contains("is-active")) {
    //       element.classList.remove("is-active");
    //     } else {
    //       element.classList.add("is-active");
    //     }
    //     return false;
    //   }
    // }
    
    switchLayout[0].onclick = function() {
      sidebar[0].classList.toggle("c-sidebar--horizontal");
      return false;
    }
    
    function openMenu(){
      var classes = this.className;
    
      if (classes.indexOf('is-open') < 0) {
        classes += ' is-open';
      } else {
        classes = classes.replace(' is-open', '');
      }
    
      this.className = classes;
    }
    
    document.querySelector(".js-c-sidebar__nav__trigger").addEventListener("click", openMenu);
    
  • URL: /components/raw/sidebar-nav/sidebar-nav.js
  • Filesystem Path: components/_code-components/navigation/sidebar-nav/sidebar-nav.js
  • Size: 2.7 KB

There are no notes for this item.