Add new components for login and comment functionality

layout/kl-menus/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="kl-menu">
+    <el-scrollbar height="100%">
+      <el-menu class="el-menu-vertical" :default-active="activeRouteComputed" router>
+        <KlMenuItem
+          v-for="menu in childRoutes"
+          :key="menu?.component?.toString()"
+          :title="menu?.meta?.title + ''"
+          :children="menu.children"
+          :index="menu.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import KlMenuItem from './kl-menu-item.vue'
+  import { RouteRecordRaw, useRoute } from 'vue-router'
+  import { computed } from 'vue'
+
+  const modulesFiles = import.meta.globEager('@/router/modules/*.ts')
+  const childRoutes: RouteRecordRaw[] = []
+  Object.keys(modulesFiles).forEach((path: string) => {
+    const module = modulesFiles[path] as any
+    if (module?.default) {
+      childRoutes.push(...module.default)
+    }
+  }, {})
+
+  const route = useRoute()
+  const activeRouteComputed = computed(() => {
+    return route.path
+  })
+</script>
+
+<style lang="scss" scoped>
+  .kl-menu {
+    height: 100%;
+    ::v-deep(.el-scrollbar) {
+      .el-scrollbar__bar.is-vertical {
+        display: block !important;
+        .el-scrollbar__thumb {
+          width: 0px;
+          float: right;
+        }
+      }
+    }
+  }
+  .el-menu-vertical {
+    border: none;
+    .el-sub-menu__title,
+    .el-menu-item {
+      font-size: 15px;
+    }
+    .el-menu-item.is-active {
+      background-color: #ebf1ff;
+      border-right: 4px solid $color-primary;
+    }
+    .el-sub-menu {
+      .el-menu-item {
+        text-indent: 10px;
+      }
+    }
+  }
+</style>

layout/kl-menus/kl-menu-item.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-menu-item v-if="!props.children?.length" :index="props.index">
+    <template #title>
+      <span>{{ props.title }}</span>
+    </template>
+  </el-menu-item>
+  <el-sub-menu v-else-if="props.children.length" :index="props.index + props.title">
+    <template #title>
+      <span>{{ props.title }}</span>
+    </template>
+    <KlMenuItem v-for="menu in props.children" :key="menu.path" :title="menu.meta?.title || ''" :children="menu.children" :index="menu.path"></KlMenuItem>
+  </el-sub-menu>
+</template>
+
+<script lang="ts" setup>
+  import { PropType } from 'vue'
+  import { RouteRecordRaw } from 'vue-router'
+
+  const props = defineProps({
+    title: {
+      type: String as PropType<string>,
+      default: '',
+    },
+    children: {
+      type: Array as PropType<RouteRecordRaw[]>,
+      default: () => [],
+    },
+    index: {
+      type: String as PropType<string>,
+      default: '',
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep(.el-sub-menu) {
+    .el-menu-item {
+      display: flex;
+      span {
+        text-indent: 6px;
+        flex: 1;
+        position: relative;
+        z-index: 1;
+      }
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        background-color: #bcbfc5;
+        border-radius: 10px;
+        margin-left: -4px;
+        position: relative;
+        z-index: 2;
+      }
+    }
+  }
+</style>