Menù

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-menu">
     <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
     <label for="toggle" data-opens-menu>

         <span>Ciao</span><strong>Mario Rossi</strong>
         <div class="c-menu__icon">
             <img src="../../images/svgs/stk_profile_man.svg" alt="" aria-hidden="true" width="24">

             <p class="c-menu__notify" aria-hidden="true">2</p>
         </div>

         <svg class="expanded-text c-icon c-icon--24">
             <use xlink:href="#ic_arrow_drop_up_black_24px"></use>
         </svg> <svg class="collapsed-text c-icon c-icon--24">
             <use xlink:href="#ic_arrow_drop_down_black_24px"></use>
         </svg> <span class="u-visuallyhidden expanded-text">Menù aperto</span>
         <span class="u-visuallyhidden collapsed-text">Menù chiuso</span>
     </label>
     <div role="menu" data-menu-origin="right">

         <div class="c-menu__booked-item c-menu__booked-item--multiple ">
             <a href="../preview/page-reservation-detail.html" class="clickable-item">
                 <div class="c-media o-media c-media--booked-item">
                     <img class="c-media__figure o-media__figure" src="../../images/svgs/p1-2.svg" alt="Parcheggio P1 P2" height="" width="40">
                     <div class="c-media__body o-media__body">
                         Oggi hai un parcheggio prenotato al P1-2 <strong>alle ore 13:45</strong>
                     </div>
                 </div>
             </a>
             <a href="../preview/page-reservations-list.html">Vedi le altre prenotazioni di oggi</a>
         </div>

         <div class="c-menu__section">
             <div class="image">
                 <img src="../../images/svgs/stk_prenotazioni.svg" alt="Prenotazioni" aria-hidden="true" width="60">
             </div>
             <ul aria-label="Prenotazioni">
                 <strong aria-hidden="true" class="title">Prenotazioni</strong>
                 <li><a href="../preview/page-dashboard.html">Dashboard</a></li>
                 <li><a href="../preview/page-reservations-list.html">Le tue prenotazioni</a></li>
                 <li><a href="../preview/page-orders-list.html">I tuoi ordini</a></li>
                 <li><a href="#">I tuoi voucher digitali (130 €)</a></li>
             </ul>
         </div>

         <div class="c-menu__section">
             <div class="image">
                 <img src="../../images/svgs/stk_avatar.svg" alt="Profilo" aria-hidden="true" width="60">
             </div>
             <ul aria-label="Profilo">
                 <strong aria-hidden="true" class="title">Profilo</strong>
                 <li><a href="../preview/page-profile--default.html">Il tuo account</a></li>
                 <li><a href="../preview/page-billing-info.html">I tuoi dati di fatturazione</a></li>
                 <li><a href="../preview/page-privacy-settings.html">Le tue impostazioni privacy</a></li>
                 <li><a href="../preview/page-newsletter-sub.html">Le tue impostazioni newsletter</a></li>
             </ul>
         </div>

         <div class="c-menu__section">
             <div class="image">
                 <img src="../../images/svgs/stk_assistenza.svg" alt="Supporto" aria-hidden="true" width="60">
             </div>
             <ul aria-label="Supporto">
                 <strong aria-hidden="true" class="title">Supporto</strong>
                 <li><a href="#">Richiedi assistenza</a></li>
                 <li><a href="../preview/page-reclaims-list.html">I tuoi suggerimenti e reclami</a></li>
                 <li><a href="#">Richiedi assistenza</a></li>
             </ul>
         </div>

         <a href="#" class="c-menu__invite">Esci</a>

     </div>
 </div>


        <div class="c-menu">
  <input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="u-visuallyhidden">
  <label for="toggle" data-opens-menu>
    
    <span>Ciao</span><strong>Mario Rossi</strong>
    <div class="c-menu__icon">
      <img src="{{ path '/images/svgs/stk_profile_man.svg' }}" alt="" aria-hidden="true" width="24">
      
      {{#if hasBookedItem}}
        <p class="c-menu__notify" aria-hidden="true">{{ hasBookedItem.number }}</p>
      {{/if}}
    </div>

    {{> @icon symbol="ic_arrow_drop_up_black_24px" class="expanded-text c-icon c-icon--24" }}
    {{> @icon symbol="ic_arrow_drop_down_black_24px" class="collapsed-text c-icon c-icon--24" }}
    <span class="u-visuallyhidden expanded-text">Menù aperto</span>
    <span class="u-visuallyhidden collapsed-text">Menù chiuso</span>
  </label>
  <div role="menu" data-menu-origin="right">
    
    {{!-- 
      Per Endurance: {{#gt [value] [value] }}{{/gt}} è un controllo logico su due valori.
      È come fare 'if [value] > [value]' 
     --}}

    {{#if hasBookedItem}}
      <div class="c-menu__booked-item {{#gt hasBookedItem.number 1 }}c-menu__booked-item--multiple{{/gt}} ">
        <a href="{{ path '/components/preview/page-reservation-detail' }}" class="clickable-item">
          {{> @media--default booked-item }}
        </a>
        {{#gt hasBookedItem.number 1 }}
          <a href="{{ path '/components/preview/page-reservations-list' }}">Vedi le altre prenotazioni di oggi</a>
        {{/gt}}
      </div>
    {{/if}}

    <div class="c-menu__section">
      <div class="image">
        <img src="{{ path '/images/svgs/stk_prenotazioni.svg' }}" alt="Prenotazioni" aria-hidden="true" width="60">
      </div>
      <ul aria-label="Prenotazioni">
        <strong aria-hidden="true" class="title">Prenotazioni</strong>
        <li><a href="{{ path '/components/preview/page-dashboard' }}">Dashboard</a></li>
        <li><a href="{{ path '/components/preview/page-reservations-list' }}">Le tue prenotazioni</a></li>
        <li><a href="{{ path '/components/preview/page-orders-list' }}">I tuoi ordini</a></li>
        <li><a href="#">I tuoi voucher digitali (130 €)</a></li>
      </ul>
    </div>

    <div class="c-menu__section">
      <div class="image">
        <img src="{{ path '/images/svgs/stk_avatar.svg' }}" alt="Profilo" aria-hidden="true" width="60">
      </div>
      <ul aria-label="Profilo">
        <strong aria-hidden="true" class="title">Profilo</strong>
        <li><a href="{{ path '/components/preview/page-profile--default' }}">Il tuo account</a></li>
        <li><a href="{{ path '/components/preview/page-billing-info' }}">I tuoi dati di fatturazione</a></li>
        <li><a href="{{ path '/components/preview/page-privacy-settings' }}">Le tue impostazioni privacy</a></li>
        <li><a href="{{ path '/components/preview/page-newsletter-sub' }}">Le tue impostazioni newsletter</a></li>
      </ul>
    </div>

    <div class="c-menu__section">
      <div class="image">
        <img src="{{ path '/images/svgs/stk_assistenza.svg' }}" alt="Supporto" aria-hidden="true" width="60">
      </div>
      <ul aria-label="Supporto">
        <strong aria-hidden="true" class="title">Supporto</strong>
        <li><a href="#">Richiedi assistenza</a></li>
        <li><a href="{{ path '/components/preview/page-reclaims-list' }}">I tuoi suggerimenti e reclami</a></li>
        <li><a href="#">Richiedi assistenza</a></li>
      </ul>
    </div>

    <a href="#" class="c-menu__invite">Esci</a>

  </div>
</div>


        
            
            {
  "email": {
    "label_id": "login_email",
    "label_message": "e-mail",
    "label_class": null,
    "atom-input": {
      "id": "login_email",
      "type": "email",
      "class": null,
      "placeholder": "Inserisci il tuo indirizzo e-mail",
      "required": null,
      "hasNote": true,
      "describedby": "email-login-note"
    },
    "note_id": "email-login-note",
    "note_message": "Compila il campo inserendo il tuo indirizzo e-mail",
    "note_class": "u-visuallyhidden"
  },
  "password": {
    "label_id": "login-psw",
    "label_message": "password",
    "label_class": "has-password-button",
    "hasPasswordButton": true,
    "atom-input": {
      "id": "login-psw",
      "type": "password",
      "class": null,
      "placeholder": "Inserisci la tua password",
      "required": null,
      "hasNote": true,
      "autocomplete": "current-password",
      "describedby": "psw-login-note"
    },
    "note_id": "psw-login-note",
    "note_message": "Compila il campo inserendo la password del tuo account",
    "note_class": "u-visuallyhidden"
  },
  "lost-password": {
    "text": "Non ricordi la tua password?",
    "url": "/components/preview/insert-email"
  },
  "new-blq": {
    "text": "Non hai un profilo MyBLQ? Registrati ora",
    "url": "/components/preview/page-choice-profile"
  },
  "btn-login": {
    "name": "submit",
    "type": "button",
    "text": "Accedi",
    "modifier": "c-button--submit"
  },
  "booked-item": {
    "modifier": "c-media--booked-item",
    "img-src": "/images/svgs/p1-2.svg",
    "img-alt": "Parcheggio P1 P2",
    "img-width": "40",
    "body": "Oggi hai un parcheggio prenotato al P1-2 <strong>alle ore 13:45</strong>"
  }
}

File:

Content:


                                .c-menu {
  position: static;
  display: inline-block;
  font-size: remify(12px);

  a {
    color: primary(night, 120);
  }

  label[data-opens-menu] {
    display: flex;
    align-items: center;
    position: relative;

    &:focus {
      @include outline;
    }

    &:before {
      display: none;
      content: "";
      position: absolute;
      @include css-triangle("up", remify(8px), #f4f6f7);
      bottom: remify(-12px);
      left: 50%;
      transform: translateX(-50%);
    }

    span,
    strong {
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: inline-block;
      }
    }

    span {
      @include min-screen(bp(tablet-p)) {
        margin-left: remify(8px);
        margin-right: remify(4px);
      }
    }

    strong {
      // width: remify(100px);
      margin-right: remify(8px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  svg {
    * {
      fill: primary(night, 120);
    }
  }

  [role="menu"] {
    width: 95vw;
    max-width: remify(400px);
    background-color: #f4f6f7;
    padding: remify(16px);
    border-radius: remify(4px);
    margin-top: remify(16px);
    @include shadow(medium);
    text-align: left;
    border: remify(1px) solid primary(night, 20);

    li {
      line-height: 1.5;
       font-size: remify(14px);

    }
  }

  [data-opens-menu] {
    text-align: left;
    // background-color: primary(sky, 120);
    // border-radius: remify(4px);
    // border: remify(1px) solid primary(night, 80);
    // color: #fff;
    // padding: 0.33rem 0.5rem;
    text-decoration: none;
    height: 100%;
  }

  [type="checkbox"]:focus + [data-opens-menu],
  [role="menu"] a:focus {
    //outline: none;
    // background-color: primary(night, 60);
  }

  :checked + label[data-opens-menu] .expanded-text {
    display: inline;
  }

  :checked + label[data-opens-menu]::before {
    display: block;
  }

  :checked + label[data-opens-menu] .collapsed-text {
    display: none;
  }

  [type="checkbox"]:not(:checked) + label[data-opens-menu] .expanded-text {
    display: none;
  }

  [type="checkbox"]:not(:checked) + label[data-opens-menu] .collapsed-text {
    display: inline;
  }

  [role="menu"] {
    position: absolute;
    left: 0;
    display: none;
    z-index: $zIndex-atomMenuMyBLQ;
  }

  :checked ~ [role="menu"] {
    display: block;
  }

  [data-menu-origin="right"] {
    left: auto;
    right: 0;
  }

  [data-menu-origin="center"] {
    left: 50%;
    transform: translateX(-50%);
  }

  [role="menu"] a {
    display: block;
    min-width: 100%;
    margin-top: 0.125rem;
    // white-space: nowrap;
  }

  .c-menu__img {
    text-align: center;
    margin-bottom: remify(16px);
    display: none;
    @include min-screen(bp(tablet)) {
      display: block;
    }
  }

  .c-menu__title {
    color: primary(night, 100);
    text-align: center;
    font-weight: fw(light);
    margin-bottom: remify(24px);
    font-size: 150%;
    line-height: 1.333;
  }

  .c-menu__paragraph {
    color: primary(night, 100);
    text-align: center;
    margin-bottom: remify(24px);
    font-size: 100%;
  }

  .c-menu__notice {
    color: primary(night, 100);
    text-align: center;
    margin-top: remify(24px);
    padding-top: remify(24px);
    font-size: 75%;
    border-top: 1px solid primary(night, 20);

    strong {
      display: block;
    }
  }

  form {
    .forgetful {
      font-size: 100%;
      line-height: 1.5;
      text-align: center;
    }
  }

  .c-menu__invite {
    text-align: center;
    display: block;
  }

  .c-menu__section {
    border-bottom: remify(1px) solid primary(sky, 20);
    padding-bottom: remify(16px);
    margin-bottom: remify(16px);

    @include min-screen(bp(tablet)) {
      display: flex;
      align-items: center;
    }

    .image {
      display: none;

      @include min-screen(bp(tablet)) {
        display: block;
        margin-right: remify(24px);
      }
    }

    .title {
      text-transform: uppercase;
      margin-bottom: remify(16px);
      color: secondary(text, 100);
    }
  }

  .c-menu__booked-item {
    margin-bottom: remify(32px);
    border-bottom: remify(1px) solid primary(sky, 20);
    padding-bottom: remify(16px);

    a {
      text-align: center;
      margin-top: remify(16px);
    }

    .clickable-item {
      text-align: left;
      color: secondary(text, 100);
      text-decoration: none;
      margin-top: 0;
    }
  }

  .c-menu__booked-item--multiple {
    .clickable-item::after {
      content: "";
      display: block;
      width: 95%;
      height: remify(10px);
      border-radius: 0 0 remify(4px) remify(4px);
      background-color: #f4f6f7;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.8;
    }
  }

  .c-menu__icon {
    position: relative;
    margin-left: remify(6px);
    margin-right: remify(6px);
    display: flex;

    img {
      display: inline-block;
      position: relative;
      z-index: 3;
      width: remify(16px);

      @include min-screen(bp(tablet-p)) {
        width: remify(24px);
        margin-right: 0;
      }
    }
    .c-menu__notify {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: remify(16px);
      height: remify(16px);
      border-radius: remify(12px);
      background-color: #fff;
      color: primary(night, 100);
      font-size: remify(12px);
      font-weight: fw(bold);
      margin-left: remify(4px);
      
      @include min-screen(bp(tablet-p)) {
        width: remify(41px);
        height: remify(24px);
        border-radius: remify(12px);
        position: relative;
        z-index: 2;
        left: 0;
        margin-left: remify(-22px);
        justify-content: right;
        padding-right: remify(7px);
        // padding: remify(4px) remify(6px) 0 0;
        // width: remify(40px);
        // height: remify(26px);
        // top: remify(0px);
        // right: remify(-16px);
      }
    }
    
  }
  
}

.c-menu:has(input[type="checkbox"]:focus) {
  @include outline;
}


.c-orientation__utilities .c-menu__link {
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;

    span {
      padding-right: remify(6px);
      padding-left: 0;
      border: none;
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: inline-block;
      }
    }

    svg {
      padding-right: remify(6px);
      padding-left: 0;
      border: none;
    }

    img {
      padding: 0;
      border: none;
    }

}

.c-toolbar__right .c-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
  
  span,
  svg {
      padding-right: remify(6px);
      padding-left: 0;
      border: none;
      display: none;
      @include min-screen(bp(tablet-p)) {
        display: inline-block;
      }
    }
}

/*=============================================
          Menu apps download modifier
 =============================================*/

.c-menu--download-app {
  // margin-top: remify(16px);
  [data-opens-menu] {
    border-color: secondary(text, 100);
  }
  .c-menu__img {
    display: flex;
    justify-content: space-evenly;
    margin-top: remify(16px);

    a {
      min-width: auto;
    }
  }

  .c-menu__title {
    margin-top: remify(16px);
    margin-bottom: remify(16px);
  }

  p + p {
    margin-top: 0;
  }
}

URL: /components/raw/menu/_menu.scss
Filesystem Path: src/views/01-atoms/menu/_menu.scss
Size: 7.4 KB

Content:


                                (function () {

  var $container = $(".c-menu");
  var $label = $('*[data-opens-menu]');
  var $checkbox = $container.find($('input[type="checkbox"]'));

  // Functions that closes everything when clicking outside
  $(document).click(function (e) {
    // if the target of the click isn't the container nor a descendant of the container
    if (!$container.is(e.target) && $container.has(e.target).length === 0 && $checkbox.is(':checked')) {
      $container.find($label).trigger('click');
      $checkbox.prop("checked", false);
      //console.log($checkbox[0].checked);
    }
  });

})();

URL: /components/raw/menu/menu.js
Filesystem Path: src/views/01-atoms/menu/menu.js
Size: 592 Bytes

Handle: @menu
Preview:
- With layout
- Component only
Filesystem Path: src/views/01-atoms/menu/menu.hbs
References (2): @icon, @media--default
Referenced by (14): @orientation--logged, @toolbar--progress, @toolbar--logged, @orientation--emergency, @toolbar--language, @orientation, @orientation--nomenu, @toolbar, @toolbar--myflight, @toolbar--emergency, @toolbar--innovability, @toolbar--nomenu, @orientation--investors, @toolbar--investors

No notes defined.