Feat/common header

src/App.jsx

@@ -2,8 +2,7 @@
 // <div /> tests whether centered layout works.
 // <section className="panel stack-md" /> tests whether reusable panel and vertical spacing classes work.
 // <h1 /> tests title style
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-
+import Header from "./components/header.jsx";
 import OpeningPage from "./pages/OpeningPage.jsx";
 import RegisterPage from "./pages/RegisterPage.jsx";
 import LoginPage from "./pages/LoginPage.jsx";
@@ -14,23 +13,43 @@ import EggDashboardPage from "./pages/EggDashboardPage.jsx";
 import InventoryPage from "./pages/InventoryPage.jsx";
 import ShopPage from "./pages/ShopPage.jsx";
 import MemoryArchivePage from "./pages/MemoryArchivePage.jsx";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+
+// 1. Create a wrapper component inside the Router context
+function AppContent() {
+  const location = useLocation();
+
+  // Define paths where you don't want the header
+  const hideHeaderPaths = ["/shop"]; 
+
+  return (
+    <>
+      {/* Only render Header if the current path isn't in the hide list */}
+      {!hideHeaderPaths.includes(location.pathname) && <Header />}
+
+      <main style={{ padding: "1rem" }}>
+        <Routes>
+          <Route path="/" element={<EggDashboardPage />} />
+          <Route path="/write" element={<WritePostPage />} />
+          <Route path="/nest" element={<EggDashboardPage />} />
+          <Route path="/archive" element={<MemoryArchivePage />} />
+          <Route path="/posts/:id" element={<ViewPostPage />} />
+          <Route path="/shop" element={<ShopPage />} />
+          <Route path="/inventory" element={<InventoryPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+        </Routes>
+      </main>
+    </>
+  );
+}
 
+// 2. Keep your main App component clean
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<EggDashboardPage />} />
-        <Route path="/write" element={<WritePostPage />} />
-        <Route path="/nest" element={<EggDashboardPage />} />
-        <Route path="/archive" element={<MemoryArchivePage />} />
-        <Route path="/posts/:id" element={<ViewPostPage />} />
-        <Route path="/shop" element={<ShopPage />} />
-        <Route path="/inventory" element={<InventoryPage />} />
-        <Route path="/profile" element={<ProfilePage />} />
-
-      </Routes>
+      <AppContent />
     </BrowserRouter>
   );
 }
 
-export default App;
+export default App

src/components/header.jsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+
+export default function Header() {
+  return (
+    <header className="dashboard-header">
+        <h1>Nacimiento - My Egg</h1>
+
+        <div className="dashboard-user">
+          <div className="dashboard-user-text">
+            <span>USER NAME</span>
+            <strong>N Days</strong>
+          </div>
+          <div className="dashboard-avatar" aria-label="User profile placeholder" />
+        </div>
+      </header>
+  );
+}

src/pages/EggDashboardPage.jsx

