initiation librodrome

app/layouts/admin.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="admin-layout">
+    <AdminSidebar />
+    <main class="admin-main">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.admin-layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  min-height: 100dvh;
+}
+
+.admin-main {
+  padding: 2rem;
+  overflow-y: auto;
+  max-height: 100dvh;
+}
+
+@media (max-width: 768px) {
+  .admin-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="app-layout grid grid-cols-1 min-h-dvh">
+    <LayoutTheHeader />
+    <main class="pb-[var(--player-height)]">
+      <slot />
+    </main>
+    <LayoutTheFooter />
+  </div>
+</template>
+
+<style scoped>
+.app-layout {
+  grid-template-rows: auto 1fr auto;
+}
+</style>

app/layouts/reading.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="app-layout grid grid-cols-1 min-h-dvh">
+    <LayoutTheHeader />
+    <div class="reading-layout pb-[var(--player-height)]">
+      <aside class="chapter-sidebar hidden lg:block">
+        <BookChapterNav />
+      </aside>
+      <main class="reading-main">
+        <slot />
+      </main>
+    </div>
+    <LayoutTheFooter />
+  </div>
+</template>
+
+<style scoped>
+.app-layout {
+  grid-template-rows: auto 1fr auto;
+}
+
+.reading-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  max-width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .reading-layout {
+    grid-template-columns: var(--sidebar-width) 1fr;
+  }
+}
+
+.chapter-sidebar {
+  position: sticky;
+  top: var(--header-height);
+  height: calc(100dvh - var(--header-height));
+  overflow-y: auto;
+  border-right: 1px solid hsl(0 0% 100% / 0.08);
+  padding: 1.5rem;
+}
+
+.reading-main {
+  padding: 2rem 1.5rem;
+  max-width: 65ch;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .reading-main {
+    padding: 3rem 2rem;
+  }
+}
+</style>