Add new components for login and comment functionality

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>