Designsystem

Sidebar: With Video 

<section class="sidebar">
    <nav aria-label="Menu gauche">
        <ul class="leftMenu">
            <li>
                <div class="videoCard card--focused">
                    <h1 class="videoCard-title">Le programme Prime Eco Energie Auchan</h1>
                    <a href="#"><img src="/placeholders/images/generic.svg" alt="Le programme Prime Eco Energie Auchan"></a>
                </div>
            </li>
            <li class="leftMenu-item ">
                <a href="#" class="leftMenu-item-link">
                                        <span class="leftMenu-item-label">Programme prime éco énergie Auchan</span>
                                </a>
            </li>
            <li class="leftMenu-item ">
                <a href="#" class="leftMenu-item-link">
                                        <span class="leftMenu-item-label">Comment bénéficier de la prime</span>
                                </a>
            </li>
            <li class="leftMenu-item ">
                <a href="#" class="leftMenu-item-link">
                                        <span class="leftMenu-item-label">Un engagement de versement de votre prime éco énergie Auchan sous 2 semaines</span>
                                </a>
            </li>
            <li class="leftMenu-item is-current">
                <a href="#" class="leftMenu-item-link">
                                        <span class="leftMenu-item-label">Mes établissements</span>
                                </a>
            </li>
            <li class="leftMenu-item ">
                <a href="#" class="leftMenu-item-link">
                                        <span class="leftMenu-item-label">Auchan s&#x27;engage</span>
                                </a>
            </li>
        </ul>
    </nav>
</section>
 
<section class="sidebar">
        <nav aria-label="Menu gauche">
                <ul class="leftMenu">
                        {{#if sidebar.video_title}}
                        <li>
                                <div class="videoCard card--focused">
                                        <h1 class="videoCard-title">{{sidebar.video_title}}</h1>
                                        <a href="#"><img src="{{sidebar.picture}}" alt="{{sidebar.video_title}}"></a>
                                </div>
                        </li>
                        {{/if}}
                        {{#each sidebar.menu}}
                        <li class="leftMenu-item {{class}}">
                                <a href="#" class="leftMenu-item-link">
                                        <span class="leftMenu-item-label">{{text}}</span>
                                </a>
                        </li>
                        {{/each}}
                </ul>
        </nav>
</section>
 
{
  "sidebar": {
    "menu": {
      "1": {
        "text": "Programme prime éco énergie Auchan"
      },
      "2": {
        "text": "Comment bénéficier de la prime"
      },
      "3": {
        "text": "Un engagement de versement de votre prime éco énergie Auchan sous 2 semaines"
      },
      "4": {
        "text": "Mes établissements",
        "class": "is-current"
      },
      "5": {
        "text": "Auchan s'engage"
      }
    },
    "video_title": "Le programme Prime Eco Energie Auchan",
    "picture": "/placeholders/images/generic.svg"
  }
}

There are no notes for this item.