Factor out TopBar.
This commit is contained in:
parent
221ada41e2
commit
06ad60e917
2 changed files with 89 additions and 80 deletions
82
src/App.vue
82
src/App.vue
|
|
@ -1,83 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import OverlayBadge from 'primevue/overlaybadge';
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const page_title = ref();
|
||||
|
||||
watch(() => route.meta, (newVal, oldVal) => {
|
||||
page_title.value = newVal.title;
|
||||
})
|
||||
import TopBar from "@/components/TopBar.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
|
||||
<Sidebar></Sidebar>
|
||||
<main class="min-h-screen flex flex-col relative flex-auto">
|
||||
<header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
|
||||
<div class="flex">
|
||||
<a
|
||||
v-styleclass="{
|
||||
selector: '#app-sidebar-5',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-fadeinleft',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeoutleft',
|
||||
hideOnOutsideClick: true
|
||||
}"
|
||||
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
|
||||
>
|
||||
<i class="pi pi-bars text-4xl" />
|
||||
</a>
|
||||
<span class="title">{{ page_title }}</span>
|
||||
</div>
|
||||
<a
|
||||
v-styleclass="{
|
||||
selector: '@next',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-fadein',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeout',
|
||||
hideOnOutsideClick: true
|
||||
}"
|
||||
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
|
||||
>
|
||||
<i class="pi pi-ellipsis-v text-2xl" />
|
||||
</a>
|
||||
<ul
|
||||
class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
|
||||
id="header-icons"
|
||||
>
|
||||
<li>
|
||||
<a>
|
||||
<i class="pi pi-inbox mr-2 lg:mr-0" />
|
||||
<span class="block lg:hidden font-medium">Inbox</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<OverlayBadge severity="danger" class="mr-2 lg:mr-0">
|
||||
<i class="pi pi-bell" />
|
||||
</OverlayBadge>
|
||||
<span class="block lg:hidden font-medium">Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-t border-surface lg:border-t-0">
|
||||
<a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors">
|
||||
<img
|
||||
alt="user avatar"
|
||||
src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-4 lg:mr-0 w-8 h-8" />
|
||||
<div class="block lg:hidden">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<TopBar></TopBar>
|
||||
<div class="p-0 sm:p-4">
|
||||
<div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
|
||||
<RouterView />
|
||||
|
|
@ -88,13 +19,4 @@ watch(() => route.meta, (newVal, oldVal) => {
|
|||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
font-size: 160%;
|
||||
}
|
||||
#header-icons li a {
|
||||
@apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
|
||||
i {
|
||||
@apply text-base lg:!text-2xl leading-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import OverlayBadge from "primevue/overlaybadge";
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const page_title = ref();
|
||||
|
||||
watch(() => route.meta, (newVal, oldVal) => {
|
||||
page_title.value = newVal.title;
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
|
||||
<div class="flex">
|
||||
<a
|
||||
v-styleclass="{
|
||||
selector: '#app-sidebar-5',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-fadeinleft',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeoutleft',
|
||||
hideOnOutsideClick: true
|
||||
}"
|
||||
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
|
||||
>
|
||||
<i class="pi pi-bars text-4xl" />
|
||||
</a>
|
||||
<span class="title">{{ page_title }}</span>
|
||||
</div>
|
||||
<a
|
||||
v-styleclass="{
|
||||
selector: '@next',
|
||||
enterFromClass: 'hidden',
|
||||
enterActiveClass: 'animate-fadein',
|
||||
leaveToClass: 'hidden',
|
||||
leaveActiveClass: 'animate-fadeout',
|
||||
hideOnOutsideClick: true
|
||||
}"
|
||||
class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
|
||||
>
|
||||
<i class="pi pi-ellipsis-v text-2xl" />
|
||||
</a>
|
||||
<ul
|
||||
class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
|
||||
id="header-icons"
|
||||
>
|
||||
<li>
|
||||
<a>
|
||||
<i class="pi pi-inbox mr-2 lg:mr-0" />
|
||||
<span class="block lg:hidden font-medium">Inbox</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<OverlayBadge severity="danger" class="mr-2 lg:mr-0">
|
||||
<i class="pi pi-bell" />
|
||||
</OverlayBadge>
|
||||
<span class="block lg:hidden font-medium">Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-t border-surface lg:border-t-0">
|
||||
<a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors">
|
||||
<img
|
||||
alt="user avatar"
|
||||
src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-4 lg:mr-0 w-8 h-8" />
|
||||
<div class="block lg:hidden">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
|
||||
<span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 160%;
|
||||
}
|
||||
#header-icons li a {
|
||||
@apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
|
||||
i {
|
||||
@apply text-base lg:!text-2xl leading-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue