continue scaffolding and refine the basic foundation
This commit is contained in:
@@ -13,67 +13,79 @@ const simulateTask = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="open" class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/80"
|
||||
@click.self="close">
|
||||
<div class="w-[70vw] max-w-6xl h-[70vh] bg-[var(--color-base)] rounded-xl shadow-2xl border border-[var(--color-highlight)]
|
||||
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
|
||||
<div v-if="open" class="fixed inset-0 z-45 bg-black/80" @click.self="close">
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
|
||||
enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
|
||||
<div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
|
||||
<div class="absolute w-[70vw] max-w-6xl h-[70vh] bg-[var(--color-base)] rounded-xl shadow-2xl border border-[var(--color-highlight)]
|
||||
overflow-hidden flex max-h-[90vh] p-2">
|
||||
<!-- Sidebar Nav -->
|
||||
<nav class="w-64 flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between pb-4">
|
||||
<div class="flex items-center gap-2 px-2">
|
||||
<Icon name="mynaui:cog-four" class="w-7 h-7 text-[var(--color-subtle)] mt-1" />
|
||||
<h1 class="font-semibold text-center">Settings</h1>
|
||||
<!-- Sidebar Nav -->
|
||||
<nav class="w-64 flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between pb-4">
|
||||
<div class="flex items-center gap-2 px-2">
|
||||
<Icon name="mynaui:cog-four" class="w-7 h-7 text-[var(--color-subtle)] mt-1" />
|
||||
<h1 class="font-semibold text-center">Settings</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="page in pages" :key="page" :class="[
|
||||
'select-none cursor-pointer flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors w-full text-left',
|
||||
currentPage === page ? 'bg-[var(--color-highlight)]' : 'hover:bg-[var(--color-highlight)]/10'
|
||||
]" @click="setPage(page)">
|
||||
{{ page.charAt(0).toUpperCase() + page.slice(1) }}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="flex-1 flex flex-col overflow-hidden">
|
||||
<header class="flex items-center justify-between pl-2 pb-2">
|
||||
<h2 class="text-lg font-semibold">{{ currentPage.charAt(0).toUpperCase() + currentPage.slice(1) }}
|
||||
</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<div id="settings-loader-target"></div>
|
||||
<button @click="close"
|
||||
class="p-1.5 rounded-lg text-[var(--color-text)] bg-transparent hover:bg-[var(--color-highlight)]/10 transition-colors">
|
||||
<Icon name="mynaui:x-solid" class="w-5 h-5" />
|
||||
</button>
|
||||
<div v-for="page in pages" :key="page" :class="[
|
||||
'select-none cursor-pointer flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors w-full text-left',
|
||||
currentPage === page ? 'bg-[var(--color-highlight)]' : 'hover:bg-[var(--color-highlight)]/10'
|
||||
]" @click="setPage(page)">
|
||||
{{ page.charAt(0).toUpperCase() + page.slice(1) }}
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
class="flex-1 p-6 ml-1 mt-1 bg-[var(--color-neutral)] overflow-y-auto border rounded-lg border-[var(--color-highlight)]">
|
||||
<div v-if="currentPage === 'page1'">
|
||||
<p class="text-sm text-[var(--color-subtle)] mb-4">Settings page 1 content. Try adding a task to
|
||||
the queue
|
||||
below.
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="accent" @click="simulateTask">
|
||||
Simulate Task (2s)
|
||||
<!-- Content -->
|
||||
<main class="flex-1 flex flex-col overflow-hidden">
|
||||
<header class="flex items-center justify-between pl-2 pb-2">
|
||||
<h2 class="text-lg font-semibold">{{ currentPage.charAt(0).toUpperCase() + currentPage.slice(1)
|
||||
}}
|
||||
</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<div id="settings-loader-target"></div>
|
||||
<button @click="close"
|
||||
class="p-1.5 rounded-lg text-[var(--color-text)] bg-transparent hover:bg-[var(--color-highlight)]/10 transition-colors">
|
||||
<Icon name="mynaui:x-solid" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="currentPage === 'page2'">
|
||||
<p class="text-sm text-[var(--color-subtle)] mb-4">Settings page 2 content with some details.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4 mt-4">
|
||||
<div class="p-4 bg-[var(--color-highlight-low)] rounded-lg text-sm">Item 1</div>
|
||||
<div class="p-4 bg-[var(--color-highlight-low)] rounded-lg text-sm">Item 2</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="flex-1 p-6 ml-1 mt-1 bg-[var(--color-neutral)] overflow-y-auto border rounded-lg border-[var(--color-highlight)]">
|
||||
<div v-if="currentPage === 'page1'">
|
||||
<p class="text-sm text-[var(--color-subtle)] mb-4">Settings page 1 content. Try adding a
|
||||
task to
|
||||
the queue
|
||||
below.
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="accent" @click="simulateTask">
|
||||
Simulate Task (2s)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="currentPage === 'page2'">
|
||||
<p class="text-sm text-[var(--color-subtle)] mb-4">Settings page 2 content with some
|
||||
details.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4 mt-4">
|
||||
<div class="p-4 bg-[var(--color-highlight-low)] rounded-lg text-sm">Item 1</div>
|
||||
<div class="p-4 bg-[var(--color-highlight-low)] rounded-lg text-sm">Item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="currentPage === 'page3'">
|
||||
<p class="text-sm text-[var(--color-subtle)] mb-4">Settings page 3 content.</p>
|
||||
<button class="accent" @click="simulateTask">Run Task</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="currentPage === 'page3'">
|
||||
<p class="text-sm text-[var(--color-subtle)] mb-4">Settings page 3 content.</p>
|
||||
<button class="accent" @click="simulateTask">Run Task</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user