<template>
  <q-footer
    v-if="tools.isUserOk()"
    class="bg-white small-screen-only"
    bordered
  >
    <q-tabs
      dense
      class="text-grey-10 mylabfooter mysmalltabs"
      style="padding: 0px !important;"
      content-class="mysmalltabs"
      active-color="primary"
      no-caps
      indicator-color="transparent"
    >
      <q-route-tab
        to="/"
        class="mylabfooter"
        :label="$t('tabdown.home')"
        icon="fas fa-home"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_GROUPS"
        class="mylabfooter"
        :label="$t('tabdown.groups')"
        to="/groups"
        icon="fas fa-users"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_CIRCUITS"
        class="mylabfooter"
        :label="$t('tabdown.circuits')"
        to="/circuits"
        icon="fas fa-coins"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_USERS"
        class="mylabfooter"
        :label="$t('tabdown.friends')"
        to="/friends"
        icon="fas fa-user-friends"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_BOOKINGS"
        class="mylabfooter"
        :label="$t('tabdown.bookings')"
        to="/admin/eventlist"
        icon="fas fa-calendar-plus"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_PROFILE"
        class="mylabfooter"
        :label="$t('tabdown.profile')"
        :to="`/my/`+getMyUsername()"
        icon="person"
      />
    </q-tabs>
  </q-footer>
</template>

<script lang="ts" src="./MyFooter.ts">
</script>

<style lang="scss" scoped>
@import './MyFooter.scss';
</style>
