brian/activist
1
0
Fork 0
Code Activity Actions

Move navigation to a component.

Browse source
This commit is contained in:
Brian D 2024-11-22 19:18:45 -05:00
parent 2d8373d7d6
commit 65336c1baf
3 changed files with 53 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/App.vue
View file

@ -2,6 +2,7 @@
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import Navigation from "@/components/Navigation.vue";
import OverlayBadge from 'primevue/overlaybadge'; import OverlayBadge from 'primevue/overlaybadge';
const route = useRoute(); const route = useRoute();
@ -19,44 +20,7 @@ watch(() => route.meta, (newVal, oldVal) => {
<div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]"> <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
Designer Designer
</div> </div>
<nav class="mt-4"> <Navigation></Navigation>
<ul class="list-none p-4 m-0">
<li>
<RouterLink
class="nav-item"
to="/">
<i class="pi pi-home nav-icon" />
<span>Home</span>
</RouterLink>
</li>
<li>
<RouterLink class="nav-item" to="/sticker">
<i class="pi pi-image nav-icon" />
<span>Sticker</span>
</RouterLink>
</li>
<li>
<a class="nav-item">
<i class="pi pi-users nav-icon" />
<span>Team</span>
</a>
</li>
<li>
<a class="nav-item">
<i class="pi pi-calendar nav-icon" />
<span>Events</span>
</a>
</li>
<li>
<RouterLink
class="nav-item"
to="/about">
<i class="pi pi-info-circle nav-icon" />
<span>About</span>
</RouterLink>
</li>
</ul>
</nav>
<div class="mt-auto"> <div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-800" /> <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
<a class="m-4 nav-item"> <a class="m-4 nav-item">
@ -140,15 +104,6 @@ watch(() => route.meta, (newVal, oldVal) => {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.nav-icon {
@apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
}
.nav-item {
@apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
span {
@apply font-medium inline text-base lg:text-xs lg:block;
}
}
.title { .title {
font-size: 160%; font-size: 160%;
} }

51
src/components/Navigation.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<nav class="mt-4">
<ul class="list-none p-4 m-0">
<li>
<RouterLink
class="nav-item"
to="/">
<i class="pi pi-home nav-icon" />
<span>Home</span>
</RouterLink>
</li>
<li>
<RouterLink class="nav-item" to="/sticker">
<i class="pi pi-image nav-icon" />
<span>Sticker</span>
</RouterLink>
</li>
<li>
<a class="nav-item">
<i class="pi pi-users nav-icon" />
<span>Team</span>
</a>
</li>
<li>
<a class="nav-item">
<i class="pi pi-calendar nav-icon" />
<span>Events</span>
</a>
</li>
<li>
<RouterLink
class="nav-item"
to="/about">
<i class="pi pi-info-circle nav-icon" />
<span>About</span>
</RouterLink>
</li>
</ul>
</nav>
</template>
<style scoped>
.nav-icon {
@apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
}
.nav-item {
@apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
span {
@apply font-medium inline text-base lg:text-xs lg:block;
}
}
</style>

0
src/components/Sidebar.vue Normal file
View file