initial commit

app/layouts/auth.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="h-full w-full grid place-items-center">
+        <div
+            class="max-w-xs p-4 bg-[var(--color-neutral)] border border-solid border-[var(--color-highlight)] w-full rounded-lg">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style>
+input {
+    color: var(--color-text);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+
+    border-radius: calc(var(--spacing) * 1.5);
+
+    width: 100%;
+    background-color: var(--color-input);
+
+    transition-property: color, border, background-color;
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+
+    overflow: hidden;
+
+    &:focus-visible {
+        outline: none;
+    }
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { open: sidebarOpen, openSidebar } = useSidebar()
+useKeyboardShortcuts()
+</script>
+
+<template>
+    <Sidenav />
+    <main
+        class="bg-[var(--color-neutral)] flex flex-col h-full w-full border border-solid border-[var(--color-highlight)] rounded-lg overflow-hidden">
+        <div class="h-14 flex items-center justify-between px-4">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="p-2 rounded-lg text-[var(--color-text)] bg-transparent hover:bg-[var(--color-highlight)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+            </div>
+
+            <div class="flex items-center gap-2">
+                <div id="primary-loader-target"></div>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto">
+            <slot />
+        </div>
+    </main>
+    <SettingsDialog />
+    <LoadingSpinner />
+</template>