<div class="account-navigation account-navigation--default">
    <h4 class="account-navigation__title">Aloha John</h4>
    <ul class="account-navigation__items">
        <li class="account-navigation__item">
            <a class="account-navigation__item-value" href="#">
        Your Account <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

      </a>
        </li>
        <li class="account-navigation__item account-navigation__item--current">
            <a class="account-navigation__item-value" href="#">
        Your Wishlist <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

      </a>
        </li>
        <li class="account-navigation__item">
            <a class="account-navigation__item-value" href="#">
        Your Orders <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

      </a>
        </li>
    </ul>
    <div class="account-navigation__actions">
        <button class="account-navigation__logout button button--plain-text">Logout</button>
    </div>
</div>
<div class="account-navigation account-navigation--{{_self.name}}">
  <h4 class="account-navigation__title">{{title}}</h4>
  <ul class="account-navigation__items">
    {{#each items}}
    <li class="account-navigation__item{{#if this.current}} account-navigation__item--current{{/if}}">
      <a class="account-navigation__item-value" href="{{this.path}}">
        {{label}} {{render '@icons--arrow-right'}}
      </a>
    </li>
    {{/each}}
  </ul>
  {{#if buttons}}
  <div class="account-navigation__actions">
    {{#each buttons}}
    <button class="account-navigation__{{action}} button button--plain-text">{{callToAction}}</button>
    {{/each}}
  </div>
  {{/if}}
</div>
{
  "title": "Aloha John",
  "items": [
    {
      "label": "Your Account",
      "path": "#"
    },
    {
      "label": "Your Wishlist",
      "path": "#",
      "current": true
    },
    {
      "label": "Your Orders",
      "path": "#"
    }
  ],
  "buttons": [
    {
      "callToAction": "Logout",
      "action": "logout"
    }
  ]
}
  • Content:
    .account-navigation {
      margin-bottom: 50px;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .account-navigation__title {
      margin: 5px 0 10px;
      padding: 0 0 5px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 17px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .account-navigation__items {
      @include reset-list;
    }
    
    .account-navigation__item {
      display: block;
      margin-bottom: 10px;
    }
    
    .account-navigation__item--current {
      .account-navigation__item-value {
        color: $color-primary;
      }
    }
    
    .account-navigation__item-value {
      display: block;
      position: relative;
      transition: color $transition-standard;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-decoration: none;
    
      .icon {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -3px;
        padding-right: 5px;
        transition: fill $transition-standard;
        fill: $color-darkest;
      }
    
      .icon--arrow-right {
        height: 6px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: inline;
    
        .icon {
          display: none;
        }
      }
    }
    
    .account-navigation__logout {
      min-width: 0;
      padding-left: 0;
      color: $color-error;
    
      &:hover {
        color: $color-error;
      }
    }
    
  • URL: /components/raw/account-navigation/account-navigation.scss
  • Filesystem Path: src/components/01-elements/navigation/account-navigation/account-navigation.scss
  • Size: 1.3 KB

There are no notes for this item.