feat: add horizontal nav (#45)

* feat: add horizontal nav

* workflow: update linter.yml

* fix: update

* fix: update

* fix: update

* Rename Link.vue to link.vue

* Rename SidebarItem.vue to sidebarItem.vue

* Rename Logo.vue to logo.vue

* Rename AppMain.vue to appMain.vue

* Rename Navbar.vue to navbar.vue

* fix: update

* fix: update

* fix: update

* workflow: update linter.yml

* fix: update

* chore: update

* workflow: update

* fix: update

* fix: update

* fix: update

* perf: 外链功能实现方式改变

* style: update nav style

* perf: 优化国际化

* fix: update

* fix: update

src/layout/components/sidebar/logo.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import settings from "/@/settings";
+
+const props = defineProps({
+  collapse: Boolean
+});
+</script>
+
+<template>
+  <div class="sidebar-logo-container" :class="{ collapse: props.collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="props.collapse"
+        key="props.collapse"
+        :title="settings.title"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <i class="fa fa-optin-monster"></i>
+        <h1 class="sidebar-title">{{ settings.title }}</h1>
+      </router-link>
+      <router-link
+        v-else
+        key="expand"
+        :title="settings.title"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <i class="fa fa-optin-monster"></i>
+        <h1 class="sidebar-title">{{ settings.title }}</h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  text-align: center;
+  overflow: hidden;
+
+  .sidebar-logo-link {
+    height: 100%;
+
+    .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #1890ff;
+      font-weight: 600;
+      font-size: 20px;
+      margin-top: 16px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+    }
+
+    .fa-optin-monster {
+      font-size: 30px;
+      color: #1890ff;
+      margin-top: 5px;
+    }
+  }
+
+  .collapse {
+    .sidebar-logo {
+      margin-right: 0;
+    }
+  }
+}
+</style>