feat: mobile navigation

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>

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')"

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" />

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>