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">
|
||||
<NuxtImg v-if="props.contextIcon"
|
||||
class="context-icon"
|
||||
:alt="props.contextName"
|
||||
:src="props.contextIcon" />
|
||||
<DefaultIcon v-else-if="props.contextName && props.guildUuid"
|
||||
class="context-icon"
|
||||
:alt="props.contextName"
|
||||
:name="props.contextName" :seed="props.guildUuid"/>
|
||||
|
||||
<div class="context-title">
|
||||
|
@ -97,7 +95,7 @@ const props = defineProps<NavbarInterface>();
|
|||
|
||||
font-weight: 500;
|
||||
font-size: calc(var(--navbar-height) * .5);
|
||||
line-height: calc(var(--navbar-height) * .9);
|
||||
line-height: var(--navbar-height);
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
|
|
|
@ -23,16 +23,33 @@ import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
|
|||
import Button from '~/components/UserInterface/Button.vue';
|
||||
import AddFriend from '~/components/Me/AddFriend.vue';
|
||||
import FriendsList from '~/components/Me/FriendsList.vue';
|
||||
import type { NavbarInterface } from '~/types/interfaces';
|
||||
|
||||
const { fetchFriends } = useApi();
|
||||
|
||||
let filter = ref("all");
|
||||
const navbar = useState<NavbarInterface>("navbar")
|
||||
|
||||
const friends = await fetchFriends()
|
||||
|
||||
function updateFilter(newFilter: string) {
|
||||
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>
|
||||
|
||||
<style module>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue