@commonpub/layer 0.10.1 → 0.13.0

package/components/homepage/HeroSection.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+defineProps<{ config: HomepageSectionConfig }>();
+
+const { contests: contestsEnabled } = useFeatures();
+const { data: contests } = await useFetch('/api/contests', { query: { limit: 3 }, lazy: true });
+
+const activeContest = computed(() => {
+  const items = (contests.value as { items?: Array<Record<string, unknown>> })?.items;
+  return items?.find((c) => c.status === 'active') ?? null;
+});
+
+const heroDismissed = ref(false);
+</script>
+
+<template>
+  <section v-if="!heroDismissed" class="cpub-hero-banner">
+    <div class="cpub-hero-grid-bg" />
+    <div class="cpub-hero-gradient" />
+    <button class="cpub-hero-dismiss" title="Dismiss" @click="heroDismissed = true">
+      <i class="fa-solid fa-xmark"></i>
+    </button>
+    <div class="cpub-hero-inner">
+      <div class="cpub-hero-content">
+        <template v-if="contestsEnabled && activeContest">
+          <div class="cpub-hero-eyebrow">
+            <span class="cpub-hero-badge cpub-hero-badge-live"><span class="cpub-live-dot" /> Live Contest</span>
+            <span class="cpub-hero-badge">{{ activeContest.entryCount ?? 0 }} entries</span>
+          </div>
+          <h1 class="cpub-hero-title">{{ activeContest.title }}</h1>
+          <p v-if="activeContest.description" class="cpub-hero-excerpt">{{ activeContest.description }}</p>
+          <div class="cpub-hero-actions">
+            <NuxtLink :to="`/contests/${activeContest.slug}`" class="cpub-btn cpub-btn-primary"><i class="fa-solid fa-trophy"></i> Enter Contest</NuxtLink>
+            <NuxtLink :to="`/contests/${activeContest.slug}`" class="cpub-btn"><i class="fa-solid fa-circle-info"></i> View Details</NuxtLink>
+          </div>
+        </template>
+        <template v-else>
+          <div class="cpub-hero-eyebrow">
+            <span class="cpub-hero-badge cpub-hero-badge-live"><span class="cpub-live-dot" /> Open Source</span>
+          </div>
+          <h1 class="cpub-hero-title">Build. Document.<br><span>Share.</span></h1>
+          <p class="cpub-hero-excerpt">
+            CommonPub is an open platform for maker communities. Document your builds with rich editors, join hubs, learn with structured paths, and share with the world.
+          </p>
+          <div class="cpub-hero-actions">
+            <NuxtLink to="/create" class="cpub-btn cpub-btn-primary"><i class="fa-solid fa-plus"></i> Start Building</NuxtLink>
+            <NuxtLink to="/explore" class="cpub-btn"><i class="fa-solid fa-compass"></i> Explore</NuxtLink>
+          </div>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-hero-banner { position: relative; background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); overflow: hidden; min-height: 200px; display: flex; align-items: stretch; }
+.cpub-hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.25; }
+.cpub-hero-gradient { position: absolute; inset: 0; background: var(--surface2); opacity: 0.5; }
+.cpub-hero-dismiss { position: absolute; top: 12px; right: 16px; background: transparent; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; padding: 4px; z-index: 2; }
+.cpub-hero-dismiss:hover { color: var(--text-dim); }
+.cpub-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 36px 32px; width: 100%; display: flex; align-items: center; gap: 48px; }
+.cpub-hero-content { flex: 1; }
+.cpub-hero-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.cpub-hero-badge { font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow); color: var(--yellow); }
+.cpub-hero-badge-live { background: var(--green-bg); border-color: var(--green); color: var(--green); display: flex; align-items: center; gap: 5px; }
+.cpub-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: cpub-pulse 2s ease-in-out infinite; }
+@keyframes cpub-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.cpub-hero-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
+.cpub-hero-title span { color: var(--accent); }
+.cpub-hero-excerpt { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; max-width: 560px; }
+.cpub-hero-actions { display: flex; gap: 8px; }
+</style>

