Added auth functionality, initial work with views and field types
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import AppSidebar from '@/components/AppSidebar.vue'
|
||||
import AIChatBar from '@/components/AIChatBar.vue'
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
@@ -26,9 +27,9 @@ const breadcrumbs = computed(() => {
|
||||
<template>
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<SidebarInset class="flex flex-col">
|
||||
<header
|
||||
class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b"
|
||||
class="relative z-10 flex h-16 shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b shadow-md"
|
||||
>
|
||||
<div class="flex items-center gap-2 px-4">
|
||||
<SidebarTrigger class="-ml-1" />
|
||||
@@ -58,9 +59,60 @@ const breadcrumbs = computed(() => {
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
|
||||
|
||||
<!-- Main scrollable content -->
|
||||
<div class="layout-slot-container flex flex-1 flex-col gap-4 p-4 pt-0 overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- AI Chat Bar Component -->
|
||||
<AIChatBar />
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout-slot-container {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to bottom, #DFDBE5 0%, rgba(223, 219, 229, 0) 100%);
|
||||
background-size: 100% 150px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.layout-slot-container::before,
|
||||
.layout-slot-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 auto auto 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(to bottom, rgba(156, 146, 172, 0.55) 0%, rgba(156, 146, 172, 0) 100%);
|
||||
-webkit-mask-image: url("~/assets/images/pattern.svg");
|
||||
-webkit-mask-repeat: repeat;
|
||||
-webkit-mask-size: 600px 600px;
|
||||
mask-image: url("~/assets/images/pattern.svg");
|
||||
mask-repeat: repeat;
|
||||
mask-size: 600px 600px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Crisp pattern that fades out */
|
||||
.layout-slot-container::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Slightly shifted, blurred layer to create a “blur into white” effect */
|
||||
.layout-slot-container::after {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.layout-slot-container > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user