@xleddyl/nuxt-cms 0.1.60 → 0.2.0

package/dist/runtime/app/composables/cms-media-library.js

@@ -0,0 +1,151 @@
+import {
+  expandMediaFolders,
+  isWithinMediaFolder,
+  mediaFolderAncestors,
+  mediaFolderParent
+} from "../../shared/index.js";
+import { computed, ref } from "#imports";
+import { errorMessage } from "../utils/ui.js";
+import { useCmsToast } from "./cms-toast.js";
+const endpoint = "/api/cms/admin/media";
+export function useCmsMediaLibrary() {
+  const toast = useCmsToast();
+  const items = ref([]);
+  const serverFolders = ref([]);
+  const source = ref(null);
+  const loading = ref(true);
+  const errorCode = ref(null);
+  async function reload(options = {}) {
+    if (!options.quiet) loading.value = true;
+    errorCode.value = null;
+    try {
+      const result = await $fetch(endpoint);
+      items.value = result.items;
+      serverFolders.value = result.folders ?? [];
+      source.value = result.source;
+    } catch (err) {
+      errorCode.value = err.statusCode ?? 500;
+    } finally {
+      loading.value = false;
+    }
+  }
+  const folders = computed(
+    () => expandMediaFolders([...serverFolders.value, ...items.value.map((item) => item.folder)])
+  );
+  const stats = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const folder of folders.value) map.set(folder, { files: 0, folders: 0 });
+    for (const folder of folders.value) {
+      const parent = mediaFolderParent(folder);
+      if (parent) map.get(parent).folders++;
+    }
+    for (const item of items.value) {
+      if (!item.folder) continue;
+      for (const folder of mediaFolderAncestors(item.folder)) {
+        const entry = map.get(folder);
+        if (entry) entry.files++;
+      }
+    }
+    return map;
+  });
+  function childFolders(parent) {
+    return folders.value.filter((folder) => mediaFolderParent(folder) === parent);
+  }
+  function itemsWithin(folder) {
+    return items.value.filter((item) => isWithinMediaFolder(item.folder, folder));
+  }
+  async function attempt(title, action) {
+    try {
+      await action();
+      return true;
+    } catch (err) {
+      toast.add({ title, description: errorMessage(err), color: "error" });
+      return false;
+    }
+  }
+  function createFolder(name) {
+    return attempt("Could not create the folder", async () => {
+      await $fetch(`${endpoint}/folders`, { method: "POST", body: { name } });
+      await reload({ quiet: true });
+    });
+  }
+  function moveFolder(from, to) {
+    return attempt("Could not move the folder", async () => {
+      await $fetch(`${endpoint}/folders`, { method: "PATCH", body: { from, to } });
+      await reload({ quiet: true });
+    });
+  }
+  function deleteFolder(name) {
+    return attempt("Could not delete the folder", async () => {
+      await $fetch(`${endpoint}/folders`, {
+        method: "DELETE",
+        query: { name, recursive: "true" }
+      });
+      await reload({ quiet: true });
+    });
+  }
+  function moveItems(keys, folder) {
+    return attempt("Could not move the files", async () => {
+      await $fetch(`${endpoint}/move`, { method: "POST", body: { keys, folder } });
+      await reload({ quiet: true });
+    });
+  }
+  function deleteItems(keys) {
+    return attempt("Delete failed", async () => {
+      await $fetch(`${endpoint}/delete`, { method: "POST", body: { keys } });
+      await reload({ quiet: true });
+    });
+  }
+  function updateItem(key, changes) {
+    return attempt("Save failed", async () => {
+      await $fetch(endpoint, { method: "PUT", body: { key, ...changes } });
+      await reload({ quiet: true });
+    });
+  }
+  async function usage(keys) {
+    if (!keys.length) return {};
+    try {
+      const result = await $fetch(`${endpoint}/usage`, {
+        method: "POST",
+        body: { keys }
+      });
+      return result.usage;
+    } catch {
+      return null;
+    }
+  }
+  return {
+    items,
+    source,
+    loading,
+    errorCode,
+    folders,
+    stats,
+    reload,
+    childFolders,
+    itemsWithin,
+    createFolder,
+    moveFolder,
+    deleteFolder,
+    moveItems,
+    deleteItems,
+    updateItem,
+    usage
+  };
+}
+export function usageSummary(usage, keys) {
+  if (!usage) return "";
+  const entries = /* @__PURE__ */ new Set();
+  let used = 0;
+  for (const key of keys) {
+    const list = usage[key] ?? [];
+    if (list.length) used++;
+    for (const item of list) entries.add(`${item.collection}:${item.id ?? ""}`);
+  }
+  if (!used) return "";
+  const files = keys.length === 1 ? "It is" : `${used} of them are`;
+  return `${files} used in ${entries.size} entr${entries.size === 1 ? "y" : "ies"}, which will keep a broken link.`;
+}
+export function usageLink(usage) {
+  return usage.id === null ? `/cms/${usage.collection}` : `/cms/${usage.collection}/${usage.id}`;
+}

