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>