Refactor the client to implement a channel navbar #76
2 changed files with 18 additions and 3 deletions
|
@ -9,11 +9,9 @@
|
||||||
<div id="navbar-middle">
|
<div id="navbar-middle">
|
||||||
<NuxtImg v-if="props.contextIcon"
|
<NuxtImg v-if="props.contextIcon"
|
||||||
class="context-icon"
|
class="context-icon"
|
||||||
:alt="props.contextName"
|
|
||||||
:src="props.contextIcon" />
|
:src="props.contextIcon" />
|
||||||
<DefaultIcon v-else-if="props.contextName && props.guildUuid"
|
<DefaultIcon v-else-if="props.contextName && props.guildUuid"
|
||||||
class="context-icon"
|
class="context-icon"
|
||||||
:alt="props.contextName"
|
|
||||||
:name="props.contextName" :seed="props.guildUuid"/>
|
:name="props.contextName" :seed="props.guildUuid"/>
|
||||||
|
|
||||||
<div class="context-title">
|
<div class="context-title">
|
||||||
|
@ -97,7 +95,7 @@ const props = defineProps<NavbarInterface>();
|
||||||
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: calc(var(--navbar-height) * .5);
|
font-size: calc(var(--navbar-height) * .5);
|
||||||
line-height: calc(var(--navbar-height) * .9);
|
line-height: var(--navbar-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
|
|
|
@ -23,16 +23,33 @@ import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
|
||||||
import Button from '~/components/UserInterface/Button.vue';
|
import Button from '~/components/UserInterface/Button.vue';
|
||||||
import AddFriend from '~/components/Me/AddFriend.vue';
|
import AddFriend from '~/components/Me/AddFriend.vue';
|
||||||
import FriendsList from '~/components/Me/FriendsList.vue';
|
import FriendsList from '~/components/Me/FriendsList.vue';
|
||||||
|
import type { NavbarInterface } from '~/types/interfaces';
|
||||||
|
|
||||||
const { fetchFriends } = useApi();
|
const { fetchFriends } = useApi();
|
||||||
|
|
||||||
let filter = ref("all");
|
let filter = ref("all");
|
||||||
|
const navbar = useState<NavbarInterface>("navbar")
|
||||||
|
|
||||||
const friends = await fetchFriends()
|
const friends = await fetchFriends()
|
||||||
|
|
||||||
function updateFilter(newFilter: string) {
|
function updateFilter(newFilter: string) {
|
||||||
filter.value = newFilter;
|
filter.value = newFilter;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
updateNavbar()
|
||||||
|
})
|
||||||
|
|
||||||
|
onActivated(async () => {
|
||||||
|
updateNavbar()
|
||||||
|
})
|
||||||
|
|
||||||
|
function updateNavbar() {
|
||||||
|
const runtimeConfig = useRuntimeConfig();
|
||||||
|
navbar.value.channelItems = []
|
||||||
|
navbar.value.contextName = "Direct Messages"
|
||||||
|
navbar.value.contextIcon = `${runtimeConfig.app.baseURL}/icon.svg`
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style module>
|
<style module>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue