134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
:class='[
|
|
"large:flex!", "flex-col", "max-large:rounded-r-lg",
|
|
"max-large:hidden", "max-large:fixed", "max-large:z-9996",
|
|
"bg-(--bg-color)", "shrink-0", "items-center", "justify-center",
|
|
"max-large:px-4", "left-0", "right-auto",
|
|
"max-w-40", "max-large:max-w-55", "w-fit", "h-screen", "gap-3",
|
|
]'
|
|
id="menu"
|
|
>
|
|
<RouterLink
|
|
class="flex flex-col items-center gap-1 mb-2"
|
|
to="/about/server"
|
|
v-if="authState.isSignedIn"
|
|
>
|
|
<img
|
|
class="w-30 h-20 block rounded-lg object-cover"
|
|
:src="servericon()"
|
|
/>
|
|
|
|
<span class="text-(--text-color)/85">
|
|
{{ authState.hostname }}
|
|
</span>
|
|
</RouterLink>
|
|
|
|
<RouterLink
|
|
:class='[
|
|
"flex", "px-4", "py-2", "transition--all", "w-full",
|
|
"rounded-[50px]", "cursor-pointer", "lg-menu-content",
|
|
]'
|
|
v-for="content of contents"
|
|
:to="content.link"
|
|
>
|
|
<Icon
|
|
:icon="content.icon"
|
|
class="shrink-0 mr-1 my-auto w-6 h-6"
|
|
/>
|
|
|
|
<span
|
|
class="shrink-0 text-xl font-bold"
|
|
>
|
|
{{ content.title }}
|
|
</span>
|
|
</RouterLink>
|
|
|
|
<RouterLink
|
|
class="flex left-5 bottom-15 gap-2 lg-menu-account"
|
|
:to="`/@${authState.me.userid}`"
|
|
v-if="authState.isSignedIn"
|
|
>
|
|
<img
|
|
class="w-12 h-12 object-cover rounded-full"
|
|
:src="authState.me.user_icon"
|
|
/>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="flex gap-1">
|
|
<span class="font-bold">
|
|
{{ authState.me.username }}
|
|
</span>
|
|
<Icon
|
|
icon="material-symbols:robot-2-rounded"
|
|
class="w-4 h-4 shrink-0 m-auto opacity-70"
|
|
v-if="authState.me.isBot"
|
|
/>
|
|
<Icon
|
|
icon="material-symbols:admin-panel-settings-rounded"
|
|
class="w-4 h-4 shrink-0 m-auto text-(--accent)"
|
|
v-if="authState.me.isAdmin"
|
|
/>
|
|
</div>
|
|
<span class="text-(--text-color)/85">
|
|
@{{ authState.me.userid }}
|
|
</span>
|
|
</div>
|
|
</RouterLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.router-link-active.lg-menu-content,
|
|
.lg-menu-content:hover {
|
|
background-color: var(--accent);
|
|
color: var(--accent-in-text);
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts" setup>
|
|
import { authState } from "@/lib/account";
|
|
import { Icon } from "@iconify/vue";
|
|
import { RouterLink } from "vue-router";
|
|
|
|
const servericon = () => {
|
|
if (authState.isSignedIn) {
|
|
if (authState.serverinfo.server_info.server_icon) {
|
|
return authState.serverinfo.server_info.server_icon;
|
|
} else {
|
|
return `${authState.origin}/img/uwuzucolorlogo.svg`;
|
|
}
|
|
} else {
|
|
return "/error_image.svg";
|
|
}
|
|
}
|
|
|
|
const contents = [
|
|
{
|
|
title: "ホーム",
|
|
icon: "material-symbols:home-rounded",
|
|
link: "/",
|
|
},
|
|
{
|
|
title: "検索",
|
|
icon: "material-symbols:search-rounded",
|
|
link: "/search",
|
|
},
|
|
{
|
|
title: "通知",
|
|
icon: "material-symbols:notifications-rounded",
|
|
link: "/notifications",
|
|
},
|
|
{
|
|
title: "ブックマーク",
|
|
icon: "material-symbols:bookmark-rounded",
|
|
link: "/bookmarks",
|
|
},
|
|
{
|
|
title: "設定",
|
|
icon: "material-symbols:settings-rounded",
|
|
link: "/settings",
|
|
},
|
|
];
|
|
</script>
|