|
|
@@ -79,13 +79,25 @@ onMounted(async () => {
|
|
|
|
|
|
<template>
|
|
|
<div class="app">
|
|
|
- <div class="appShell">
|
|
|
- <aside class="sidebar">
|
|
|
- <div class="sidebarHeader">
|
|
|
+ <div class="appShell layoutShell">
|
|
|
+ <div class="layoutOverlay" aria-hidden="true" />
|
|
|
+
|
|
|
+ <header class="layoutHeader">
|
|
|
+ <div class="layoutHeaderLeft">
|
|
|
<div class="brandTitle">ORÁCULO</div>
|
|
|
<div class="brandSub">Assistente interno com base de conhecimento</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="layoutHeaderRight">
|
|
|
+ <div class="min-w-0">
|
|
|
+ <div class="text-base font-medium truncate ">{{ tituloPagina }}</div>
|
|
|
+ </div>
|
|
|
+ <BotaoAlterarTema />
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <aside class="sidebar layoutSidebar">
|
|
|
+
|
|
|
<div class="sidebarScroll">
|
|
|
<div class="panel sidebarNav">
|
|
|
<button
|
|
|
@@ -145,16 +157,7 @@ onMounted(async () => {
|
|
|
</div>
|
|
|
</aside>
|
|
|
|
|
|
- <main class="main !flex !flex-col !p-0 !overflow-hidden">
|
|
|
- <header
|
|
|
- class="sticky top-0 z-30 h-16 flex items-center justify-between gap-4 px-4 md:px-6 bg-primary text-primary-foreground border-b border-border backdrop-blur-sm"
|
|
|
- >
|
|
|
- <div class="min-w-0">
|
|
|
- <div class="text-base font-medium truncate">{{ tituloPagina }}</div>
|
|
|
- </div>
|
|
|
- <BotaoAlterarTema />
|
|
|
- </header>
|
|
|
-
|
|
|
+ <main class="main layoutMain !flex !flex-col !p-0 !overflow-hidden">
|
|
|
<div class="flex-1 overflow-auto p-4 md:p-6">
|
|
|
<slot />
|
|
|
</div>
|
|
|
@@ -164,6 +167,78 @@ onMounted(async () => {
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
+.layoutShell {
|
|
|
+ --layout-header-height: 5rem;
|
|
|
+ position: relative;
|
|
|
+ grid-template-rows: var(--layout-header-height) 1fr;
|
|
|
+}
|
|
|
+
|
|
|
+.layoutOverlay {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 0;
|
|
|
+ background: radial-gradient(900px 520px at 20% 10%, rgba(37, 99, 235, 0.12), transparent 60%),
|
|
|
+ radial-gradient(700px 520px at 85% 35%, rgba(162, 102, 255, 0.1), transparent 60%);
|
|
|
+}
|
|
|
+
|
|
|
+:global(html.dark) .layoutOverlay {
|
|
|
+ background: radial-gradient(900px 520px at 20% 10%, rgba(91, 140, 255, 0.18), transparent 60%),
|
|
|
+ radial-gradient(700px 520px at 85% 35%, rgba(162, 102, 255, 0.14), transparent 60%);
|
|
|
+}
|
|
|
+
|
|
|
+.layoutHeader {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ grid-row: 1;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 340px 1fr;
|
|
|
+ align-items: center;
|
|
|
+ gap: 18px;
|
|
|
+ padding: 14px 18px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: var(--primary-foreground);
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.layoutHeaderLeft {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.layoutHeaderRight {
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.layoutSidebar {
|
|
|
+ grid-column: 1;
|
|
|
+ grid-row: 2;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ grid-template-rows: 1fr auto;
|
|
|
+}
|
|
|
+
|
|
|
+.layoutMain {
|
|
|
+ grid-column: 2;
|
|
|
+ grid-row: 2;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 980px) {
|
|
|
+ .layoutHeader {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layoutHeaderRight {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.sidebarNav {
|
|
|
display: grid;
|
|
|
align-content: end;
|
