allow ?fullscreen=true for embedded map support

This commit is contained in:
Will Freeman
2025-03-28 13:41:21 -06:00
parent d748908cfd
commit dafd8bb325
3 changed files with 59 additions and 47 deletions
+46 -43
View File
@@ -6,6 +6,7 @@ import { useTheme } from 'vuetify';
const theme = useTheme();
const router = useRouter();
const isDark = computed(() => theme.name.value === 'dark');
const isFullscreen = computed(() => router.currentRoute.value?.query.fullscreen === 'true');
function toggleTheme() {
const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -46,53 +47,55 @@ watch(() => theme.global.name.value, (newTheme) => {
<template>
<v-app>
<v-app-bar
flat
prominent
>
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<template v-if="!isFullscreen">
<v-app-bar
flat
prominent
>
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>
<v-img style="cursor: pointer" height="36" width="130" src="/deflock-logo.svg" @click="router.push('/')" />
</v-toolbar-title>
<v-toolbar-title>
<v-img style="cursor: pointer" height="36" width="130" src="/deflock-logo.svg" @click="router.push('/')" />
</v-toolbar-title>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<!-- <v-btn icon>
<v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
</v-btn> -->
</v-app-bar>
<!-- <v-btn icon>
<v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
</v-btn> -->
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
temporary
>
<v-list nav>
<v-list-subheader>DeFlock</v-list-subheader>
<v-list-item
v-for="item in items"
:key="item.title"
link
:to="item.to"
><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
<v-divider />
<v-list-subheader>Get Involved</v-list-subheader>
<v-list-item
v-for="item in metaItems"
:key="item.title"
link
:to="item.to"
:href="item.href"
:target="{ '_blank': item.href }"
>
<v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
<v-img v-else-if="item.customIcon" class="mr-2 custom-icon" contain width="24" height="24" :src="isDark ? item.customIconDark : item.customIcon" style="vertical-align: middle;" />
<span style="vertical-align: middle;">{{ item.title }}</span>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-navigation-drawer
v-model="drawer"
temporary
>
<v-list nav>
<v-list-subheader>DeFlock</v-list-subheader>
<v-list-item
v-for="item in items"
:key="item.title"
link
:to="item.to"
><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
<v-divider />
<v-list-subheader>Get Involved</v-list-subheader>
<v-list-item
v-for="item in metaItems"
:key="item.title"
link
:to="item.to"
:href="item.href"
:target="{ '_blank': item.href }"
>
<v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
<v-img v-else-if="item.customIcon" class="mr-2 custom-icon" contain width="24" height="24" :src="isDark ? item.customIconDark : item.customIcon" style="vertical-align: middle;" />
<span style="vertical-align: middle;">{{ item.title }}</span>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<v-main>
<RouterView />