feat: replace layout with fixed left sidebar and top strip

app/layouts/default.vue

@@ -1,71 +1,84 @@
 <template>
-  <div class="min-h-screen bg-guild-900 relative">
-    <!-- Background image at top - full page width -->
-    <div
-      class="absolute inset-x-0 pointer-events-none z-0"
-      style="
-        background-image: url(&quot;/background-dither.webp&quot;);
-        background-size: 100% auto;
-        background-position: top center;
-        background-repeat: no-repeat;
-        mask-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 1) 0%,
-          rgba(0, 0, 0, 0) 100%
-        );
-        -webkit-mask-image: linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 1) 0%,
-          rgba(0, 0, 0, 0) 100%
-        );
-      "
-    />
+  <div class="site">
+    <!-- Desktop Sidebar -->
+    <AppNavigation class="sidebar-desktop" />
 
     <!-- Mobile Header -->
-    <div
-      class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-guild-900/95 backdrop-blur-md border-b border-guild-700"
-    >
-      <div class="flex items-center justify-between p-4">
-        <NuxtLink
-          to="/"
-          class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wider"
-        >
-          Ghost Guild
-        </NuxtLink>
-        <UButton
-          icon="i-lucide-menu"
-          color="neutral"
-          variant="ghost"
-          size="lg"
-          @click="isMobileMenuOpen = true"
-          aria-label="Open menu"
-        />
-      </div>
+    <div class="mobile-header">
+      <NuxtLink to="/" class="brand">Ghost Guild</NuxtLink>
+      <button class="btn" @click="isMobileMenuOpen = true">Menu</button>
     </div>
 
-    <!-- Container to center content and sidebar together -->
-    <div class="lg:flex lg:justify-center lg:gap-0">
-      <!-- Main Content Column -->
-      <div class="lg:w-[800px] overflow-y-auto relative z-[5] guild-interior">
-        <div class="relative">
-          <slot />
-        </div>
-        <AppFooter />
-      </div>
+    <!-- Main Content -->
+    <main class="main">
+      <TopStrip :page-path="currentPageName" />
+      <slot />
+    </main>
 
-      <!-- Desktop Navigation Column -->
-      <AppNavigation class="hidden lg:block relative z-20" />
-    </div>
-
-    <!-- Mobile Navigation Drawer -->
-    <USlideover v-model:open="isMobileMenuOpen" side="right">
+    <!-- Mobile Drawer -->
+    <USlideover v-model:open="isMobileMenuOpen" side="left">
       <template #body>
         <AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
       </template>
     </USlideover>
+
   </div>
 </template>
 
 <script setup>
-const isMobileMenuOpen = ref(false);
+const isMobileMenuOpen = ref(false)
+const route = useRoute()
+
+const currentPageName = computed(() => {
+  const path = route.path
+  if (path === '/') return ''
+  // Convert /member/dashboard → member / dashboard
+  return path.slice(1).replace(/\//g, ' / ')
+})
 </script>
+
+<style scoped>
+.site {
+  min-height: 100vh;
+}
+
+.main {
+  margin-left: 220px;
+}
+
+.sidebar-desktop {
+  display: block;
+}
+
+.mobile-header {
+  display: none;
+}
+
+.brand {
+  font-family: 'Brygada 1918', serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--candle);
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .sidebar-desktop {
+    display: none;
+  }
+  .mobile-header {
+    display: flex;
+    padding: 12px 20px;
+    border-bottom: 1px dashed var(--border);
+    align-items: center;
+    justify-content: space-between;
+    background: var(--bg);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+  .main {
+    margin-left: 0;
+  }
+}
+</style>