FEDEO/layouts/mobile.vue

<script setup>


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()

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 groups = computed(() =>
    [{
      key: 'actions',
      commands: actions
    },{
      key: "customers",
      label: "Kunden",
      commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
    },{
      key: "vendors",
      label: "Lieferanten",
      commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
    },{
      key: "contacts",
      label: "Ansprechpartner",
      commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
    },{
      key: "products",
      label: "Artikel",
      commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
    },{
      key: "tasks",
      label: "Aufgaben",
      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
    },{
      key: "plants",
      label: "Objekte",
      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
    },{
      key: "projects",
      label: "Projekte",
      commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
    }
    ].filter(Boolean))
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>

<template>
  <UDashboardLayout class="safearea"  v-if="profileStore.loaded">

    <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
      <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;" :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
        <template #left>
          <ProfileDropdown class="w-full" />
        </template>
      </UDashboardNavbar>

      <UDashboardSidebar id="sidebar">
        <template #header>
          <UDashboardSearchButton v-if="!useCapacitor().getIsPhone()" label="Suche..."/>
        </template>

        <MainNav/>

        <div class="flex-1" />


        <template #footer>
          <div class="flex flex-col w-full">

            <UDashboardSidebarLinks :links="footerLinks" />
            <UDivider class="sticky bottom-0" />
            <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;"/>
          </div>

        </template>
      </UDashboardSidebar>
    </UDashboardPanel>

    <UDashboardPage style="height: 90vh">
      <UDashboardPanel grow>
        <slot />
      </UDashboardPanel>
    </UDashboardPage>

    <div class="mobileFooter bg-white dark:bg-gray-950">
      <UButton
        icon="i-heroicons-home"
        to="/mobile/"
        variant="ghost"
        :color="route.fullPath === '/mobile' ? 'primary' : 'gray'"
      />
      <UButton
        icon="i-heroicons-rectangle-stack"
        to="/standardEntity/tasks"
        variant="ghost"
        :color="route.fullPath === '/standardEntity/tasks' ? 'primary' : 'gray'"
      />
      <UButton
        icon="i-heroicons-clipboard-document-check"
        to="/standardEntity/projects"
        variant="ghost"
        :color="route.fullPath === '/standardEntity/projects' ? 'primary' : 'gray'"
      />
      <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'"
      />
    </div>



    <!-- ~/components/HelpSlideover.vue -->
    <HelpSlideover/>
    <!-- ~/components/NotificationsSlideover.vue -->
    <NotificationsSlideover />

    <ClientOnly>
      <LazyUDashboardSearch :groups="groups" hide-color-mode/>
    </ClientOnly>
  </UDashboardLayout>
  <div
      v-else
      class="flex flex-col"
  >
    <UColorModeImage
        light="/Logo_Hell_Weihnachten.png"
        dark="/Logo_Dunkel_Weihnachten.png"
        class="w-1/3 mx-auto my-10"
        v-if="month === '12'"
    />
    <UColorModeImage
      light="/Logo.png"
      dark="/Logo_Dark.png"
      class="w-1/3 mx-auto my-10"
      v-else
    />
    <div v-if="dataStore.showProfileSelection">
      <ProfileSelection/>
    </div>
    <div v-else>


      <UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />
    </div>

  </div>

</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;
}

.mobileFooter > a {

}
</style>