mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
76 lines
2.5 KiB
Vue
76 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
|
|
import type { Section } from '~/components/CVerticalNavigation.vue';
|
|
|
|
import { Lit } from 'litlyx-js';
|
|
|
|
const sections: Section[] = [
|
|
{
|
|
title: 'Project',
|
|
entries: [
|
|
{ label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
|
|
{ label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
|
|
{ label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
|
|
{ label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
|
|
{ label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
|
|
{
|
|
label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
|
|
action() { Lit.event('docs_clicked') },
|
|
},
|
|
{ label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
|
|
]
|
|
}
|
|
];
|
|
|
|
const { showDialog, closeDialog } = useBarCardDialog();
|
|
|
|
const { isOpen, close, open } = useMenu();
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
|
<div class="layout relative flex flex-col min-h-[100dvh] h-dvh w-dvw overflow-hidden">
|
|
|
|
|
|
<div
|
|
class="px-6 py-3 flex items-center justify-center shadow-[0_0_10px_#000000CC] z-[20] rounded-xl mx-2 my-2 lg:hidden">
|
|
<i @click="open()" class="fas fa-bars text-[1.2rem] absolute left-6"></i>
|
|
<div class="nunito font-semibold text-[1.2rem]">
|
|
Litlyx
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex h-full">
|
|
|
|
|
|
<div v-if="isOpen" @click="close()"
|
|
class="lg:hidden barrier bg-black/40 backdrop-blur-[2px] w-full h-full absolute left-0 top-0 z-[40]">
|
|
</div>
|
|
|
|
|
|
<CVerticalNavigation :sections="sections">
|
|
</CVerticalNavigation>
|
|
|
|
|
|
<div class="overflow-hidden w-full bg-lyx-background-light relative h-full">
|
|
|
|
<div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]">
|
|
<i
|
|
class="z-[40] absolute right-12 top-8 fas fa-times text-text-sub text-[1.8rem] lg:text-[3rem]"></i>
|
|
</div>
|
|
|
|
<div @click="closeDialog()" class="w-full h-full z-[35] absolute top-0 left-0 px-4 lg:px-60 py-20"
|
|
v-if="showDialog">
|
|
<DashboardDialogBarCard @click.stop="null" class="z-[36]"></DashboardDialogBarCard>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|