First Commit

2026-03-30 20:15:26 +09:00
commit 5db6f08060
52 changed files with 9292 additions and 0 deletions
@@ -0,0 +1,133 @@
+<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>