package/dist/runtime/app/composables/cms-media-uploader.d.ts

@@ -0,0 +1,22 @@
+import type { MediaItem } from '../../shared/index.js';
+export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+export interface UploadEntry {
+    file: File;
+    directory: string | null;
+}
+export interface UploadTree {
+    files: UploadEntry[];
+    directories: string[];
+}
+export declare function uploadTreeFromFiles(list: FileList | File[]): UploadTree;
+export declare function uploadTreeFromDrop(dataTransfer: DataTransfer): Promise<UploadTree>;
+export declare function useCmsMediaUploader(): {
+    upload: (source: FileList | File[] | UploadTree, options: {
+        folder: string | null;
+        accept?: string;
+        multiple?: boolean;
+    }) => Promise<MediaItem[]>;
+    uploading: import("vue").Ref<boolean, boolean>;
+    done: import("vue").Ref<number, number>;
+    total: import("vue").Ref<number, number>;
+};

package/dist/runtime/app/composables/cms-media-uploader.js

@@ -0,0 +1,244 @@
+import {
+  formatFileSize,
+  MEDIA_FOLDER_MAX_DEPTH,
+  mediaFolderSegments,
+  normalizeMediaFolder
+} from "../../shared/index.js";
+import { ref } from "#imports";
+import { useCmsRuntime } from "./cms-runtime.js";
+import { useCmsToast } from "./cms-toast.js";
+async function imageDimensions(file) {
+  try {
+    const bitmap = await createImageBitmap(file);
+    const dims = { width: bitmap.width, height: bitmap.height };
+    bitmap.close();
+    return dims;
+  } catch {
+    return {};
+  }
+}
+function videoDimensions(file) {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const video = document.createElement("video");
+    const settle = (dims) => {
+      URL.revokeObjectURL(url);
+      resolve(dims);
+    };
+    video.preload = "metadata";
+    video.muted = true;
+    video.onloadedmetadata = () => settle(
+      video.videoWidth && video.videoHeight ? { width: video.videoWidth, height: video.videoHeight } : {}
+    );
+    video.onerror = () => settle({});
+    video.src = url;
+  });
+}
+async function mediaDimensions(file) {
+  if (file.type.startsWith("image/")) return imageDimensions(file);
+  if (file.type.startsWith("video/")) return videoDimensions(file);
+  return {};
+}
+export function matchesAccept(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((raw) => {
+    const pattern = raw.trim().toLowerCase();
+    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
+    return file.type.toLowerCase() === pattern;
+  });
+}
+const UPLOAD_CONCURRENCY = 4;
+function isHiddenName(name) {
+  return name.startsWith(".");
+}
+function joinPath(parent, name) {
+  return parent ? `${parent}/${name}` : name;
+}
+export function uploadTreeFromFiles(list) {
+  const files = [];
+  const directories = /* @__PURE__ */ new Set();
+  for (const file of Array.from(list)) {
+    const segments = (file.webkitRelativePath || file.name).split("/").filter(Boolean);
+    if (segments.some(isHiddenName)) continue;
+    const directory = segments.slice(0, -1).join("/") || null;
+    if (directory) directories.add(directory);
+    files.push({ file, directory });
+  }
+  return { files, directories: [...directories] };
+}
+function readDirectory(entry) {
+  const reader = entry.createReader();
+  const all = [];
+  return new Promise((resolve, reject) => {
+    const next = () => reader.readEntries((batch) => {
+      if (!batch.length) return resolve(all);
+      all.push(...batch);
+      next();
+    }, reject);
+    next();
+  });
+}
+function entryFile(entry) {
+  return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+async function walkEntry(entry, parent, tree) {
+  if (isHiddenName(entry.name)) return;
+  if (entry.isFile) {
+    tree.files.push({ file: await entryFile(entry), directory: parent });
+    return;
+  }
+  if (!entry.isDirectory) return;
+  const directory = joinPath(parent, entry.name);
+  tree.directories.push(directory);
+  const children = await readDirectory(entry);
+  for (const child of children) await walkEntry(child, directory, tree);
+}
+export function uploadTreeFromDrop(dataTransfer) {
+  const files = Array.from(dataTransfer.files);
+  const entries = Array.from(dataTransfer.items ?? []).filter((item) => item.kind === "file").map((item) => item.webkitGetAsEntry?.() ?? null).filter((entry) => !!entry);
+  if (!entries.some((entry) => entry.isDirectory)) {
+    return Promise.resolve(uploadTreeFromFiles(files));
+  }
+  return (async () => {
+    const tree = { files: [], directories: [] };
+    for (const entry of entries) await walkEntry(entry, null, tree);
+    return tree;
+  })();
+}
+async function mapWithConcurrency(list, limit, task) {
+  const results = new Array(list.length);
+  let cursor = 0;
+  const worker = async () => {
+    while (cursor < list.length) {
+      const index = cursor++;
+      try {
+        results[index] = { status: "fulfilled", value: await task(list[index]) };
+      } catch (reason) {
+        results[index] = { status: "rejected", reason };
+      }
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(limit, list.length) }, worker));
+  return results;
+}
+function targetFolder(base, directory) {
+  const joined = [base, directory].filter(Boolean).join("/");
+  return {
+    folder: normalizeMediaFolder(joined),
+    flattened: mediaFolderSegments(joined).length > MEDIA_FOLDER_MAX_DEPTH
+  };
+}
+function isWithinOrAbove(folder, other) {
+  return other === folder || other.startsWith(`${folder}/`);
+}
+export function useCmsMediaUploader() {
+  const toast = useCmsToast();
+  const { mediaMaxFileSize } = useCmsRuntime();
+  const uploading = ref(false);
+  const done = ref(0);
+  const total = ref(0);
+  async function uploadOne(file, folder) {
+    const presign = await $fetch("/api/cms/admin/media/presign", {
+      method: "POST",
+      body: {
+        filename: file.name,
+        contentType: file.type || "application/octet-stream",
+        size: file.size,
+        folder
+      }
+    });
+    const res = await fetch(presign.uploadUrl, {
+      method: "PUT",
+      headers: presign.headers,
+      body: file
+    });
+    if (!res.ok) throw new Error(`Upload failed (${res.status})`);
+    const item = await $fetch("/api/cms/admin/media", {
+      method: "POST",
+      body: {
+        key: presign.key,
+        folder: presign.folder,
+        mime: file.type || null,
+        size: file.size,
+        ...await mediaDimensions(file)
+      }
+    });
+    done.value++;
+    return item;
+  }
+  async function createFolders(folders) {
+    const results = await mapWithConcurrency(
+      folders,
+      UPLOAD_CONCURRENCY,
+      (name) => $fetch("/api/cms/admin/media/folders", {
+        method: "POST",
+        body: { name }
+      })
+    );
+    const failed = results.filter((r) => r.status === "rejected").length;
+    if (failed)
+      toast.add({
+        title: `${failed} folder${failed > 1 ? "s" : ""} could not be created`,
+        color: "error"
+      });
+  }
+  async function upload(source, options) {
+    const tree = Array.isArray(source) || source instanceof FileList ? uploadTreeFromFiles(source) : source;
+    const all = tree.files;
+    let files = all.filter((entry) => matchesAccept(entry.file, options.accept));
+    const rejected = all.length - files.length;
+    if (rejected) {
+      toast.add({
+        title: `${rejected} file${rejected > 1 ? "s" : ""} of an unsupported type skipped`,
+        color: "error"
+      });
+    }
+    for (const { file } of files.filter((entry) => entry.file.size > mediaMaxFileSize)) {
+      toast.add({
+        title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
+        color: "error"
+      });
+    }
+    files = files.filter((entry) => entry.file.size <= mediaMaxFileSize);
+    const nested = options.multiple !== false;
+    if (!nested) files = files.slice(0, 1).map((entry) => ({ ...entry, directory: null }));
+    const directories = nested ? tree.directories : [];
+    if (!files.length && !directories.length || uploading.value) return [];
+    const planned = files.map((entry) => ({
+      file: entry.file,
+      ...targetFolder(options.folder, entry.directory)
+    }));
+    const fileFolders = planned.map((entry) => entry.folder).filter((f) => !!f);
+    const emptyFolders = [
+      ...new Set(
+        directories.map((directory) => targetFolder(options.folder, directory).folder).filter((folder) => !!folder)
+      )
+    ].filter((folder) => !fileFolders.some((other) => isWithinOrAbove(folder, other)));
+    if (planned.some((entry) => entry.flattened)) {
+      toast.add({
+        title: `Folders nest up to ${MEDIA_FOLDER_MAX_DEPTH} levels`,
+        description: "Files in deeper folders were uploaded to the deepest allowed folder."
+      });
+    }
+    uploading.value = true;
+    done.value = 0;
+    total.value = planned.length;
+    try {
+      if (emptyFolders.length) await createFolders(emptyFolders);
+      const results = await mapWithConcurrency(
+        planned,
+        UPLOAD_CONCURRENCY,
+        (entry) => uploadOne(entry.file, entry.folder)
+      );
+      const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
+      const failed = results.length - ok.length;
+      if (failed)
+        toast.add({ title: `${failed} upload${failed > 1 ? "s" : ""} failed`, color: "error" });
+      return ok;
+    } finally {
+      uploading.value = false;
+    }
+  }
+  return { upload, uploading, done, total };
+}

