34 lines
1.5 KiB
HTML
34 lines
1.5 KiB
HTML
|
<template id="navigation-template">
|
||
|
|
<div class="nav-container">
|
||
|
|
<nav>
|
||
|
|
<a href="#" class="logo">OURWORLD</a>
|
||
|
|
<div class="nav-links">
|
||
|
|
<div class="nav-item" @click="toggleSubmenu('about')" @click.away="menuStates.about = false">
|
||
|
|
About
|
||
|
|
<div class="submenu" :class="{ 'active': menuStates.about }">
|
||
|
|
<a href="#our-story">Our Story</a>
|
||
|
|
<a href="#mission">Mission</a>
|
||
|
|
<a href="#team">Team</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item" @click="toggleSubmenu('work')" @click.away="menuStates.work = false">
|
||
|
|
Projects
|
||
|
|
<div class="submenu" :class="{ 'active': menuStates.work }">
|
||
|
|
<a href="#projects">Projects</a>
|
||
|
|
<a href="#case-studies">Case Studies</a>
|
||
|
|
<a href="#impact">Impact</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item" @click="toggleSubmenu('contact')" @click.away="menuStates.contact = false">
|
||
|
|
Contact
|
||
|
|
<div class="submenu" :class="{ 'active': menuStates.contact }">
|
||
|
|
<a href="#get-in-touch">Get in Touch</a>
|
||
|
|
<a href="#locations">Locations</a>
|
||
|
|
<a href="#careers">Join us.</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</template>
|