From 5654a906e60974c3a6629cf39e700b17e0b585f9 Mon Sep 17 00:00:00 2001
From: Quentin Guillemin <quentin.guillemin@recia.fr>
Date: Fri, 29 Sep 2023 11:37:14 +0200
Subject: [PATCH] feat: mobile navigation

---
 .../src/components/BottomNavigation.vue       | 28 +++++++++++++++++++
 .../components/drawers/NavigationDrawer.vue   |  2 +-
 .../src/components/layouts/FilesLayout.vue    |  7 +++--
 src/main/webapp/src/views/HomeView.vue        |  2 ++
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/main/webapp/src/components/BottomNavigation.vue

diff --git a/src/main/webapp/src/components/BottomNavigation.vue b/src/main/webapp/src/components/BottomNavigation.vue
new file mode 100644
index 00000000..8d2856a5
--- /dev/null
+++ b/src/main/webapp/src/components/BottomNavigation.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useDisplay } from 'vuetify';
+
+const { mobile } = useDisplay();
+const { t } = useI18n();
+</script>
+
+<template>
+  <v-bottom-navigation v-if="mobile" grow color="primary" class="pa-2">
+    <v-btn :to="{ name: 'projects' }" rounded="xl">
+      <v-icon icon="fas fa-folder" />
+      {{ t('navigation.item.projects') }}
+    </v-btn>
+    <v-btn :to="{ name: 'favorites' }" rounded="xl">
+      <v-icon icon="fas fa-star" />
+      {{ t('navigation.item.favorites') }}
+    </v-btn>
+    <v-btn :to="{ name: 'shared' }" rounded="xl">
+      <v-icon icon="fas fa-share-nodes" />
+      {{ t('navigation.item.shared') }}
+    </v-btn>
+    <v-btn :to="{ name: 'public' }" rounded="xl">
+      <v-icon icon="fas fa-globe" />
+      {{ t('navigation.item.public') }}
+    </v-btn>
+  </v-bottom-navigation>
+</template>
diff --git a/src/main/webapp/src/components/drawers/NavigationDrawer.vue b/src/main/webapp/src/components/drawers/NavigationDrawer.vue
index ef5c1f31..193e246d 100644
--- a/src/main/webapp/src/components/drawers/NavigationDrawer.vue
+++ b/src/main/webapp/src/components/drawers/NavigationDrawer.vue
@@ -13,7 +13,7 @@ const { t } = useI18n();
   <v-navigation-drawer class="pa-2">
     <div class="d-flex flex-column h-100">
       <h1 class="text-center my-3">Collabsoft</h1>
-      <v-list>
+      <v-list color="primary">
         <v-list-item
           prepend-icon="fas fa-folder"
           :title="t('navigation.item.projects')"
diff --git a/src/main/webapp/src/components/layouts/FilesLayout.vue b/src/main/webapp/src/components/layouts/FilesLayout.vue
index f00d788e..cda57448 100644
--- a/src/main/webapp/src/components/layouts/FilesLayout.vue
+++ b/src/main/webapp/src/components/layouts/FilesLayout.vue
@@ -13,9 +13,10 @@ defineProps<{
       v-for="(file, index) in files"
       :key="index"
       :cols="12"
-      :md="6"
-      :lg="4"
-      :xxl="3"
+      :sm="6"
+      :md="4"
+      :lg="3"
+      :xxl="2"
       class="d-flex align-center pa-2"
     >
       <file-card :file="file" />
diff --git a/src/main/webapp/src/views/HomeView.vue b/src/main/webapp/src/views/HomeView.vue
index 0c5ba533..b5ae7f93 100644
--- a/src/main/webapp/src/views/HomeView.vue
+++ b/src/main/webapp/src/views/HomeView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BottomNavigation from '@/components/BottomNavigation.vue';
 import SettingsDialog from '@/components/dialogs/SettingsDialog.vue';
 import InformationDrawer from '@/components/drawers/InformationDrawer.vue';
 import NavigationDrawer from '@/components/drawers/NavigationDrawer.vue';
@@ -14,6 +15,7 @@ import NavigationDrawer from '@/components/drawers/NavigationDrawer.vue';
         </div>
       </v-container>
     </v-main>
+    <bottom-navigation />
     <information-drawer />
     <settings-dialog />
   </v-layout>