Redesign: add responsive header, sidebar, and fix layout issues

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white min-w-[800px] min-h-[80vh]">
+  <div class="bg-white min-h-[80vh]">
     <NuxtLayout>
       <NuxtPage/>
     </NuxtLayout>

layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="min-h-screen bg-white">
-    <header class="sticky top-0 bg-white z-40 border-b border-gray-200">
+    <!-- Mobile header -->
+    <header class="sticky top-0 bg-white z-40 border-b border-gray-200 lg:hidden">
       <div class="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between gap-4">
         <Menu />
         <h1 class="text-lg md:text-2xl whitespace-nowrap">
@@ -10,15 +11,54 @@
       </div>
     </header>
 
+    <!-- Desktop header -->
+    <header class="sticky top-0 bg-white z-40 border-b border-gray-200 hidden lg:block">
+      <div class="w-full px-4 py-2 flex items-center justify-between">
+        <h1 class="text-lg md:text-2xl whitespace-nowrap">
+          <NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
+        </h1>
+        <div class="text-lg md:text-xl">{{ pageTitle }}</div>
+      </div>
+    </header>
+
+    <div class="flex">
+      <!-- Sidebar for wide screens -->
+      <aside class="hidden lg:block w-48 flex-shrink-0 border-r border-gray-200 p-4 pt-16 sticky top-0 h-screen">
+        <nav class="space-y-4 ml-4">
+          <div>
+            <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>
+            <div class="space-y-2 ml-2">
+              <NuxtLink to="/pieces" class="block hover:underline">pieces</NuxtLink>
+              <NuxtLink to="/writings" class="block hover:underline">writings</NuxtLink>
+              <NuxtLink to="/albums" class="block hover:underline">albums</NuxtLink>
+            </div>
+          </div>
+
+          <div>
+            <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Events</p>
+            <div class="space-y-2 ml-2">
+              <NuxtLink to="/performances" class="block hover:underline">performances</NuxtLink>
+              <NuxtLink to="/lectures" class="block hover:underline">lectures</NuxtLink>
+            </div>
+          </div>
+
+          <NuxtLink to="/about" class="block hover:underline">about</NuxtLink>
+          <a href="https://unboundedpress.org/code" target="_blank" class="block hover:underline">code</a>
+        </nav>
+      </aside>
+
+      <div class="flex-1">
         <main class="max-w-7xl mx-auto px-4 py-8">
           <slot />
         </main>
+      </div>
+    </div>
 
     <footer class="fixed bottom-0 bg-white border-t border-gray-200 p-2 w-full flex justify-center z-30">
       <ClientOnly>
         <iframe 
           v-if="audioPlayerStore.soundcloud_trackid !== 'undefined'"
-          width="400rem" 
+          class="w-64" 
           height="20px" 
           scrolling="no" 
           frameborder="no" 
@@ -32,7 +72,7 @@
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <ClientOnly>
-            <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
+            <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
         <div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
@@ -51,7 +91,7 @@
           </ClientOnly>
           <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
             <ClientOnly>
-              <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
+              <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
             </ClientOnly>
           </div>
         </div>

pages/pieces.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+  <div class="grid grid-cols-2 lg:grid-cols-5 gap-8">
     <div class="lg:col-span-3">
       <section>
         <div v-for="item in works" :key="item.year" class="mb-8">