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">
|
<script setup lang="ts">
|
||||||
import { RouterView } from 'vue-router'
|
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";
|
import Sidebar from "@/components/Sidebar.vue";
|
||||||
|
import TopBar from "@/components/TopBar.vue";
|
||||||
const route = useRoute();
|
|
||||||
const page_title = ref();
|
|
||||||
|
|
||||||
watch(() => route.meta, (newVal, oldVal) => {
|
|
||||||
page_title.value = newVal.title;
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
|
<div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
|
||||||
<Sidebar></Sidebar>
|
<Sidebar></Sidebar>
|
||||||
<main class="min-h-screen flex flex-col relative flex-auto">
|
<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]">
|
<TopBar></TopBar>
|
||||||
<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>
|
|
||||||
<div class="p-0 sm:p-4">
|
<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">
|
<div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
|
|
@ -88,13 +19,4 @@ watch(() => route.meta, (newVal, oldVal) => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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>
|
</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