82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ConfigProvider } from "radix-vue"
|
|
import { cn } from "./lib/utils";
|
|
|
|
useHead({
|
|
titleTemplate: (titleChunk) => {
|
|
return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
|
|
},
|
|
meta: [
|
|
{ name: "charset", content: "UTF-8" },
|
|
{ name: "viewport", content: "width=device-width, initial-scale=1.0" },
|
|
{ name: "author", content: "Alexis Pelé" },
|
|
{ name: "generator", content: "Nuxt" },
|
|
{ name: "msapplication-TileColor", content: "00aba9" },
|
|
{ name: "theme-color", content: "00aba9" },
|
|
{ name: "og:type", content: "tabletop-tools" },
|
|
{ name: "og:url", content: "ttt.alexcreates.fr" },
|
|
{ name: "robots", content: "noindex, nofollow"}
|
|
],
|
|
link: [
|
|
{ rel: "apple-touch-icon", sizes: "76x76", href: "/apple-touch-icon.png" },
|
|
{ rel: "icon", sizes: "32x32", type: "image/png", href: "/favicon-32x32.png" },
|
|
{ rel: "icon", sizes: "16x16", type: "image/png", href: "/favicon-16x16.png" },
|
|
{ rel: "manifest", href: "/site.webmanifest" },
|
|
{ rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#6595b4" },
|
|
]
|
|
})
|
|
|
|
const useIdFunction = () => useId()
|
|
|
|
const { isSidebarOpened } = storeToRefs(useUiStore())
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-screen">
|
|
<NuxtLoadingIndicator />
|
|
|
|
<NuxtLayout>
|
|
<ConfigProvider :use-id="useIdFunction">
|
|
<div
|
|
class="h-full grid md:grid-cols-[auto_1fr] dark:bg-black shadow-body-light dark:shadow-body-dark transition-colors after:absolute after:transition-colors"
|
|
:class="cn({
|
|
'max-md:after:bg-transparent': isSidebarOpened,
|
|
'has-sidebar max-md:after:bg-black/20 md:after:opacity-0 md:after:pointer-events-none': isSidebarOpened
|
|
})"
|
|
>
|
|
<Sidebar />
|
|
|
|
<div
|
|
class="wrapper max-h-screen transition-all overflow-y-auto"
|
|
>
|
|
<NuxtPage />
|
|
</div>
|
|
</div>
|
|
</ConfigProvider>
|
|
</NuxtLayout>
|
|
|
|
<ClientOnly>
|
|
<UiToaster />
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapper > * {
|
|
height: 100%;
|
|
}
|
|
|
|
.has-sidebar {
|
|
position: relative;
|
|
isolation: isolate;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 30;
|
|
}
|
|
}
|
|
</style>
|