package/components/homepage/HomepageSectionRenderer.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { HomepageSection } from '@commonpub/server';
+
+defineProps<{
+  sections: HomepageSection[];
+  /** Which zone to render: 'main' for feed column, 'sidebar' for sidebar */
+  zone: 'main' | 'sidebar' | 'full-width';
+}>();
+
+const features = useFeatures();
+
+function isFeatureEnabled(featureGate?: string): boolean {
+  if (!featureGate) return true;
+  return (features.features as unknown as Record<string, boolean>)?.[featureGate] ?? true;
+}
+
+/** Section types that render in the full-width zone (above the 2-column layout) */
+const FULL_WIDTH_TYPES = new Set(['hero']);
+
+/** Section types that render in the sidebar */
+const SIDEBAR_TYPES = new Set(['stats', 'contests', 'hubs']);
+
+function sectionZone(section: HomepageSection): 'full-width' | 'main' | 'sidebar' {
+  if (FULL_WIDTH_TYPES.has(section.type)) return 'full-width';
+  if (SIDEBAR_TYPES.has(section.type)) return 'sidebar';
+  return 'main';
+}
+</script>
+
+<template>
+  <template v-for="section in sections" :key="section.id">
+    <template v-if="section.enabled && sectionZone(section) === zone && isFeatureEnabled(section.config.featureGate)">
+      <HomepageHeroSection
+        v-if="section.type === 'hero'"
+        :config="section.config"
+      />
+      <HomepageEditorialSection
+        v-else-if="section.type === 'editorial'"
+        :config="section.config"
+      />
+      <HomepageContentGridSection
+        v-else-if="section.type === 'content-grid'"
+        :config="section.config"
+        :title="section.title"
+      />
+      <HomepageContestsSection
+        v-else-if="section.type === 'contests'"
+        :config="section.config"
+      />
+      <HomepageHubsSection
+        v-else-if="section.type === 'hubs'"
+        :config="section.config"
+      />
+      <HomepageStatsSection
+        v-else-if="section.type === 'stats'"
+      />
+      <HomepageCustomHtmlSection
+        v-else-if="section.type === 'custom-html'"
+        :config="section.config"
+        :title="section.title"
+      />
+    </template>
+  </template>
+</template>

