mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
add dashboard
This commit is contained in:
Litlyx
108
dashboard/layouts/dashboard.vue
Normal file
108
dashboard/layouts/dashboard.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { Section } from '~/components/CVerticalNavigation.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { setToken } = useAccessToken();
|
||||
|
||||
import { Lit } from 'litlyx';
|
||||
|
||||
const sections: Section[] = [
|
||||
{
|
||||
title: 'General',
|
||||
entries: [
|
||||
{ label: 'Projects', icon: 'far fa-table-layout', to: '/project_selector' },
|
||||
{ label: 'Admin', icon: 'fas fa-cat', adminOnly: true, to: '/admin' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Project',
|
||||
entries: [
|
||||
{ label: 'Dashboard', to: '/', icon: 'far fa-home' },
|
||||
// { label: 'Events', to: '/events', icon: 'far fa-bolt' },
|
||||
{ label: 'Analyst', to: '/analyst', icon: 'far fa-microchip-ai' },
|
||||
{ label: 'Report', to: '/report', icon: 'far fa-notes' },
|
||||
// { label: 'AI', to: '/dashboard/settings', icon: 'far fa-robot brightness-[.4]' },
|
||||
// { label: 'Visits', to: '/dashboard/visits', icon: 'far fa-eye' },
|
||||
// { label: 'Events', to: '/dashboard/events', icon: 'far fa-line-chart' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Non si vede',
|
||||
entries: [
|
||||
{
|
||||
label: 'Docs', to: 'https://docs.litlyx.com', icon: 'far fa-book-open', external: true,
|
||||
action() { Lit.event('docs_clicked') },
|
||||
},
|
||||
{
|
||||
label: 'Github', to: 'https://github.com/botkalista/litlyx-javascript-lib', icon: 'fab fa-github', external: true,
|
||||
action() { Lit.event('git_clicked') },
|
||||
},
|
||||
{ label: 'Plans', to: '/plans', icon: 'far fa-wallet' },
|
||||
{ label: 'Book a demo', to: '/book_demo', icon: 'far fa-calendar' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Actions',
|
||||
entries: [
|
||||
{
|
||||
label: 'Logout',
|
||||
icon: 'far fa-arrow-right-from-bracket',
|
||||
action: () => {
|
||||
console.log('LOGOUT')
|
||||
setToken('');
|
||||
setLoggedUser(undefined);
|
||||
router.push('/login');
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const { showDialog, closeDialog } = useBarCardDialog();
|
||||
|
||||
const { open, isOpen, close } = 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 md: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-bg 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>
|
||||
141
dashboard/layouts/header.vue
Normal file
141
dashboard/layouts/header.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const entries = [
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'i-heroicons-home',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
label: 'Pricing',
|
||||
icon: 'i-heroicons-currency-dollar',
|
||||
to: '/pricing'
|
||||
},
|
||||
{
|
||||
label: 'FAQ',
|
||||
icon: 'i-heroicons-question-mark-circle',
|
||||
to: '/faq'
|
||||
}
|
||||
]
|
||||
|
||||
const loggedUser = useLoggedUser();
|
||||
const { setToken } = useAccessToken();
|
||||
|
||||
function logout() {
|
||||
loggedUser.value = { logged: false }
|
||||
setToken('');
|
||||
location.reload();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="layout h-full flex flex-col pt-1 px-1">
|
||||
|
||||
<div class="text-white flex items-center py-4 pl-10 gap-2 mx-20">
|
||||
|
||||
|
||||
<div class="flex gap-4 items-center">
|
||||
<div class="bg-[#2969f1] h-[2.8rem] aspect-[1/1] flex items-center justify-center rounded-lg">
|
||||
<img class="h-[1.8rem]" :src="'/logo.png'">
|
||||
</div>
|
||||
<div class="font-bold text-[1.6rem] text-gray-300 poppins"> Litlyx </div>
|
||||
</div>
|
||||
<!-- <div class="flex items-center gap-4">
|
||||
<div class="w-8 h-8 bg-blue-400"></div>
|
||||
<div class="font-bold text-[1.2rem] poppins"> Litlyx </div>
|
||||
</div> -->
|
||||
|
||||
<div class="grow"></div>
|
||||
<div class="flex gap-8 text-[1rem] text-white font-[500] poppins">
|
||||
<div> Open metrics </div>
|
||||
<div> Docs </div>
|
||||
<div> Pricing </div>
|
||||
<div> GitHub </div>
|
||||
<div> FAQ </div>
|
||||
</div>
|
||||
<div class="px-10">
|
||||
<div class="poppins font-[500] px-4 py-[.3rem] bg-accent rounded-xl"> Open App </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto shrink h-full">
|
||||
<div>
|
||||
<slot></slot>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center text-[1.3rem] items-center poppins py-16">
|
||||
Made with ❤ in Italy
|
||||
</div>
|
||||
|
||||
<div class="border-t-[1px] border-accent/40 flex h-fit py-12 w-full justify-between px-[8rem] footer">
|
||||
|
||||
<div class="flex flex-col gap-7">
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- <div class="flex items-center justify-center">
|
||||
<img :src="'logo.png'" class="h-[1.5rem]">
|
||||
</div> -->
|
||||
<div class="poppins font-bold text-[1.6rem] text-text/90">
|
||||
Litlyx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6 text-[1.5rem] text-text-sub/80">
|
||||
<div> <i class="fab fa-x-twitter"></i> </div>
|
||||
<div> <i class="fab fa-linkedin"></i> </div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-[.9rem] text-text-sub/80"> © 2024 Epictech Development S.r.l. All right
|
||||
reserved.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex gap-20">
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-text-sub/60 font-semibold"> Product </div>
|
||||
<div class="hover:text-accent cursor-pointer"> Pricing </div>
|
||||
<div class="hover:text-accent cursor-pointer"> Docs </div>
|
||||
<div class="hover:text-accent cursor-pointer"> Github </div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-text-sub/60 font-semibold"> Company </div>
|
||||
<div class="hover:text-accent cursor-pointer"> About </div>
|
||||
<div class="hover:text-accent cursor-pointer"> Contact us </div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-text-sub/60 font-semibold"> Legal </div>
|
||||
<div class="hover:text-accent cursor-pointer"> Privacy policy </div>
|
||||
<div class="hover:text-accent cursor-pointer"> Terms and conditions </div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner * {
|
||||
font-family: "Nunito";
|
||||
}
|
||||
|
||||
.layout * {
|
||||
font-family: "Inter";
|
||||
}
|
||||
</style>
|
||||
21
dashboard/layouts/none.vue
Normal file
21
dashboard/layouts/none.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
const { showDialog, closeDialog } = useBarCardDialog();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="w-full 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>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user