From f58428215dc3ad3c7f0dc3ab4d0a0c21775645b3 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sat, 7 May 2022 17:35:10 +0800
Subject: [PATCH] feat: add mobile bottom menu bar

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 index.html                   | 16 +++++----
 package.json                 |  2 ++
 pnpm-lock.yaml               | 31 +++++++++-------
 src/layouts/FilledLayout.vue | 70 ++++++++++++++++++++++++++++++++----
 src/router/menus.config.ts   | 28 +++++++++++++++
 src/views/users/Profile.vue  |  2 +-
 tailwind.config.js           |  1 +
 7 files changed, 123 insertions(+), 27 deletions(-)
diff --git a/index.html b/index.html
index e0c74c92..5ab7fdc9 100644
--- a/index.html
+++ b/index.html
@@ -2,20 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="renderer" content="webkit" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <meta content="webkit" name="renderer" />
     <meta
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
       name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
     />
-    <meta name="robots" content="noindex,nofollow" />
+    <meta content="noindex,nofollow" name="robots" />
     <title>Halo</title>
-    <link rel="icon" href="/favicon.ico" />
+    <link href="/favicon.ico" rel="icon" />
     <style>
       body {
         height: 100%;
         background-color: #f5f5f5;
       }
+
       #loader {
         position: absolute;
         top: 0;
@@ -30,6 +31,7 @@
         height: 30px;
         animation: spin 0.6s linear infinite;
       }
+
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -44,9 +46,9 @@
         JavaScript enabled. Please enable it to continue.
       </strong>
     </noscript>
-    <div id="app" class="h-screen">
+    <div id="app">
       <div id="loader"></div>
     </div>