package/components/homepage/HubsSection.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { HomepageSectionConfig } from '@commonpub/server';
+
+const props = defineProps<{ config: HomepageSectionConfig }>();
+
+const limit = computed(() => props.config.limit ?? 4);
+const { data: communities, pending } = await useFetch('/api/hubs', { query: { limit }, lazy: true });
+
+const { user } = useAuth();
+const isAuthenticated = computed(() => !!user.value);
+const joinedHubs = ref(new Set<string>());
+const toast = useToast();
+
+async function handleHubJoin(hubSlug: string): Promise<void> {
+  if (!isAuthenticated.value) {
+    await navigateTo('/auth/login?redirect=/');
+    return;
+  }
+  try {
+    await $fetch(`/api/hubs/${hubSlug}/join`, { method: 'POST' });
+    joinedHubs.value.add(hubSlug);
+    toast.success('Joined hub!');
+  } catch {
+    toast.error('Failed to join hub');
+  }
+}
+</script>
+
+<template>
+  <div v-if="pending" class="cpub-sb-card">
+    <div class="cpub-sb-head">Trending Hubs</div>
+    <div class="cpub-loading-state"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+  </div>
+  <div v-else-if="communities?.items?.length" class="cpub-sb-card">
+    <div class="cpub-sb-head">Trending Hubs <NuxtLink to="/hubs">Browse</NuxtLink></div>
+    <div v-for="hub in communities.items" :key="hub.id" class="cpub-hub-item">
+      <div class="cpub-hub-icon">
+        <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" class="cpub-hub-icon-img" />
+        <i v-else class="fa-solid fa-users"></i>
+      </div>
+      <div class="cpub-hub-info">
+        <NuxtLink :to="(hub as Record<string, unknown>).source === 'federated' ? `/federated-hubs/${hub.id}` : `/hubs/${hub.slug}`" class="cpub-hub-name">{{ hub.name }}</NuxtLink>
+        <div class="cpub-hub-members">{{ hub.memberCount ?? 0 }} members</div>
+      </div>
+      <button v-if="joinedHubs.has(hub.slug)" class="cpub-btn-joined" disabled><i class="fa-solid fa-check"></i> Joined</button>
+      <button v-else class="cpub-btn-join" @click.prevent="handleHubJoin(hub.slug)">Join</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sb-card { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 16px; margin-bottom: 16px; }
+.cpub-sb-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding-bottom: 10px; border-bottom: var(--border-width-default) solid var(--border2); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
+.cpub-sb-head a { color: var(--accent); text-decoration: none; font-size: 10px; }
+.cpub-hub-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--border-width-default) solid var(--border2); }
+.cpub-hub-item:last-child { border-bottom: none; }
+.cpub-hub-icon { width: 32px; height: 32px; background: var(--accent-bg); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--accent); flex-shrink: 0; overflow: hidden; }
+.cpub-hub-icon-img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-hub-info { flex: 1; min-width: 0; }
+.cpub-hub-name { font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; display: block; }
+.cpub-hub-name:hover { color: var(--accent); }
+.cpub-hub-members { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.cpub-btn-join { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border: var(--border-width-default) solid var(--accent); color: var(--accent); background: none; cursor: pointer; }
+.cpub-btn-join:hover { background: var(--accent-bg); }
+.cpub-btn-joined { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border: var(--border-width-default) solid var(--green-border); color: var(--green); background: var(--green-bg); cursor: default; display: flex; align-items: center; gap: 3px; }
+</style>

package/components/homepage/StatsSection.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { hubs: hubsEnabled } = useFeatures();
+const { data: stats, pending } = await useFetch('/api/stats', { lazy: true });
+</script>
+
+<template>
+  <div class="cpub-sb-card">
+    <div class="cpub-sb-head">Platform Stats</div>
+    <div v-if="pending" class="cpub-loading-state"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+    <div v-else class="cpub-stats-grid">
+      <div class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ stats?.content?.byType?.project ?? 0 }}</span>
+        <span class="cpub-stat-lbl">Projects</span>
+      </div>
+      <div class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ (stats?.content?.byType?.blog ?? 0) + (stats?.content?.byType?.article ?? 0) }}</span>
+        <span class="cpub-stat-lbl">Posts</span>
+      </div>
+      <div class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ stats?.users?.total ?? 0 }}</span>
+        <span class="cpub-stat-lbl">Members</span>
+      </div>
+      <div v-if="hubsEnabled" class="cpub-stat-block">
+        <span class="cpub-stat-num">{{ stats?.hubs?.total ?? 0 }}</span>
+        <span class="cpub-stat-lbl">Hubs</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sb-card { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 16px; margin-bottom: 16px; }
+.cpub-sb-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding-bottom: 10px; border-bottom: var(--border-width-default) solid var(--border2); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
+.cpub-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.cpub-stat-block { text-align: center; padding: 8px 0; }
+.cpub-stat-num { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); }
+.cpub-stat-lbl { display: block; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
+</style>

package/components/nav/MobileNavRenderer.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+defineProps<{
+  items: NavItem[];
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isVisible(item: NavItem): boolean {
+  if (item.featureGate && !featureMap.value[item.featureGate]) return false;
+  if (item.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (item.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+
+function visibleChildren(item: NavItem): NavItem[] {
+  return (item.children ?? []).filter(c => isVisible(c));
+}
+</script>
+
+<template>
+  <nav class="cpub-mobile-nav" aria-label="Mobile navigation">
+    <template v-for="item in items" :key="item.id">
+      <!-- Dropdown → section label + indented children -->
+      <template v-if="item.type === 'dropdown' && isVisible(item) && visibleChildren(item).length > 0">
+        <div class="cpub-mobile-section-label">{{ item.label }}</div>
+        <template v-for="child in visibleChildren(item)" :key="child.id">
+          <span
+            v-if="child.disabled"
+            class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"
+          >
+            <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          </span>
+          <a
+            v-else-if="child.type === 'external' && child.href"
+            :href="child.href"
+            target="_blank"
+            rel="noopener"
+            class="cpub-mobile-link cpub-mobile-link--indent"
+            @click="emit('close')"
+          >
+            <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          </a>
+          <NuxtLink
+            v-else-if="child.route"
+            :to="child.route"
+            class="cpub-mobile-link cpub-mobile-link--indent"
+            @click="emit('close')"
+          >
+            <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          </NuxtLink>
+        </template>
+      </template>
+
+      <!-- Regular link -->
+      <template v-else-if="isVisible(item) && item.type !== 'dropdown'">
+        <a
+          v-if="item.type === 'external' && item.href"
+          :href="item.href"
+          target="_blank"
+          rel="noopener"
+          class="cpub-mobile-link"
+          @click="emit('close')"
+        >
+          <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+        </a>
+        <NuxtLink
+          v-else-if="item.route"
+          :to="item.route"
+          class="cpub-mobile-link"
+          @click="emit('close')"
+        >
+          <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+        </NuxtLink>
+      </template>
+    </template>
+  </nav>
+</template>

package/components/nav/NavDropdown.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+const props = defineProps<{
+  item: NavItem;
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [];
+  close: [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isChildVisible(child: NavItem): boolean {
+  if (child.featureGate && !featureMap.value[child.featureGate]) return false;
+  if (child.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (child.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+
+const visibleChildren = computed(() =>
+  (props.item.children ?? []).filter(c => isChildVisible(c)),
+);
+
+function handleKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Escape' && props.open) {
+    emit('close');
+  }
+}
+</script>
+
+<template>
+  <div v-if="visibleChildren.length > 0" class="cpub-nav-dropdown" @keydown="handleKeydown">
+    <button
+      class="cpub-nav-link cpub-nav-trigger"
+      :class="{ 'cpub-nav-trigger--open': open }"
+      :aria-label="`${item.label} menu`"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      @click.stop="emit('toggle')"
+      @keydown.enter.stop="emit('toggle')"
+      @keydown.space.prevent.stop="emit('toggle')"
+    >
+      <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+      <i class="fa-solid fa-chevron-down cpub-nav-caret" />
+    </button>
+    <div v-if="open" class="cpub-nav-panel" role="menu">
+      <template v-for="child in visibleChildren" :key="child.id">
+        <span
+          v-if="child.disabled"
+          class="cpub-nav-panel-item cpub-nav-panel-item--disabled"
+          role="menuitem"
+          aria-disabled="true"
+        >
+          <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+        </span>
+        <a
+          v-else-if="child.type === 'external' && child.href"
+          :href="child.href"
+          target="_blank"
+          rel="noopener"
+          class="cpub-nav-panel-item"
+          role="menuitem"
+          @click="emit('close')"
+        >
+          <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          <i class="fa-solid fa-arrow-up-right-from-square cpub-nav-external-icon"></i>
+        </a>
+        <NuxtLink
+          v-else-if="child.route"
+          :to="child.route"
+          class="cpub-nav-panel-item"
+          role="menuitem"
+          @click="emit('close')"
+        >
+          <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-nav-external-icon {
+  font-size: 8px;
+  color: var(--text-faint);
+  margin-left: 2px;
+}
+</style>

package/components/nav/NavLink.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+const props = defineProps<{
+  item: NavItem;
+}>();
+
+const isExternal = computed(() => props.item.type === 'external' && props.item.href);
+</script>
+
+<template>
+  <span v-if="item.disabled" class="cpub-nav-link cpub-nav-panel-item--disabled">
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+  </span>
+  <a
+    v-else-if="isExternal"
+    :href="item.href"
+    target="_blank"
+    rel="noopener"
+    class="cpub-nav-link"
+  >
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+    <i class="fa-solid fa-arrow-up-right-from-square cpub-nav-external-icon"></i>
+  </a>
+  <NuxtLink
+    v-else-if="item.route"
+    :to="item.route"
+    class="cpub-nav-link"
+  >
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+  </NuxtLink>
+</template>
+
+<style scoped>
+.cpub-nav-external-icon {
+  font-size: 8px;
+  opacity: 0.5;
+  margin-left: 2px;
+}
+</style>

package/components/nav/NavRenderer.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+defineProps<{
+  items: NavItem[];
+  openDropdown: string | null;
+}>();
+
+const emit = defineEmits<{
+  'toggle-dropdown': [name: string];
+  'close-dropdowns': [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isVisible(item: NavItem): boolean {
+  if (item.featureGate && !featureMap.value[item.featureGate]) return false;
+  if (item.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (item.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+</script>
+
+<template>
+  <nav class="cpub-topbar-nav" aria-label="Main navigation">
+    <template v-for="item in items" :key="item.id">
+      <NavDropdown
+        v-if="item.type === 'dropdown' && isVisible(item)"
+        :item="item"
+        :open="openDropdown === item.id"
+        @toggle="emit('toggle-dropdown', item.id)"
+        @close="emit('close-dropdowns')"
+      />
+      <NavLink
+        v-else-if="isVisible(item)"
+        :item="item"
+      />
+    </template>
+  </nav>
+</template>

package/composables/useFeatures.ts

@@ -7,6 +7,7 @@ export interface FeatureFlags {
   docs: boolean;
   video: boolean;
   contests: boolean;
+  events: boolean;
   learning: boolean;
   explainers: boolean;
   editorial: boolean;
@@ -27,6 +28,7 @@ export function useFeatures() {
     docs: computed(() => flags.docs),
     video: computed(() => flags.video),
     contests: computed(() => flags.contests),
+    events: computed(() => flags.events),
     learning: computed(() => flags.learning),
     explainers: computed(() => flags.explainers),
     editorial: computed(() => flags.editorial),

package/layouts/admin.vue

@@ -33,6 +33,9 @@ const sidebarOpen = ref(false);
           <NuxtLink to="/admin/reports" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-flag"></i> Reports</NuxtLink>
           <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
           <NuxtLink to="/admin/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</NuxtLink>
+          <NuxtLink to="/admin/homepage" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-house"></i> Homepage</NuxtLink>
+          <NuxtLink to="/admin/navigation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-bars"></i> Navigation</NuxtLink>
+          <NuxtLink to="/admin/features" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-toggle-on"></i> Features</NuxtLink>
           <NuxtLink to="/admin/federation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-globe"></i> Federation</NuxtLink>
           <NuxtLink to="/admin/settings" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
         </nav>