162 lines
4.3 KiB
Vue
162 lines
4.3 KiB
Vue
<template>
|
|
<v-navigation-drawer
|
|
v-model="drawerOpen"
|
|
color="grey-lighten-5"
|
|
width="320"
|
|
:rail="drawerMini"
|
|
:rail-width="58"
|
|
:order="0"
|
|
floating
|
|
@click="drawerMini = false"
|
|
>
|
|
<div class="flex flex-col h-full">
|
|
<v-toolbar
|
|
class="flex items-center justify-between px-[14px] border-opacity-15"
|
|
color="primary"
|
|
height="64"
|
|
:style="`padding-top: ${safeAreaTop}`"
|
|
>
|
|
<div class="flex items-center">
|
|
<img src="/favicon.png" alt="Logo" width="32" height="32" class="block" />
|
|
<div v-show="!drawerMini" class="ms-6 font-medium">Solar Network</div>
|
|
</div>
|
|
|
|
<v-spacer />
|
|
|
|
<div>
|
|
<v-btn
|
|
v-show="!drawerMini"
|
|
icon="mdi-arrow-collapse-left"
|
|
size="small"
|
|
variant="text"
|
|
@click.stop="drawerMini = true"
|
|
/>
|
|
</div>
|
|
</v-toolbar>
|
|
|
|
<div class="flex-grow-1">
|
|
<v-list density="compact" :opened="drawerMini ? [] : expanded"
|
|
@update:opened="(val) => expanded = val">
|
|
<channel-list />
|
|
<v-divider class="border-opacity-75 my-2" />
|
|
<realm-list />
|
|
</v-list>
|
|
</div>
|
|
|
|
<!-- User info -->
|
|
<v-list
|
|
class="border-opacity-15 h-[64px]"
|
|
style="border-top-width: thin"
|
|
:style="`margin-bottom: ${safeAreaBottom}`"
|
|
>
|
|
<v-list-item :subtitle="username" :title="nickname">
|
|
<template #prepend>
|
|
<v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
|
|
</template>
|
|
<template #append>
|
|
<v-menu v-if="id.userinfo.isLoggedIn">
|
|
<template #activator="{ props }">
|
|
<v-btn v-bind="props" icon="mdi-menu-down" size="small" variant="text" />
|
|
</template>
|
|
|
|
<v-list density="compact">
|
|
<v-list-item
|
|
title="Sign out"
|
|
prepend-icon="mdi-logout-variant"
|
|
@click="signout"
|
|
/>
|
|
<v-list-item
|
|
title="Solarpass"
|
|
prepend-icon="mdi-passport-biometric"
|
|
target="_blank"
|
|
:href="passportUrl"
|
|
/>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
<v-btn v-else icon="mdi-login-variant" size="small" variant="text" :to="{ name: 'auth.sign-in' }" />
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</v-navigation-drawer>
|
|
|
|
<v-app-bar height="64" color="primary" scroll-behavior="hide" :order="2" flat>
|
|
<div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
|
|
<v-app-bar-nav-icon variant="text" @click.stop="drawerOpen = !drawerOpen" />
|
|
|
|
<router-link :to="{ name: 'explore' }">
|
|
<h2 class="ml-2 text-lg font-500">Solian</h2>
|
|
</router-link>
|
|
|
|
<v-spacer />
|
|
|
|
<div v-if="id.userinfo.isLoggedIn">
|
|
<notification-list />
|
|
</div>
|
|
</div>
|
|
</v-app-bar>
|
|
|
|
<v-main id="main">
|
|
<router-view />
|
|
</v-main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from "vue"
|
|
import { useUserinfo, signout as signoutAccount } from "@/stores/userinfo"
|
|
import { useWellKnown } from "@/stores/wellKnown"
|
|
import { useUI } from "@/stores/ui"
|
|
import RealmList from "@/components/realms/RealmList.vue"
|
|
import NotificationList from "@/components/users/NotificationList.vue"
|
|
import ChannelList from "@/components/chat/channels/ChannelList.vue"
|
|
|
|
const ui = useUI()
|
|
const expanded = ref<string[]>(["channels"])
|
|
|
|
const safeAreaTop = computed(() => {
|
|
return `${ui.safeArea.top}px`
|
|
})
|
|
|
|
const safeAreaBottom = computed(() => {
|
|
return `${ui.safeArea.bottom}px`
|
|
})
|
|
|
|
const id = useUserinfo()
|
|
|
|
const username = computed(() => {
|
|
if (id.userinfo.isLoggedIn) {
|
|
return "@" + id.userinfo.data?.name
|
|
} else {
|
|
return "@vistor"
|
|
}
|
|
})
|
|
const nickname = computed(() => {
|
|
if (id.userinfo.isLoggedIn) {
|
|
return id.userinfo.data?.nick
|
|
} else {
|
|
return "Anonymous"
|
|
}
|
|
})
|
|
|
|
id.readProfiles()
|
|
|
|
const meta = useWellKnown()
|
|
|
|
const passportUrl = computed(() => {
|
|
return meta.wellKnown?.components?.identity
|
|
})
|
|
|
|
meta.readWellKnown()
|
|
|
|
const drawerOpen = ref(true)
|
|
const drawerMini = ref(false)
|
|
|
|
async function signout() {
|
|
signoutAccount().then(() => {
|
|
window.location.reload()
|
|
})
|
|
}
|
|
</script>
|
|
|