Merge branch 'develop' into tomoyahiroe/#61_enable-to-switch-orgs

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>

layouts/default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import AppSidebar from '~/layouts/AppSidebar.vue'
+import AppSidebar from './AppSidebar.vue'
+import BottomAppBar from './BottomAppBar.vue'
 
 useHead({
   title: 'Top',
@@ -8,19 +9,20 @@ useHead({
 const user = await useLogin().getCurrentUser()
 </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>
 #dashboard-root-frame {
   display: flex;
   flex-direction: row;
   width: 100vw;
-  height: 100svh;
+  min-height: 100svh;
 }
 
 #dashboard-root-content {

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: [