SchnitzelRally

Navigation is used to bundle all basic actions of the app to one point. It should be clearly visible to the user on every page and some actions should also be familiar to them, e.g. click on logo to navigate to the home screen.

<nav class="nav"> 
    <ul class="nav__header">
        <li class="header__left">
            <p class="header__title"> Route: MyFirstRoute </p>
        </li>
        <li class="header__right">
            <div class="sidebar__trigger">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </li>
    </ul>
</nav>

This is what the normal navigation looks like.

<nav class="nav"> 
    <ul class="nav__header">
        <li class="header__left">
            <a href="/" class="logo__link" alt="Logo" >
            <img src="{{ site.baseurl }}/styleguide/branding/logo.png" alt="SchnitzelRally Logo" />
            </a>
        </li>
        <li class="header__right">
            <a href="#">Login</a> 
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
            <path id="Icon_awesome-user-alt" data-name="Icon awesome-user-alt" d="M15,16.875A8.438,8.438,0,1,0,6.563,8.438,8.44,8.44,0,0,0,15,16.875Zm7.5,1.875H19.271a10.2,10.2,0,0,1-8.543,0H7.5A7.5,7.5,0,0,0,0,26.25v.938A2.813,2.813,0,0,0,2.813,30H27.188A2.813,2.813,0,0,0,30,27.188V26.25A7.5,7.5,0,0,0,22.5,18.75Z" fill="#fff"/>
            </svg>

            <div class="sidebar__trigger sidebar__trigger--hidden">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </li>
    </ul>
</nav>

This navigation is used on the start screen, where also our logo is placed as back-link.

<nav class="nav"> 
    <ul class="nav__header">
        <li class="header__left">
            <a href="#" class="back-arrow" alt="Logo" >
                <svg xmlns="http://www.w3.org/2000/svg" width="18.914" height="35.828" viewBox="0 0 18.914 35.828">
                    <path id="chevron-left" d="M25.5,39,9,22.5,25.5,6" transform="translate(-8 -4.586)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
                </svg>

            </a>
            <p class="header__title"> Edit Player </p>
        </li>
        <li class="header__right">
            <div class="sidebar__trigger">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </li>
    </ul>
</nav>

In this navigation the user is able to go back to the page where he came from.