package/dist/runtime/app/composables/cms-settings.d.ts

@@ -0,0 +1,13 @@
+import type { CmsEntrySettings, CmsFormLayout, CmsSettingsMap } from '#nuxt-cms';
+export declare function useCmsSettingsState(): import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
+export declare function loadCmsSettings(): Promise<void>;
+export declare function useCmsSettings(): {
+    settings: import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
+    save: (name: string, value: CmsEntrySettings) => Promise<void>;
+    reset: (name: string) => Promise<void>;
+};
+export declare function entryFields(name: string): Record<string, import("#nuxt-cms").FieldConfig>;
+export declare function defaultFormLayout(name: string, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
+export declare function entryFormLayout(name: string, settings: CmsSettingsMap, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
+export declare function listExtraColumns(name: string): string[];
+export declare function entryListColumns(name: string, settings: CmsSettingsMap): string[];

package/dist/runtime/app/composables/cms-settings.js

@@ -0,0 +1,59 @@
+import { layoutFromConfig, pageAllFields, resolveFormLayout, resolveListColumns } from "#nuxt-cms";
+import { useFetch, useState } from "#imports";
+import cmsConfig from "#cms-config";
+import { cmsApi } from "../utils/api.js";
+const SETTINGS_ENDPOINT = "/api/cms/admin/settings";
+export function useCmsSettingsState() {
+  return useState("cms-settings", () => ({}));
+}
+export async function loadCmsSettings() {
+  const state = useCmsSettingsState();
+  const { data } = await useFetch(SETTINGS_ENDPOINT, { key: "cms-settings" });
+  if (data.value) state.value = data.value;
+}
+export function useCmsSettings() {
+  const settings = useCmsSettingsState();
+  async function save(name, value) {
+    const saved = await cmsApi(`${SETTINGS_ENDPOINT}/${name}`, {
+      method: "PUT",
+      body: value
+    });
+    settings.value = { ...settings.value, [name]: saved };
+  }
+  async function reset(name) {
+    await cmsApi(`${SETTINGS_ENDPOINT}/${name}`, { method: "DELETE" });
+    const next = { ...settings.value };
+    delete next[name];
+    settings.value = next;
+  }
+  return { settings, save, reset };
+}
+function entryOf(name) {
+  return cmsConfig[name];
+}
+export function entryFields(name) {
+  const entry = entryOf(name);
+  if (!entry) return {};
+  return entry.kind === "page" ? pageAllFields(entry) : entry.fields;
+}
+export function defaultFormLayout(name, fields = entryFields(name)) {
+  return resolveFormLayout(fields, layoutFromConfig(entryOf(name)?.layout));
+}
+export function entryFormLayout(name, settings, fields = entryFields(name)) {
+  const saved = settings[name]?.layout;
+  return saved ? resolveFormLayout(fields, saved) : defaultFormLayout(name, fields);
+}
+export function listExtraColumns(name) {
+  const entry = entryOf(name);
+  return entry?.kind === "collection" && entry.drafts ? ["status"] : [];
+}
+export function entryListColumns(name, settings) {
+  const entry = entryOf(name);
+  if (!entry) return [];
+  return resolveListColumns(
+    entry.fields,
+    settings[name]?.columns,
+    entry.list,
+    listExtraColumns(name)
+  );
+}

package/dist/runtime/app/composables/cms-theme.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+export type CmsTheme = 'light' | 'dark' | 'system';
+export declare const CMS_THEMES: {
+    value: CmsTheme;
+    label: string;
+    icon: string;
+}[];
+export declare function useCmsTheme(): import("nuxt/app").CookieRef<CmsTheme>;
+export declare function setCmsTheme(theme: Ref<CmsTheme>, value: CmsTheme): void;

package/dist/runtime/app/composables/cms-theme.js

@@ -0,0 +1,27 @@
+import { nextTick, useCookie } from "#imports";
+export const CMS_THEMES = [
+  { value: "light", label: "Light", icon: "sun" },
+  { value: "dark", label: "Dark", icon: "moon" },
+  { value: "system", label: "System", icon: "computer-desktop" }
+];
+export function useCmsTheme() {
+  return useCookie("cms-theme", {
+    default: () => "system",
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: "lax",
+    path: "/"
+  });
+}
+export function setCmsTheme(theme, value) {
+  if (value === theme.value) return;
+  const doc = document;
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!doc.startViewTransition || reduced) {
+    theme.value = value;
+    return;
+  }
+  doc.startViewTransition(async () => {
+    theme.value = value;
+    await nextTick();
+  });
+}

package/dist/runtime/app/layouts/cms-admin.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_19: {};
+declare var __VLS_34: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/cms-admin.vue

@@ -1,8 +1,14 @@
 <template>
-   <div class="cms-scope cms-canvas min-h-screen">
-      <div class="cms-shell">
+   <div class="cms-scope cms-canvas min-h-screen" :data-theme="theme">
+      <div class="cms-shell" :class="{ 'is-nav-open': navOpen }">
          <aside class="cms-sidebar">
-            <div class="cms-sidebar-brand">nuxt<span class="cms-accent">·</span>cms</div>
+            <div class="cms-sidebar-brand">
+               <CmsBrandMark />
+               <div class="cms-brand-text">
+                  <span class="cms-brand-name">nuxt-cms</span>
+                  <span class="cms-brand-meta">Content studio</span>
+               </div>
+            </div>
 
             <nav class="cms-sidebar-nav">
                <div v-for="group in groups" :key="group.title" class="cms-sidebar-group">
@@ -14,49 +20,81 @@
                      :key="link.name"
                      :to="link.to"
                      class="cms-navlink"
-                     :class="{ 'is-active': route.path === link.to }"
+                     :class="{ 'is-active': isActive(link.to) }"
                   >
-                     <CmsIcon :name="group.icon" class="cms-navlink-icon size-4 shrink-0" />
+                     <CmsIcon
+                        :name="link.icon ?? group.icon"
+                        class="cms-navlink-icon size-4 shrink-0"
+                     />
                      <span class="truncate">{{ link.label }}</span>
                   </NuxtLink>
                </div>
             </nav>
 
             <div class="cms-sidebar-footer">
-               <CmsButton
-                  label="Sign out"
-                  icon="arrow-right-on-rectangle"
-                  trailing-icon
-                  block
-                  variant="ghost"
-                  color="neutral"
-                  size="xs"
-                  @click="logout"
-               />
+               <button
+                  type="button"
+                  class="cms-account"
+                  :class="{ 'is-open': settingsOpen }"
+                  aria-label="Open settings"
+                  @click="openSettings"
+               >
+                  <span class="cms-avatar">{{ initial }}</span>
+                  <span class="cms-account-text">
+                     <span class="cms-account-name">{{ displayName }}</span>
+                     <span class="cms-account-email" :title="email">{{ email }}</span>
+                  </span>
+                  <CmsIcon name="ellipsis-horizontal" class="cms-account-more size-4" />
+               </button>
             </div>
          </aside>
 
+         <div class="cms-sidebar-scrim" @click="navOpen = false" />
+
          <main class="cms-main">
+            <header class="cms-topbar">
+               <CmsButton
+                  icon="bars-3"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  aria-label="Open navigation"
+                  @click="navOpen = true"
+               />
+               <CmsBrandMark />
+               <span class="cms-brand-name">nuxt-cms</span>
+            </header>
             <div class="cms-main-inner">
                <slot />
             </div>
          </main>
       </div>
 
+      <CmsSettingsModal v-model:open="settingsOpen" v-model:theme="theme" @logout="logout" />
+      <CmsWelcomeModal />
       <CmsToaster />
       <CmsConfirmModal />
    </div>
 </template>
 
 <script setup>
-import { computed, navigateTo, useRoute, useUserSession } from "#imports";
+import { computed, navigateTo, ref, useRoute, useUserSession, watch } from "#imports";
 import cmsConfig from "#cms-config";
+import { useCmsTheme } from "../composables/cms-theme";
+import { useCmsAccount } from "../composables/cms-account";
+import { loadCmsSettings } from "../composables/cms-settings";
 const route = useRoute();
 const { clear } = useUserSession();
+const { email, displayName, initial } = useCmsAccount();
+const theme = useCmsTheme();
+const navOpen = ref(false);
+const settingsOpen = ref(false);
+await loadCmsSettings();
 const links = Object.entries(cmsConfig).map(([name, entry]) => ({
   name,
   label: entry.label,
   kind: entry.kind,
+  icon: entry.icon,
   to: `/cms/${name}`
 }));
 const groups = computed(
@@ -79,11 +117,27 @@ const groups = computed(
     {
       title: "Library",
       icon: "photo",
-      links: [{ name: "media", label: "Media", kind: "media", to: "/cms/media" }]
+      links: [
+        { name: "media", label: "Media", kind: "media", icon: void 0, to: "/cms/media" }
+      ]
     }
   ].filter((g) => g.links.length)
 );
+function isActive(to) {
+  return route.path === to || route.path.startsWith(`${to}/`);
+}
+watch(
+  () => route.fullPath,
+  () => {
+    navOpen.value = false;
+  }
+);
+function openSettings() {
+  navOpen.value = false;
+  settingsOpen.value = true;
+}
 async function logout() {
+  settingsOpen.value = false;
   await clear();
   await navigateTo("/cms/login");
 }