Remodel for Mobile

layouts/mobile.vue

@@ -1,79 +1,58 @@
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue"
 
-
-import MainNav from "~/components/MainNav.vue";
 import dayjs from "dayjs";
-import {useProfileStore} from "~/stores/profile.js";
-import {useCapacitor} from "../composables/useCapacitor.js";
 
-const dataStore = useDataStore()
-const profileStore = useProfileStore()
-const colorMode = useColorMode()
-const { isHelpSlideoverOpen } = useDashboard()
-const supabase = useSupabaseClient()
-const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
 
-//profileStore.initializeData((await supabase.auth.getUser()).data.user.id)
-
 const month = dayjs().format("MM")
 
-const actions = [
-  {
-    id: 'new-customer',
-    label: 'Kunde hinzufügen',
-    icon: 'i-heroicons-user-group',
-    to: "/customers/create" ,
-  },
-  {
-    id: 'new-vendor',
-    label: 'Lieferant hinzufügen',
-    icon: 'i-heroicons-truck',
-    to: "/vendors/create" ,
-  },
-  {
-    id: 'new-contact',
-    label: 'Ansprechpartner hinzufügen',
-    icon: 'i-heroicons-user-group',
-    to: "/contacts/create" ,
-  },
-  {
-    id: 'new-task',
-    label: 'Aufgabe hinzufügen',
-    icon: 'i-heroicons-rectangle-stack',
-    to: "/tasks/create" ,
-  },
-  {
-    id: 'new-plant',
-    label: 'Objekt hinzufügen',
-    icon: 'i-heroicons-clipboard-document',
-    to: "/plants/create" ,
-  },
-  {
-    id: 'new-product',
-    label: 'Artikel hinzufügen',
-    icon: 'i-heroicons-puzzle-piece',
-    to: "/products/create" ,
-  },
-  {
-    id: 'new-project',
-    label: 'Projekt hinzufügen',
-    icon: 'i-heroicons-clipboard-document-check',
-    to: "/projects/create" ,
+
+const hideNav = ref(false)
+let lastScrollY = 0
+let scrollElement = null
+let returnTimer = null
+
+const SHOW_DELAY = 1000 // 1 Sekunden
+
+function showNavAfterDelay() {
+  clearTimeout(returnTimer)
+  returnTimer = setTimeout(() => {
+    hideNav.value = false
+  }, SHOW_DELAY)
+}
+
+const handleScroll = () => {
+  const current = scrollElement.scrollTop
+
+  // Runter scrollen -> verstecken
+  if (current > lastScrollY + 10) {
+    hideNav.value = true
+    showNavAfterDelay()
   }
-]
 
+  // Hoch scrollen -> sofort zeigen
+  if (current < lastScrollY - 10) {
+    hideNav.value = false
+    clearTimeout(returnTimer)
+  }
+
+  lastScrollY = current
+}
+
+onMounted(() => {
+  scrollElement = document.querySelector('.mobile-scroll-area')
+  if (scrollElement) {
+    scrollElement.addEventListener('scroll', handleScroll)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (scrollElement) scrollElement.removeEventListener('scroll', handleScroll)
+  clearTimeout(returnTimer)
+})
 
-const footerLinks = [/*{
-  label: 'Invite people',
-  icon: 'i-heroicons-plus',
-  to: '/settings/members'
-}, */{
-  label: 'Hilfe & Info',
-  icon: 'i-heroicons-question-mark-circle',
-  click: () => isHelpSlideoverOpen.value = true
-}]
 
 </script>
 
@@ -191,45 +170,49 @@ const footerLinks = [/*{
         </UDashboardPanel>
       </UDashboardPage>
 
-      <div class="mobileFooter bg-white dark:bg-gray-950">
+      <!-- Modernisierte Mobile Navigation -->
+      <nav
+          :class="[
+    'fixed bottom-0 left-0 right-0 z-50',   // ← bottom-0 hinzugefügt!
+    'h-[70px] bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl',
+    'border-t border-gray-200 dark:border-gray-800',
+    'flex justify-around items-center pt-2 pb-[max(env(safe-area-inset-bottom),0.5rem)]',
+    'transition-transform duration-300 ease-in-out',
+    hideNav ? 'translate-y-full' : 'translate-y-0'
+  ]"
+      >
         <UButton
             icon="i-heroicons-home"
             to="/mobile/"
             variant="ghost"
             :color="route.fullPath === '/mobile' ? 'primary' : 'gray'"
+            class="nav-btn"
         />
+
         <UButton
             icon="i-heroicons-clipboard-document-check"
             to="/standardEntity/tasks"
             variant="ghost"
             :color="route.fullPath === '/standardEntity/tasks' ? 'primary' : 'gray'"
+            class="nav-btn"
         />
+
         <UButton
             icon="i-heroicons-rectangle-stack"
             to="/standardEntity/projects"
             variant="ghost"
             :color="route.fullPath === '/standardEntity/projects' ? 'primary' : 'gray'"
+            class="nav-btn"
         />
-        <!--      <UButton
-                icon="i-heroicons-clock"
-                to="/workingtimes"
-                variant="ghost"
-                :color="route.fullPath === '/workingtimes' ? 'primary' : 'gray'"
-              />-->
+
         <UButton
             icon="i-heroicons-bars-4"
             to="/mobile/menu"
             variant="ghost"
             :color="route.fullPath === '/mobile/menu' ? 'primary' : 'gray'"
+            class="nav-btn"
         />
-      </div>
-
-
-
-      <!-- ~/components/HelpSlideover.vue -->
-      <HelpSlideover/>
-      <!-- ~/components/NotificationsSlideover.vue -->
-      <NotificationsSlideover />
+      </nav>
 
 
     </UDashboardLayout>
@@ -276,20 +259,9 @@ const footerLinks = [/*{
 </template>
 
 <style scoped>
-.mobileFooter {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 8vh;
-  width: 100%;
-  border-top: 1px solid grey;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 1em;
+.nav-btn {
+  @apply w-12 h-12 flex justify-center items-center rounded-xl active:scale-95 transition;
 }
 
-.mobileFooter > a {
 
-}
 </style>