修改navbar

2024-10-28 07:59:01 +08:00 · 2024-10-28 07:59:01 +08:00 · d074d7a379
commit d074d7a379
parent 165ec980b9
7 changed files with 55 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
 <head>
    <meta charset="UTF-8"/>
-    <link href="/vite.svg" rel="icon" type="image/svg+xml"/>
+    <link href="/logo-c.png" rel="icon" type="image/png"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>CANTYONION.SITE</title>
 </head>
--- a/public/logo-c.png
+++ b/public/logo-c.png
--- a/src/assets/logo-c.png
+++ b/src/assets/logo-c.png
--- a/src/assets/logo-w.png
+++ b/src/assets/logo-w.png
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@ -1,5 +1,8 @@
 <script lang="ts" setup>

+import {getAssetURL} from "@/utils/function.ts";
+import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
+
 type Widget = {
  icon: string[]
  url: string
@ -23,19 +26,38 @@ const littleWidget: Widget[] = [
    title: "Git Repository"
  }
 ]
+const logoUrl = getAssetURL("logo-c.png")
 </script>

 <template>
  <nav
      class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md"
  >
-    <div class="container mx-auto flex w-full items-center justify-center sm:justify-between">
+    <div
+        class="container mx-auto flex w-full max-w-screen-xl items-center justify-center overflow-hidden sm:justify-between">
      <!--  Logo  -->
-      <div class="h-full text-4xl min-w-16 logo py-3.5">
-        <span>CantyOni_on's Index</span>
+      <!--      <div class="h-full text-4xl min-w-16 logo py-3.5">-->
+      <!--        <span>CantyOni_on's Index</span>-->
+
+      <!--      </div>-->
+      <div class="py-2">
+        <img :src="logoUrl" alt="" class="h-12 w-12"/>
      </div>
      <!--  Entry  -->
-      <!--      <div class="flex-1"></div>-->
+      <div class="flex">
+        <nav-bar-entry-item/>
+        <nav-bar-entry-item/>
+        <nav-bar-entry-item/>
+        <nav-bar-entry-item/>
+        <nav-bar-entry-item/>
+        <!--        <div class="container">-->
+        <!--          <div-->
+        <!--              class="flex h-16 w-8 items-center overflow-hidden transition-all duration-300 w-max-20 text-nowrap hover:w-full">-->
+        <!--            <font-awesome-icon :icon="['fas', 'book']"/>-->
+        <!--            <span class="ml-1 text-xl">文章</span>-->
+        <!--          </div>-->
+        <!--        </div>-->
+      </div>
      <!--  快速跳转小组件  -->
      <div class="hidden items-center justify-between gap-4 text-xl sm:flex">
        <a v-for="item in littleWidget"
--- a/src/components/nav/NavBarEntryItem.vue
+++ b/src/components/nav/NavBarEntryItem.vue
@ -0,0 +1,24 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="container relative w-16 max-w-max flex-auto shrink-0 cursor-pointer
+              group hover:w-full hover:bg-gray-200">
+    <div class="flex h-16 items-center pr-4 pl-2">
+      <font-awesome-icon :icon="['fas', 'house']" class="mx-2 h-8 w-8"/>
+      <span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-500
+                   text-nowrap group-hover:w-full">
+        主页
+      </span>
+    </div>
+    <div
+        class="invisible h-20 absolute top-full w-20 bg-pink-400 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@ -14,13 +14,14 @@ import {
  faCloud,
  faChevronRight,
  faCodeCommit,
-  faCode
+  faCode,
+  faHouse
 } from '@fortawesome/free-solid-svg-icons'
 import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'

 library.add(
  faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
-  faCodeCommit, faCode
+  faCodeCommit, faCode, faHouse
 )

 createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')