@@ -12,18 +12,6 @@ function EggDashboardPage() {
   const { egg, loading } = useEgg();
   return (
     <main className="app-page egg-dashboard-page">
-      <header className="dashboard-header">
-        <h1>Nacimiento - My Egg</h1>
-
-        <div className="dashboard-user">
-          <div className="dashboard-user-text">
-            <span>USER NAME</span>
-            <strong>N Days</strong>
-          </div>
-          <div className="dashboard-avatar" aria-label="User profile placeholder" />
-        </div>
-      </header>
-
       <section className="dashboard-content">
         <section className="window-area" aria-label="Egg window scene placeholder">
           <div

src/pages/InventoryPage.jsx

@@ -85,22 +85,6 @@ function InventoryPage() {
 
   return (
     <main className="app-page inventory-page">
-      <header className="inventory-header">
-        <div className="inventory-brand">Nacimiento</div>
-
-        <nav className="inventory-nav" aria-label="Main navigation">
-          <a href="/nest">⌂ Nest</a>
-          <a href="/shop">▣ Shop</a>
-        </nav>
-
-        <div className="inventory-user">
-          <div className="inventory-user-text">
-            <span>USER NAME</span>
-            <strong>N Days</strong>
-          </div>
-          <div className="inventory-avatar" aria-label="User profile placeholder" />
-        </div>
-      </header>
 
       <section className="inventory-window" aria-label="Inventory">
         <header className="inventory-window-header">

src/pages/MemoryArchivePage.jsx

@@ -137,23 +137,6 @@ function MemoryArchivePage() {
 
   return (
     <main className="app-page memory-archive-page">
-      <header className="archive-header">
-        <div className="archive-brand">Nacimiento</div>
-
-        <nav className="archive-nav" aria-label="Main navigation">
-          <a href="/nest">⌂ Nest</a>
-          <a href="/shop">▣ Shop</a>
-        </nav>
-
-        <div className="archive-user">
-          <div className="archive-user-text">
-            <span>USER NAME</span>
-            <strong>N Days</strong>
-          </div>
-          <div className="archive-avatar" aria-label="User profile placeholder" />
-        </div>
-      </header>
-
       <section className="archive-layout">
         <aside className="archive-sidebar">
           <div className="archive-title-block">

src/pages/ProfilePage.jsx

@@ -17,23 +17,6 @@ function getTagClassName(tag) {
 function ProfilePage() {
   return (
     <main className="app-page profile-page">
-      <header className="profile-header">
-        <div className="profile-brand">Nacimiento</div>
-
-        <nav className="profile-nav" aria-label="Main navigation">
-          <a href="/nest">⌂ Nest</a>
-          <a href="/shop">▣ Shop</a>
-        </nav>
-
-        <div className="profile-user">
-          <div className="profile-user-text">
-            <span>USER NAME</span>
-            <strong>N Days</strong>
-          </div>
-          <div className="profile-avatar-small" aria-label="User profile placeholder" />
-        </div>
-      </header>
-
       <section className="profile-layout">
         <section className="profile-card profile-hero-card">
           <div className="profile-avatar-large">

src/pages/ViewPostPage.jsx

@@ -59,22 +59,6 @@ function ViewPostPage() {
 
   return (
     <main className="app-page view-post-page">
-      <header className="view-header">
-        <div className="view-brand">Nacimiento</div>
-
-        <nav className="view-nav" aria-label="Main navigation">
-          <a href="/nest">⌂ Nest</a>
-          <a href="/shop">▣ Shop</a>
-        </nav>
-
-        <div className="view-user">
-          <div className="view-user-text">
-            <span>WANDERER</span>
-            <strong>14 Days</strong>
-          </div>
-          <div className="view-avatar" aria-label="User profile placeholder" />
-        </div>
-      </header>
 
       <section className="view-post-layout">
         <a className="back-to-archive" href="/archive">

src/pages/WritePostPage.jsx

@@ -10,7 +10,7 @@
 function WritePostPage() {
   const { addPost } = usePosts();
   const { user, reloadUser } = useCurrentUser();
   const { quests, checkPostForQuestCompletion, claimReward } = useQuests();  
 
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
@@ -32,7 +32,7 @@
       return;
     }
 
     const { newPost, updatedPosts } = await addPost({
       title,
       content,
       tag,
@@ -53,23 +53,6 @@
 
   return (
     <main className={`app-page write-post-page visibility-${visibility}`}>
-      <header className="write-header">
-        <div className="write-brand">nacimiento</div>
-
-        <nav className="write-nav" aria-label="Main navigation">
-          <a href="/nest">⌂ Nest</a>
-          <a href="/shop">▣ Shop</a>
-        </nav>
-
-        <div className="write-user">
-          <div className="write-user-text">
-            <span>USER NAME</span>
-            <strong>N Days</strong>
-          </div>
-          <div className="write-avatar" aria-label="User profile placeholder" />
-        </div>
-      </header>
-
       <section className="write-layout">
         <section className="write-main">
           <div className="write-page-heading">