forked from trent_larson/crowd-funder-for-time-pwa
4ba58145d0
- Add @capacitor/status-bar dependency for safe area detection
- Implement SafeAreaPlugin for Android with proper inset calculation
- Create safeAreaInset.js utility for CSS custom property injection
- Update Android manifest and build configuration for plugin
- Integrate safe area handling across Vue components and views
- Update iOS Podfile and Android gradle configurations
- Add commitlint and husky for commit message validation
Technical changes:
- SafeAreaPlugin uses WindowInsets API for Android R+ devices
- Fallback detection for navigation bar and gesture bar heights
- CSS custom properties: --safe-area-inset-{top,bottom,left,right}
- Platform-specific detection (Android WebView only)
- StatusBar plugin integration for top inset calculation
119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
<template>
|
|
<!-- QUICK NAV -->
|
|
<nav
|
|
id="QuickNav"
|
|
class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px))]"
|
|
>
|
|
<ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
|
|
<!-- Home Feed -->
|
|
<li
|
|
:class="{
|
|
'basis-1/5': true,
|
|
'rounded-md': true,
|
|
'bg-slate-400 text-white': selected === 'Home',
|
|
'text-slate-500': selected !== 'Home',
|
|
}"
|
|
>
|
|
<router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
|
|
<div class="flex flex-col items-center">
|
|
<font-awesome icon="house-chimney" class="fa-fw" />
|
|
<span class="text-xs mt-1">feed</span>
|
|
</div>
|
|
</router-link>
|
|
</li>
|
|
<!-- Search -->
|
|
<li
|
|
:class="{
|
|
'basis-1/5': true,
|
|
'rounded-md': true,
|
|
'bg-slate-400 text-white': selected === 'Discover',
|
|
'text-slate-500': selected !== 'Discover',
|
|
}"
|
|
>
|
|
<router-link
|
|
:to="{ name: 'discover' }"
|
|
class="block text-center py-2 px-1"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<font-awesome icon="magnifying-glass" class="fa-fw" />
|
|
<span class="text-xs mt-1">search</span>
|
|
</div>
|
|
</router-link>
|
|
</li>
|
|
<!-- Projects -->
|
|
<li
|
|
:class="{
|
|
'basis-1/5': true,
|
|
'rounded-md': true,
|
|
'bg-slate-400 text-white': selected === 'Projects',
|
|
'text-slate-500': selected !== 'Projects',
|
|
}"
|
|
>
|
|
<router-link
|
|
:to="{ name: 'projects' }"
|
|
class="block text-center py-2 px-1"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<font-awesome icon="hand" class="fa-fw" />
|
|
<span class="text-xs mt-1">yours</span>
|
|
</div>
|
|
</router-link>
|
|
</li>
|
|
<!-- Contacts -->
|
|
<li
|
|
:class="{
|
|
'basis-1/5': true,
|
|
'rounded-md': true,
|
|
'bg-slate-400 text-white': selected === 'Contacts',
|
|
'text-slate-500': selected !== 'Contacts',
|
|
}"
|
|
>
|
|
<router-link
|
|
:to="{ name: 'contacts' }"
|
|
class="block text-center py-2 px-1"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<font-awesome icon="users" class="fa-fw" />
|
|
<span class="text-xs mt-1">contacts</span>
|
|
</div>
|
|
</router-link>
|
|
</li>
|
|
<!-- Profile -->
|
|
<li
|
|
:class="{
|
|
'basis-1/5': true,
|
|
'rounded-md': true,
|
|
'bg-slate-400 text-white': selected === 'Profile',
|
|
'text-slate-500': selected !== 'Profile',
|
|
}"
|
|
>
|
|
<router-link
|
|
:to="{ name: 'account' }"
|
|
class="block text-center py-2 px-1"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<font-awesome icon="circle-user" class="fa-fw" />
|
|
<!--
|
|
We used to say "account", so we'll keep that in the code,
|
|
but it isn't accurate because we don't hold anything for them.
|
|
We'll say "profile" to the users.
|
|
(Or: settings, face, registry, cache, repo, vault... or separate
|
|
preferences from identity.)
|
|
-->
|
|
<span class="text-xs mt-1">profile</span>
|
|
</div>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-facing-decorator";
|
|
|
|
@Component({ name: "QuickNav" })
|
|
export default class QuickNav extends Vue {
|
|
@Prop selected = "";
|
|
}
|
|
</script>
|