New: configにoriginを追加 / Chg(Performance): /api以外の場合にトークンの認証をバイパス / New: server-infoエンドポイントにiconを追加 / New: setup/initializationでconfigテーブルにLynqChatロゴをiconとして追加する処理 / New: .content-main用の背景色を追加 / Chg: 背景色を変更 / Chg: .left-menuを更新

packages/frontend/src/Layout.vue

@@ -7,10 +7,14 @@
 
   <div class="modals-container" />
 
-  <main class="layout">
+  <main class="layout" v-if="serverInfo.success && account.success">
     <div class="left-menu">
-      <div>
-        ホーム
+      <div :class='$route.path === "/" ? "isActive" : ""'>
+        <img :src="serverInfo.icon" />
+      </div>
+
+      <div :class='$route.path === "/home" ? "isActive" : ""'>
+        <Icon icon="material-symbols:home-rounded" />
       </div>
     </div>
 
@@ -37,10 +41,10 @@
 <style scoped>
 main.layout {
   display: flex;
-  gap: 1rem;
   width: 100dvw;
   height: 100dvh;
-  padding: 1.5rem;
+  padding: 0.5rem;
+  gap: 0.5rem;
   box-sizing: border-box;
 }
 
@@ -48,39 +52,69 @@ main.layout {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  justify-content: center;
-  gap: 1rem;
+  padding: 0.5rem 0;
+  height: 100%;
+  overflow: scroll;
+  gap: 0.5rem;
+  box-sizing: border-box;
   user-select: none;
   -webkit-user-select: none;
 }
 
 .left-menu div {
-  width: 6rem;
-  text-align: center;
-  font-weight: bold;
-  font-size: 1.4rem;
-  border-radius: 2rem;
-  padding: 1rem 1.5rem;
-  transition: background-color 250ms ease-out;
+  position: relative;
+  z-index: 0;
+  border-radius: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0.5rem;
+  transition: background-color 200ms ease-out;
 }
 
-.left-menu div:hover {
+.left-menu div * {
+  font-size: 3rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+  display: block;
+  overflow: hidden;
+  object-fit: contain;
+  box-sizing: border-box;
+}
+
+.left-menu div.isActive::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 0.3rem;
+  transform: translateY(-50%);
+  width: 0.25rem;
+  height: 70%;
+  border-radius: 0.5rem;
+  background-color: var(--text-color);
+}
+
+.left-menu div:hover,
+.left-menu div.isActive {
   background-color: var(--border-color);
 }
 
 .content-main {
   border: 1px solid var(--border-color);
-  border-radius: 1rem;
+  background-color: var(--route-bg-color);
+  border-radius: 0.5rem;
   overflow: hidden;
   flex-grow: 1;
 }
 
 .content-header {
-  padding: 1.25rem 1.5rem;
-  font-size: 1.6rem;
+  padding: 1rem 1.25rem;
+  font-size: 1.3rem;
   font-weight: bold;
-  border-bottom-left-radius: 1rem;
-  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
   border-bottom: 1px solid var(--border-color);
   box-shadow: 0px 1px 10px var(--border-color);
   user-select: none;
@@ -124,8 +158,9 @@ main.layout {
 <script lang="ts" setup>
 import { RouterView, useRouter } from "vue-router";
 import routerStatus from "@/lib/router";
+import { Icon } from "@iconify/vue";
 import Progress from "@/components/Progress.vue";
-import { serverInfo } from "@/lib/account";
+import { account, serverInfo } from "@/lib/account";
 
 const router = useRouter();