-    <script type="module" src="/src/main.ts"></script>
+    <script src="/src/main.ts" type="module"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index b07fd79e..ffd4d950 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,9 @@
     "story:build": "histoire build"
   },
   "dependencies": {
+    "@vueuse/core": "^8.4.2",
     "pinia": "^2.0.13",
+    "tailwindcss-safe-area": "^0.2.2",
     "tippy.js": "^6.3.7",
     "vue": "^3.2.33",
     "vue-router": "^4.0.15"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bab4a518..447d1d20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,7 @@ specifiers:
   '@vue/eslint-config-typescript': ^10.0.0
   '@vue/test-utils': ^2.0.0-rc.21
   '@vue/tsconfig': ^0.1.3
+  '@vueuse/core': ^8.4.2
   autoprefixer: ^10.4.7
   c8: ^7.11.2
   cypress: ^9.6.0
@@ -27,6 +28,7 @@ specifiers:
   sass: ^1.51.0
   start-server-and-test: ^1.14.0
   tailwindcss: ^3.0.24
+  tailwindcss-safe-area: ^0.2.2
   tailwindcss-themeable: ^1.3.0
   tippy.js: ^6.3.7
   typescript: ~4.6.4
@@ -39,7 +41,9 @@ specifiers:
   vue-tsc: ^0.34.11
 
 dependencies:
+  '@vueuse/core': 8.4.2_vue@3.2.33
   pinia: 2.0.13_typescript@4.6.4+vue@3.2.33
+  tailwindcss-safe-area: 0.2.2
   tippy.js: 6.3.7
   vue: 3.2.33
   vue-router: 4.0.15_vue@3.2.33
@@ -499,7 +503,7 @@ packages:
     resolution: {integrity: sha512-4+yTBlUaIiVBe6jVoDB90bfyUUaNANDqFRPpURPPibZQ715zoTo9QGxemZun1etKGG2ZYH92d0pOmnGKwa/rPQ==}
     dependencies:
       '@iconify/vue': 3.2.1_vue@3.2.33
-      '@vueuse/core': 8.2.5_vue@3.2.33
+      '@vueuse/core': 8.4.2_vue@3.2.33
       floating-vue: 2.0.0-beta.15_vue@3.2.33
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -1057,8 +1061,8 @@ packages:
       '@types/node': 17.0.31
     dev: true
 
-  /@vueuse/core/8.2.5_vue@3.2.33:
-    resolution: {integrity: sha512-5prZAA1Ji2ltwNUnzreu6WIXYqHYP/9U2BiY5mD/650VYLpVcwVlYznJDFcLCmEWI3o3Vd34oS1FUf+6Mh68GQ==}
+  /@vueuse/core/8.4.2_vue@3.2.33:
+    resolution: {integrity: sha512-dUVU96lii1ZdWoNJXauQNt+4QrHz1DKbuW+y6pDR2N10q7rGZJMDU7pQeMcC2XeosX7kMODfaBuqsF03NozzLg==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -1068,18 +1072,16 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@vueuse/metadata': 8.2.5
-      '@vueuse/shared': 8.2.5_vue@3.2.33
+      '@vueuse/metadata': 8.4.2
+      '@vueuse/shared': 8.4.2_vue@3.2.33
       vue: 3.2.33
       vue-demi: 0.12.1_vue@3.2.33
-    dev: true
 
-  /@vueuse/metadata/8.2.5:
-    resolution: {integrity: sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA==}
-    dev: true
+  /@vueuse/metadata/8.4.2:
+    resolution: {integrity: sha512-2BIj++7P0/I5dfMsEe8q7Kw0HqVAjVcyNOd9+G22/ILUC9TVLTeYOuJ1kwa1Gpr+0LWKHc6GqHiLWNL33+exoQ==}
 
-  /@vueuse/shared/8.2.5_vue@3.2.33:
-    resolution: {integrity: sha512-lNWo+7sk6JCuOj4AiYM+6HZ6fq4xAuVq1sVckMQKgfCJZpZRe4i8es+ZULO5bYTKP+VrOCtqrLR2GzEfrbr3YQ==}
+  /@vueuse/shared/8.4.2_vue@3.2.33:
+    resolution: {integrity: sha512-hILXMEjL8YQhj1LHN/HZ49UThyfk8irTjhele2nW+L3N55ElFUBGB/f4w0rg8EW+/suhqv7kJJPTZzvHCqxlIw==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -1091,7 +1093,6 @@ packages:
     dependencies:
       vue: 3.2.33
       vue-demi: 0.12.1_vue@3.2.33
-    dev: true
 
   /abab/2.0.5:
     resolution: {integrity: sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==}
@@ -2758,7 +2759,7 @@ packages:
       '@histoire/controls': 0.2.5_vue@3.2.33
       '@iconify/vue': 3.2.1_vue@3.2.33
       '@vitejs/plugin-vue': 2.3.1_vite@2.9.7+vue@3.2.33
-      '@vueuse/core': 8.2.5_vue@3.2.33
+      '@vueuse/core': 8.4.2_vue@3.2.33
       birpc: 0.1.1
       case: 1.6.3
       chokidar: 3.5.3
@@ -4108,6 +4109,10 @@ packages:
       get-port: 3.2.0
     dev: true
 
+  /tailwindcss-safe-area/0.2.2:
+    resolution: {integrity: sha512-sygGuEFFBBzjqR6d2gB9hDW9xX/4yLt7ymhR2E/XVa6Ar4B86Net8/9EmPAsqFUvXY40+W0HnXwFavFJEM+eCQ==}
+    dev: false
+
   /tailwindcss-themeable/1.3.0:
     resolution: {integrity: sha512-AmZrk3yAZaJqfrbGast24KrFDtD21rwil05xuqNMFPWTswCHyFugetPk9vy1X+KD4ZTAFWZwW2ULov6VUeK/1A==}
     dev: true
diff --git a/src/layouts/FilledLayout.vue b/src/layouts/FilledLayout.vue
index c874b635..a29c575f 100644
--- a/src/layouts/FilledLayout.vue
+++ b/src/layouts/FilledLayout.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex h-full">
-    <aside class="navbar fixed h-full overflow-y-auto" style="background: #fff">
+    <aside
+      class="hidden md:block navbar fixed h-full overflow-y-auto"
+      style="background: #fff"
+    >
       <div class="logo flex justify-center py-5">
         <img :src="logo" alt="Halo Logo" style="width: 78px" />
       </div>
@@ -27,23 +30,77 @@
         </div>
       </div>
     </aside>
-    <main class="content w-full overflow-y-auto">
+    <main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0">
       <slot />
     </main>
+
+    <!--bottom nav bar-->
+    <div
+      class="md:hidden bottom-nav-bar grid grid-cols-6 fixed left-0 bottom-0 right-0 border-t-2 border-black drop-shadow-2xl pb-safe mt-safe"
+      style="background: #0e1731"
+    >
+      <div
+        v-for="(menu, index) in minimenus"
+        :key="index"
+        :class="{ 'bg-black': route.path === menu.path }"
+        class="nav-item"
+        @click="router.push(menu.path)"
+      >
+        <div
+          class="p-1 w-full cursor-pointer flex items-center justify-center text-white"
+        >
+          <div
+            class="w-10 h-10 flex flex-col justify-center items-center is-active is-active0"
+          >
+            <div class="text-base">
+              <Component :is="menu.icon" />
+            </div>
+            <div class="text-xs mt-0.5">
+              {{ menu.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="nav-item" @click="moreMenuVisible = true">
+        <div
+          class="p-1 w-full cursor-pointer flex items-center justify-center text-white"
+        >
+          <div
+            class="w-10 h-10 flex flex-col justify-center items-center is-active is-active0"
+          >
+            <div class="text-base">
+              <IconMore />
+            </div>
+            <div class="text-xs mt-0.5">更多</div>
+          </div>
+        </div>
+      </div>
+      <VModal v-model:visible="moreMenuVisible" title="菜单">
+        <VRoutesMenu :menus="menus" class="p-0" />
+      </VModal>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { VRoutesMenu } from "@/components/base/menu";
 import { VTag } from "@/components/base/tag";
-import { menus } from "@/router/menus.config";
+import { VModal } from "@/components/base/modal";
+import { menus, minimenus } from "@/router/menus.config";
 import logo from "@/assets/logo.svg";
 import { IconMore, IconUserSettings } from "@/core/icons";
+import { useRoute, useRouter } from "vue-router";
+import { ref } from "vue";
+
+const route = useRoute();
+const router = useRouter();
+
+const moreMenuVisible = ref(false);
 </script>
 
 <style lang="scss">
 .navbar {
-  width: 270px;
+  @apply w-64;
   z-index: 999;
   box-shadow: 0 4px 4px #f6c6ce;
   padding-bottom: 70px;
@@ -53,9 +110,9 @@ import { IconMore, IconUserSettings } from "@/core/icons";
     position: fixed;
     left: 0;
     bottom: 0;
-    width: 270px;
     height: 70px;
     display: flex;
+    @apply w-64;
     @apply p-3;
 
     .profile-avatar {
@@ -76,7 +133,8 @@ import { IconMore, IconUserSettings } from "@/core/icons";
 }
 
 .content {
-  margin-left: 270px;
+  @apply ml-0;
+  @apply md:ml-64;
   display: flex;
   flex: auto;
   flex-direction: column;
diff --git a/src/router/menus.config.ts b/src/router/menus.config.ts
index ae8356ba..78cde49f 100644
--- a/src/router/menus.config.ts
+++ b/src/router/menus.config.ts
@@ -103,6 +103,34 @@ export const menus: MenuGroupType[] = [
   },
 ];
 
+export const minimenus: MenuItemType[] = [
+  {
+    name: "仪表盘",
+    path: "/",
+    icon: IconDashboard,
+  },
+  {
+    name: "文章",
+    path: "/posts",
+    icon: IconBookRead,
+  },
+  {
+    name: "评论",
+    path: "/comment",
+    icon: IconMessage,
+  },
+  {
+    name: "附件",
+    path: "/attachment",
+    icon: IconFolder,
+  },
+  {
+    name: "用户",
+    path: "/users",
+    icon: IconUserSettings,
+  },
+];
+
 export type { MenuItemType, MenuGroupType };
 
 export default menus;
diff --git a/src/views/users/Profile.vue b/src/views/users/Profile.vue
index e1dfc373..589eb2b3 100644
--- a/src/views/users/Profile.vue
+++ b/src/views/users/Profile.vue
@@ -2,7 +2,7 @@
   <FilledLayout>
     <header class="bg-white">
       <div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></div>
-      <div class="mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="px-4 sm:px-6 lg:px-8">
         <div class="-mt-12 sm:-mt-16 flex items-end space-x-5">
           <div class="flex">
             <img
diff --git a/tailwind.config.js b/tailwind.config.js
index 480d8dc5..934a52ec 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    require("tailwindcss-safe-area"),
     themeable({
       defaultTheme: "default",
       themes: [
