Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add real navbar links

Browse source
This commit is contained in:
Sam Carlton 2020-09-19 17:18:49 -05:00
parent 7d880ce097
commit 7ea83aac8d
1 changed files with 37 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

50
components/navbar.vue
View file

@ -51,17 +51,16 @@
</div> </div>
<div class="hidden md:ml-6 md:flex md:items-center"> <div class="hidden md:ml-6 md:flex md:items-center">
<a <a
href="#" v-for="(item, index) in items"
class="px-3 py-2 rounded-md text-sm font-medium leading-5 text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Dashboard</a> :key="index"
<a :href="item.url"
href="#" :class="[
class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Team</a> 'px-3 py-2 rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
<a ($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
href="#" ]"
class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Projects</a> >
<a {{ item.label }}
href="#" </a>
class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Calendar</a>
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
@ -125,7 +124,7 @@
Leaving: "transition ease-in duration-75" Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100" From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95" To: "transform opacity-0 scale-95"
--> -->
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"> <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div <div
class="py-1 rounded-md bg-white shadow-xs" class="py-1 rounded-md bg-white shadow-xs"
@ -155,7 +154,7 @@
Mobile menu, toggle classes based on menu state. Mobile menu, toggle classes based on menu state.
Menu open: "block", Menu closed: "hidden" Menu open: "block", Menu closed: "hidden"
--> -->
<div class="hidden md:hidden"> <div class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3"> <div class="px-2 pt-2 pb-3 sm:px-3">
<a <a
@ -205,3 +204,28 @@
</nav> </nav>
</template> </template>
<script>
export default {
props: {
items: {
type: Array,
default: () => ([
{
label: 'Home',
url: '/',
},
// {
// label: 'Categories',
// url: '/categories',
// },
// {
// label: 'Contact',
// url: '/contact',
// },
])
}
}
}
</script>