17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Overhauled the navigation system to resolve a bunch of bugs and weird behaviours.

Browse Source
This commit is contained in:
ajdj100
2024-05-02 01:07:39 -04:00
parent 5d688f725b
commit f72c1db5b1
2 changed files with 57 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
17th Website/src/components/navigation/Navbar.vue
View File

@@ -1,20 +1,10 @@
<script>
import navitem from './navitem.vue'
import { RouterLink, routerKey } from 'vue-router';
import { Icon } from '@iconify/vue'
export default {
components: {
navitem
},
data() {
return {
activeButton: ''
}
},
methods: {
setActive(btn) {
this.activeButton = btn
}
Icon
}
}
@@ -23,13 +13,43 @@ export default {
<template>
<div class="sidebar">
<!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
<navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
<RouterLink to="/profile" style="padding: 30px;">
<div>
<Icon icon="carbon:user" style="font-size: 35px;" />
</div>
</RouterLink>
<hr class="text-white">
<navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
<navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
<navitem icon="carbon:align-box-bottom-left" link="/forms" @click="setActive('#docs')" :active="activeButton === '#docs'"/>
<navitem icon="carbon:tool-kit" link="#" @click="setActive('#tools')" :active="activeButton === '#tools'"/>
<!-- home -->
<RouterLink to="/" style="padding: 30px;">
<div>
<Icon icon="carbon:home" style="font-size: 35px;" />
</div>
</RouterLink>
<!-- users -->
<RouterLink to="/users" style="padding: 30px;">
<div>
<Icon icon="carbon:events" style="font-size: 35px;" />
</div>
</RouterLink>
<!-- forms -->
<RouterLink to="/forms" style="padding: 30px;">
<div>
<Icon icon="carbon:align-box-bottom-left" style="font-size: 35px;" />
</div>
</RouterLink>
<!-- forms -->
<RouterLink to="/test" style="padding: 30px;">
<div>
<Icon icon="carbon:tool-kit" style="font-size: 35px;" />
</div>
</RouterLink>
</div>
</template>
@@ -50,6 +70,19 @@ https://icon-sets.iconify.design/carbon/
USING THE IBM CARBON ICON SET
*/
.button {
color: var(--white);
font-size: 35px;
/* overflow: hidden; */
/* height: 40px; */
display: flex;
align-items: center;
justify-content: center;
/* margin: 10px; */
padding: 10px;
transition: color 0.2s ease-in-out;
}
.sidebar {
position: fixed;
left: 0;
@@ -90,4 +123,9 @@ USING THE IBM CARBON ICON SET
display: flex;
flex-direction: row;
}
.router-link-active {
outline: 2px solid var(--accent-primary);
border-radius: 10px;
}
</style>

66
17th Website/src/components/navigation/navitem.vue
View File

@@ -1,66 +0,0 @@
<!-- <script>
export const navitem = {
props: ['icon', 'link']
}
</script>
<script setup>
import { Icon } from '@iconify/vue'
</script> -->
<script>
import { Icon } from '@iconify/vue'
import { RouterLink } from 'vue-router';
export default {
name: 'navitem',
props: {
icon: String,
link: String,
active: Boolean
},
components: {
Icon,
RouterLink
}
}
</script>
<template>
<div class="aspect-square flex items-center place-content-center">
<RouterLink :to="link" class="button" :class="{ active: active }">
<Icon :icon="icon" />
</RouterLink>
</div>
</template>
<style scoped>
.button {
color: var(--white);
font-size: 35px;
/* overflow: hidden; */
/* height: 40px; */
display: flex;
align-items: center;
justify-content: center;
/* margin: 10px; */
padding: 10px;
transition: color 0.2s ease-in-out;
}
.button:hover {
color: var(--accent-primary);
}
.active {
border: 2px solid var(--accent-primary);
border-radius: 10px;
}
div {
padding: 10px;
}
</style>