I am using Framework7 Vue for my application. I can’t handle the bottom safearea on iOS.
I want to cover the bottom part of my navigation menu with the same background as my navigation menu.
Here is the HTML of my page:
<template>
<f7-page
:class="{ 'hg-categories-page': true, admin: isAdmin }"
name="categories"
@page:beforein="getCategoriesClassesHandler"
@page:beforeout="emptyData"
>
<top-bar :tabs="classesTabs" :change-tab="changeClass" @tab-selected="getCategoriesByClass">
<template #title>{{ $t("topics.topics") }}</template>
<template v-if="user && user.everyday_goal" #subtitle>{{ $t("top-bar.today-goal") }}</template>
<template v-if="user && user.everyday_goal" #subtitle-data
>{{ `${user.everyday_goal} ${$t("top-bar.questions")}` }}
</template>
</top-bar>
<template v-if="!isLoading">
<f7-list no-hairlines-md @touchstart="touchStart" @touchend="touchEnd">
<template v-if="isAdmin">
<f7-list-item v-for="category in categories" :key="category.id">
<f7-link :href="`/categories/${category.id}/questions/`" style="width: 100%">
<span class="item-title">
<text-clamp :text="category.attributes.name" :max-lines="2" :max-width="280" ellipsis="" />
</span>
<span class="item-after">
<p>{{ getAfterText(category) }}</p>
</span>
</f7-link>
<div style="display: flex; justify-content: space-between; gap: 30px; margin-top: 20px; width: 100%">
<f7-link :href="`/categories/${category.id}/generateQuestions/`" class="admin-button generate"
>Generate</f7-link
>
<f7-link
:href="`/categories/${category.id}/reviewQuestions/`"
:class="[{ red: category.unpublishedQuestions }, 'admin-button review']"
>Review {{ category.unpublishedQuestions ? category.unpublishedQuestions : "" }}</f7-link
>
</div>
</f7-list-item>
</template>
<template v-else>
<f7-list-item
v-for="category in categories"
:key="category.id"
:link="`/categories/${category.id}/questions/`"
>
<template #title>
<text-clamp :text="category.attributes.name" :max-lines="2" :max-width="280" ellipsis="" />
</template>
<template #after>
<p>{{ getAfterText(category) }}</p>
</template>
</f7-list-item>
</template>
</f7-list>
</template>
<loading-small v-else />
<bottom-menu :current-path="f7route.path" />
<f7-popup class="search-popup popup-swipe" swipe-to-close @popup:closed="closeSearchPopup">
<f7-page>
<f7-navbar>
<f7-nav-left>{{ $t("over.search") }}</f7-nav-left>
<f7-nav-right>
<f7-link popup-close>
<img src="@/assets/icons/x-white.svg" height="24" width="24" />
</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>
<div class="input-wrapper">
<f7-input v-model:value="searchStr" type="text" :placeholder="$t('inputs.enter-the-keyword')" />
</div>
<div v-if="!searchStr" class="keywords">
<f7-button
v-for="({ name, active }, index) in keywords"
:key="`keyword_${index + 1}`"
class="keyword"
:class="{ active: active }"
@click="selectKeyword(index)"
>
{{ name }}
</f7-button>
</div>
<f7-list v-if="searchedCategories?.length" no-hairlines-md>
<f7-list-item v-for="category in searchedCategories" :key="category.id">
<template #title>
<f7-link :href="`/categories/${category.id}/questions/`" style="width: 100%" popup-close>
<text-clamp :text="category.attributes.name" :max-lines="2" :max-width="280" ellipsis="" />
</f7-link>
</template>
<template #after>
<f7-link :href="`/categories/${category.id}/questions/`" style="width: 100%" popup-close>
<p>{{ getAfterText(category) }}</p>
<span>{{ `${$t("over.class")} ${category.attributes.category_class.data.attributes.name}` }}</span>
</f7-link>
</template>
</f7-list-item>
</f7-list>
<div v-else-if="loading" class="loading-for-search">
<loading-small />
</div>
<div v-else-if="searchStr && searchedCategories?.length === 0">
<p>{{ $t("over.no-search-results") }}</p>
<div class="keywords">
<f7-button
v-for="({ name, active }, index) in keywords"
:key="`keyword_${index + 1}`"
class="keyword"
:class="{ active: active }"
@click="selectKeyword(index)"
>
{{ name }}
</f7-button>
</div>
</div>
</f7-block>
</f7-page>
</f7-popup>
</f7-page>
</template>
Here is the bottom menu code:
<template>
<f7-toolbar class="hg-bottom-menu" bottom>
<f7-link
v-for="(link, index) in menuLinksRes"
:key="`menu-link_${index + 1}`"
:href="link.href"
:class="{ active: link.active }"
@click="resetPage(link.name)"
>
<div class="icon-container">
<svg></svg>
</div>
<span class="link-title">{{ link.name }}</span>
</f7-link>
</f7-toolbar>
</template>
And this is the SCSS of bottom menu:
.hg-bottom-menu {
position: sticky;
z-index: 90;
font-family: 'Rubik', sans-serif;
box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.06);
border-radius: 24px 24px 0 0;
&::before, &::after {
display: none;
}
.toolbar-inner {
position: relative;
padding: 0 32px 0;
.link {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 48px;
padding: 0;
&.active {
.link-title {
color: #8419ff;
}
}
&::before {
display: none;
}
.icon-container {
display: flex;
justify-content: center;
width: 32px;
height: 32px;
text-align: center;
}
.link-title {
color: #777481;
font-size: 14px;
line-height: 16px;
}
}
}
}
Where is my fault, what am I missing?
Thanks in advance.