Phoenix Reisen Styleguide

650.20 #permalink Header Topbar

Toggle example guides Toggle HTML markup

Module: Mithril | React

Die Leiste ist hier aus Anpassungsgründen durch Inline-Styles static positioniert (die vor Benutzung natürlich zu entfernen sind). Ansonsten liegt sie fixed am oberen Browserrand (sticky) und erstreckt sich über die ganze Breite.

Markup
<article class="top-bar noprint top-bar--visible" style="position:static">
    <div class="wrapper wrapper--large">
        <div class="top-bar__left">
            <a href="https://phoenixreisen.com" title="zurück" class="top-bar__back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <a href="https://phoenixreisen.com" title="zur Startseite">
                <img src="https://phoenixreisen.com/favicon.png" class="top-bar__icon" alt="" />
                <span class="ml1">Phoenix Reisen App</span>
            </a>
        </div>
        <article class="top-bar__avatar">
            <a href="#" class="avatar-cta avatar-cta--topbar" title="Buchungsdaten anzeigen">
                <i class="fas fa-user avatar__symbol"></i>
            </a>
        </article>
        <article class="top-bar__nav-btn noprint">
          <a href="#" class="nav-btn" title="Navigation ein-/ausblenden">
              <i class="fas fa-bars"></i>
          </a>
        </article>
    </div>
</article>
Source: src/components/_layout.scss, line 137