Chg: MikroORMのinfoログをLoggerでもINFOとして扱うように / Chg: MikroORMのdiscoveryログをLoggerでINFOとして扱うように / New: 左側メニューにtitle属性を追加 / Del: 最上位RouterViewのkey / Fix: .route-mainのflex-directionがcolumn出ない問題 / Fix: .route-mainの高さ指定がmin-heightである問題 / Feat: コミュニティのページでチャンネルが表示できるように / Feat: チャンネルページ

packages/frontend/src/Layout.vue

@@ -14,6 +14,7 @@
         :class='$route.path === "/"
           ? "isActive"
           : ""'
+        title="ホーム"
       >
         <img :src='"icon" in serverInfo
           ? serverInfo.icon
@@ -24,9 +25,10 @@
       <RouterLink
         v-for="community of communitys"
         :to="`/community/${community.id}`"
-        :class='$route.path === `/community/${community.id}`
+        :class='$route.path.startsWith(`/community/${community.id}`)
           ? "isActive"
           : ""'
+        :title="community.name"
       >
         <img
           v-if="community.icon"
@@ -50,10 +52,13 @@
         }}
       </div>
 
-      <div class="route-main">
-        <RouterView
-          :key="$route.fullPath"
-        />
+      <div
+        class="route-main"
+        :class='isFullRoute
+          ? "full-route"
+          : ""'
+      >
+        <RouterView />
       </div>
     </div>
   </main>
@@ -151,10 +156,16 @@ main.layout {
 
 .route-main {
   display: flex;
+  flex-direction: column;
   padding: 1.25rem;
   padding-bottom: 0;
   overflow: scroll;
-  min-height: 100%;
+  height: 100%;
+}
+
+.content-main .route-main.full-route {
+  padding: 0;
+  overflow: hidden;
 }
 
 .router-progress {
@@ -190,14 +201,24 @@ import routerStatus, { title } from "@/lib/router";
 import { Icon } from "@iconify/vue";
 import Progress from "@/components/Progress.vue";
 import { communitys, serverInfo } from "@/lib/account";
-import { onBeforeUnmount, onMounted, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
 import { createModal } from "@/lib/modal";
 import ErrorModal from "@/components/Modal/Error.vue";
 
 const router = useRouter();
 const route = useRoute();
 
-watch(route, () => {
+const isFullRoute = computed(() => route.meta.isFullRoute === true);
+
+watch(route, (to, from) => {
+  if (
+    to.matched[0]?.path === from.matched[0]?.path &&
+    from.meta.canReloadTitle === false
+  ) {
+    routerStatus.isLoad = false;
+    return false;
+  }
+  
   if (typeof route.meta.title === "string")
     title.value = route.meta.title;
 });