From 42c361c785a4cf0de177aee7c2eb9511144b301e Mon Sep 17 00:00:00 2001
From: tomoyahiroe <tomoya4creative@gmail.com>
Date: Wed, 13 Mar 2024 21:52:52 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20BottomAppBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/BottomAppBar.vue | 72 ++++++++++++++++++++++++++++++++++++++++
 layouts/default.vue      |  6 ++--
 nuxt.config.ts           |  3 +-
 3 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 layouts/BottomAppBar.vue

diff --git a/layouts/BottomAppBar.vue b/layouts/BottomAppBar.vue
new file mode 100644
index 0000000..5a339a4
--- /dev/null
+++ b/layouts/BottomAppBar.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div
+    id="bottom-app-bar"
+    class="flex util-color-bg-sub justify-content-around absolute bottom-0 w-screen h-4rem align-items-center z-5"
+    ontouchstart=""
+  >
+    <NuxtLink
+      to="/"
+      class="link-icon block util-color-text flex flex-column justify-content-center align-items-center"
+      active-class="active-icon"
+    >
+      <i class="pi pi-home text-2xl"></i>
+      <p class="text-sm">Home</p>
+    </NuxtLink>
+    <NuxtLink
+      to="/forms"
+      class="link-icon block util-color-text flex flex-column justify-content-center align-items-center"
+      active-class="active-icon"
+    >
+      <i class="pi pi-list text-2xl"></i>
+      <p class="text-sm">Forms</p>
+    </NuxtLink>
+    <NuxtLink
+      to="/news"
+      class="link-icon block util-color-text flex flex-column justify-content-center align-items-center"
+      active-class="active-icon"
+    >
+      <i class="pi pi-envelope text-2xl"></i>
+      <p class="text-sm">News</p>
+    </NuxtLink>
+    <NuxtLink
+      to="/settings"
+      class="link-icon block util-color-text flex flex-column justify-content-center align-items-center"
+      active-class="active-icon"
+    >
+      <i class="pi pi-cog text-2xl"></i>
+      <p class="text-sm">Settings</p>
+    </NuxtLink>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '~/assets/scss/colors' as colors;
+.active-icon {
+  color: colors.$primary;
+}
+.link-icon {
+  width: 3.6rem;
+  height: 3.6rem;
+  border-radius: 10%;
+  padding: 0.5rem;
+  -webkit-tap-highlight-color: colors.$main-background;
+}
+@media (any-hover: hover) {
+  .link-icon {
+    transition: background-color 0.2s;
+  }
+  .link-icon:hover {
+    background-color: colors.$main-background;
+  }
+}
+.link-icon:active {
+  background-color: colors.$main-background;
+}
+@media screen and (min-width: 1024px) {
+  #bottom-app-bar {
+    display: none !important;
+  }
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index dc7988a..94f1adb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AppSidebar from './AppSidebar.vue'
+import BottomAppBar from './BottomAppBar.vue'
 
 useHead({
   title: 'Top',
@@ -7,11 +8,12 @@ useHead({
 })
 </script>
 <template>
-  <div id="dashboard-root-frame">
+  <div id="dashboard-root-frame" class="util-color-bg-main">
     <AppSidebar />
     <div id="dashboard-root-content">
       <slot />
     </div>
+    <BottomAppBar />
   </div>
 </template>
 <style lang="scss" scoped>
@@ -19,7 +21,7 @@ useHead({
   display: flex;
   flex-direction: row;
   width: 100vw;
-  height: 100svh;
+  min-height: 100svh;
 }
 
 #dashboard-root-content {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 413fbe1..01ee89c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,7 +7,8 @@ export default defineNuxtConfig({
       meta: [
         { name: 'description', content: '' },
         { name: 'viewport', content: 'width=device-width' },
-        { name: 'format-detection', content: 'telephone=no' }
+        { name: 'format-detection', content: 'telephone=no' },
+        { name: 'theme-color', content: '#f5f6f4' }
       ],
 
       link: [