Tangible Pattern Library

Off Canvas Nav 

<div class="c-off-canvas-nav" id="jsOffCanvasNav">

    <div class="c-off-canvas-nav__list">

        <nav class="c-nav c-nav--off-canvas" lang="en">
            <ul class="c-nav__list">

                <li class="c-nav__list-item">
                    <a href="work" class="c-nav__link ">Work</a>
                </li>

                <li class="c-nav__list-item">

                    <div class="c-dropdown c-dropdown--raw c-dropdown--centered-list c-dropdown--nav">
                        <button class="c-dropdown__button" aria-expanded="false" aria-controls="services-dropdown-mobile">
                            <span class="c-dropdown__button-text">Services</span>
                            <span class="c-dropdown__button-icon"><svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                                    <use xlink:href="#icn-arrow-bottom-24px"></use>
                                </svg></span>
                        </button>
                        <ul class="c-dropdown__list" id="services-dropdown-mobile">
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="#">Design for Innovation</a>
                            </li>
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="#">Ecosystem Design</a>
                            </li>
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="#">Digital Product Design</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="c-nav__list-item">
                    <a href="impact" class="c-nav__link ">Impact</a>
                </li>

                <li class="c-nav__list-item">

                    <div class="c-dropdown c-dropdown--raw c-dropdown--centered-list c-dropdown--nav">
                        <button class="c-dropdown__button" aria-expanded="false" aria-controls="culture-dropdown-mobile">
                            <span class="c-dropdown__button-text">Culture</span>
                            <span class="c-dropdown__button-icon"><svg class="u-elevation-level-600 c-icon c-icon--20" aria-hidden="true" focusable="false">
                                    <use xlink:href="#icn-arrow-bottom-24px"></use>
                                </svg></span>
                        </button>
                        <ul class="c-dropdown__list" id="culture-dropdown-mobile">
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="life">Life in Tangible</a>
                            </li>
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="thinking">Thinking</a>
                            </li>
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="inspiration">Inspiration</a>
                            </li>
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="community">Community</a>
                            </li>
                            <li class="c-dropdown__list-item">

                                <a class="c-dropdown__link" href="newsletter">Newsletter</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="c-nav__list-item">
                    <a href="contacts" class="c-nav__link ">Contacts</a>
                </li>

            </ul>
        </nav>
    </div>

    <div class="c-off-canvas-nav__body">
        <p class="c-off-canvas-nav__body-claim">Il nostro pensare per fare bene</p>
        <ul class="c-off-canvas-nav__secondary-nav">
            <li class="c-off-canvas-nav__secondary-nav-item">
                <a href="thinking">Thinking</a>
            </li>
            <li class="c-off-canvas-nav__secondary-nav-item">
                <a href="inspiration">Inspiration</a>
            </li>
            <li class="c-off-canvas-nav__secondary-nav-item">
                <a href="culture/community">Community</a>
            </li>
        </ul>
    </div>
    <div class="c-off-canvas-nav__language">

        <div class="c-language-switcher">
            <a href="" class="c-language-switcher__action ">it</a>
            <a href="" class="c-language-switcher__action ">en</a>
        </div>
    </div>

</div>
 
{% set languageSwitcher = (craft.app.request.segments | first) not in ['thinking', 'job-positions'] %}

{% set secondary_nav = [
  { url: "thinking", text: "Thinking", engDisabled: true  },
  { url: "inspiration", text: "Inspiration", engDisabled: true },
  { url: "culture/community", text: "Community" }
] %}

<div class="c-off-canvas-nav{% if modifier is defined %} {{ modifier }}{% endif %}" id="jsOffCanvasNav">
  
  <div class="c-off-canvas-nav__list">
    {% include "@nav" with {
      modifier: "c-nav--off-canvas",
      context: "mobile"
    } %}
  </div>
  
  <div class="c-off-canvas-nav__body">
    <p class="c-off-canvas-nav__body-claim">{{'Il nostro pensare per fare bene'|t}}</p>
    <ul class="c-off-canvas-nav__secondary-nav">
      {% for item in secondary_nav %}
        {% if not (craft.app.language == 'en' and item.engDisabled is defined) %}
        <li class="c-off-canvas-nav__secondary-nav-item">
          <a href="{{ siteUrl }}{{ item.url }}">{{ item.text }}</a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
  {% if languageSwitcher %}
  <div class="c-off-canvas-nav__language">{% include "@language-switcher" %}</div>
  {% endif %}

</div>
 
{
  "imageUrl": "https://picsum.photos/1000/920"
}
  • Content: 
    .c-off-canvas-nav {
  display: none;
  position: absolute;
  z-index: $zIndex-off-canvas-nav;
  top: $mobile-header-height;
  left: 0;
  width: 100%;
  height: calc(100vh - $mobile-header-height);
  background-color: useHSL(--primary-100);
  overflow-y: auto;
  padding: spacing(space-16);

  @include min-screen($header-breakpoint) {
    display: none !important;
  }

}

.c-off-canvas-nav__body-claim {
  @include font-scale(level-2, $font-secondary, regular);
  color: useHSL(--base-100);
}

.c-off-canvas-nav__body {
  margin-top: spacing(space-40);
}

.c-off-canvas-nav__secondary-nav {
  margin-top: spacing(space-16);
  list-style: none;
}

.c-off-canvas-nav__secondary-nav-item {

  & + & {
    margin-top: spacing(space-8);
  }

}

.c-off-canvas-nav__secondary-nav a {
  @include font-scale(level-3, $font-secondary, bold);
  color: useHSL(--base-100);
  text-decoration: none;
}

.c-off-canvas-nav__language {
  margin-top: spacing(space-24);
}
  • URL: /components/raw/off-canvas-nav/_off-canvas-nav.scss
  • Filesystem Path: src/pattern-library/02-components/off-canvas-nav/_off-canvas-nav.scss
  • Size: 954 Bytes

No notes defined.