<input type="checkbox" id="menu-trigger">
<div id="off-screen-menu">
<nav id="main-nav">
<ul class="flat-list">
<li>
<a href="../preview/dashboard.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dashboard" />
</svg>
Dashboard
</a>
</li>
<li>
<a href="../preview/account-settings.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#settings" />
</svg>
Account settings
</a>
</li>
<li>
<a href="../preview/suppliers.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#package" />
</svg>
Suppliers
</a>
</li>
<li>
<a href="../preview/new-wine.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#upload" />
</svg>
Add wines
</a>
</li>
<li>
<a href="../preview/my-wine-cellar.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#view-list" />
</svg>
My wine cellar
</a>
</li>
<li>
<a href="../preview/wine-cellar-inventory.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inventory" />
</svg>
Wine cellar inventory
</a>
</li>
<li>
<a href="../preview/add-dishes.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dish" />
</svg>
Dishes
</a>
</li>
<li>
<a href="../preview/orders.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-check" />
</svg>
Orders
</a>
</li>
<li>
<a href="../preview/digital-sommelier.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#sommelier" />
</svg>
Digital Sommelier
</a>
</li>
<li>
<a href="../preview/login.html" class="logout">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logout" />
</svg>
Log out
</a>
</li>
</ul>
</nav>
<div class="lang-selector">
<label for="lang-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-gb" />
</svg>
English
</label>
<input type="checkbox" id="lang-trigger">
<ul class="flat-list lang-list">
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-se" />
</svg>
Svenska
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-no" />
</svg>
Norsk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-dk" />
</svg>
Dansk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-de" />
</svg>
Deutsch
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-fr" />
</svg>
Français
</a>
</li>
</ul>
</div>
</div>
<input type="checkbox" id="menu-trigger">
<div id="off-screen-menu">
{{ render '@main-nav' }}
{{ render '@lang-selector' }}
</div>
/* No context defined. */
/**
* Off-screen menu
*
* Positioned off-screen by default
*/
@media screen {
#off-screen-menu {
margin-top: 0;
position: fixed;
top: 0;
right: 0;
transform: translateX(var(--nav-width));
width: var(--nav-width);
height: 100vh;
padding: 1rem 0.75rem;
color: var(--white);
background-color: var(--dark-grey);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23282828' fill-opacity='0.36' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
color: var(--text-inverted);
box-shadow: inset 10px 0px 10px -10px hsla(0, 0%, 0%, 0.9);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
No notes defined.