<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>
<nav id="main-nav">
<ul class="flat-list">
{{#each nav-items}}
<li>
<a href="{{ path url }}">
{{> @svg}}
{{label}}
</a>
</li>
{{/each}}
<li>
<a href="{{ path '/components/preview/login' }}" class="logout">
{{> @svg icon="logout"}}
Log out
</a>
</li>
</ul>
</nav>
{
"nav-items": [
{
"label": "Dashboard",
"icon": "dashboard",
"url": "/components/preview/dashboard"
},
{
"label": "Account settings",
"icon": "settings",
"url": "/components/preview/account-settings"
},
{
"label": "Suppliers",
"icon": "package",
"url": "/components/preview/suppliers"
},
{
"label": "Add wines",
"icon": "upload",
"url": "/components/preview/new-wine"
},
{
"label": "My wine cellar",
"icon": "view-list",
"url": "/components/preview/my-wine-cellar"
},
{
"label": "Wine cellar inventory",
"icon": "inventory",
"url": "/components/preview/wine-cellar-inventory"
},
{
"label": "Dishes",
"icon": "dish",
"url": "/components/preview/add-dishes"
},
{
"label": "Orders",
"icon": "clipboard-check",
"url": "/components/preview/orders"
},
{
"label": "Digital Sommelier",
"icon": "sommelier",
"url": "/components/preview/digital-sommelier"
}
]
}
/**
* Main navigation
*/
@media screen {
/* Navigation list items */
#main-nav li {
margin: 0;
}
/* Make sure that last nav item is not outside viewport on scroll */
#main-nav li:last-child::after {
content: "";
display: block;
height: 14vh;
}
/**
* Navigation links
*/
#main-nav a {
display: flex;
align-items: center;
color: inherit;
text-decoration: none;
font-size: 1.2em;
padding: 0.5em 0.5rem;
filter: drop-shadow(1px 1px 0px var(--body-text));
}
#main-nav a:hover,
#main-nav a:focus,
#main-nav a:active {
text-decoration: underline;
}
#main-nav .icon {
margin-right: 0.25em;
}
/* Log out */
#main-nav .logout {
border-top: 1px solid var(--dark-grey);
margin-top: 3rem;
}
}
Intended to be used inside @off-screen-menu. Forms the basis on the primary navigation for the entire site.