From 8805b454779fc56d57f1cf1cfd14034917aa031f Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 15:07:44 +0900
Subject: [PATCH] Changed burger bar layout

---
 frontend/src/App.tsx   | 72 +++++++++++++++++++++-----------
 frontend/src/index.css | 94 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 143 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 988ecc4..0f75c08 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,38 +1,64 @@
+import React from "react";
 import { Link, NavLink, Route, Routes, useLocation } from "react-router-dom";
 import Timer from "./components/Timer";
 import ShowsPage from "./pages/ShowsPage";
 import "./index.css";
-import { useState } from "react";
-import React from "react";
 
 export default function App() {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = React.useState(false);
   const loc = useLocation();
 
-  // close drawer on route change
-  React.useEffect(() => { setOpen(false); }, [loc.pathname]);
+  // close sidebar on route change
+  React.useEffect(() => setOpen(false), [loc.pathname]);
+
+  // ESC to close
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
 
   return (
-    <div className="app">
-      <main className="card">
-        <header className="appbar">
-          <button className="burger" aria-label="Menu" onClick={() => setOpen(v => !v)}>
-            ☰
-          </button>
-          <Link to="/" className="brand">Watch Party</Link>
-          <nav className={`drawer ${open ? "open" : ""}`} onClick={() => setOpen(false)}>
-            <NavLink end to="/" className="navlink">Timer</NavLink>
-            <NavLink to="/shows" className="navlink">Shows</NavLink>
-          </nav>
-        </header>
+    <div className={`site ${open ? "sidebar-open" : ""}`}>
+      {/* Top-left header (outside the card) */}
+      <header className="site-header">
+        <button className="burger" aria-label="Menu" onClick={() => setOpen(v => !v)}>
+          ☰
+        </button>
+        <Link to="/" className="brand">Watch Party</Link>
+      </header>
 
-        <Routes>
-          <Route path="/" element={<Timer />} />
-          <Route path="/shows" element={<ShowsPage />} />
-        </Routes>
+      {/* Sidebar (full-height) */}
+      <aside className={`sidebar ${open ? "open" : ""}`} aria-hidden={!open}>
+        <nav className="sidebar-nav" onClick={() => setOpen(false)}>
+          <NavLink end to="/" className="navlink">Timer</NavLink>
+          <NavLink to="/shows" className="navlink">Shows</NavLink>
+        </nav>
+      </aside>
 
-        <div className="footer">
-          Built by <a href="https://x.com/nik4nao" target="_blank" rel="noopener noreferrer">@nik4nao</a> — contact for inquiries or requirements.
+      {/* Backdrop for overlap mode or to close on click */}
+      <button
+        className={`backdrop ${open ? "open" : ""}`}
+        aria-hidden={!open}
+        onClick={() => setOpen(false)}
+        tabIndex={-1}
+      />
+
+      {/* Main content area (card inside) */}
+      <main className="site-content">
+        <div className="card">
+          <Routes>
+            <Route path="/" element={<Timer />} />
+            <Route path="/shows" element={<ShowsPage />} />
+          </Routes>
+
+          <div className="footer">
+            Built by{" "}
+            <a href="https://x.com/nik4nao" target="_blank" rel="noopener noreferrer">
+              @nik4nao
+            </a>{" "}
+            — contact for inquiries or requirements.
+          </div>
         </div>
       </main>
     </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8d7fc2a..7cc45fd 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -143,7 +143,101 @@ kbd {
   justify-content: center;
   flex-wrap: wrap;
 }
+/* ====== Site chrome (outside card) ====== */
+.site {
+  min-height: 100%;
+  position: relative;
+  /* push-mode: the content will slide right when sidebar is open */
+}
 
+.site-header {
+  position: fixed;
+  z-index: 50;
+  top: 16px;
+  left: 16px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.burger {
+  font-size: 20px;
+  line-height: 1;
+  padding: 8px 10px;
+  border-radius: 10px;
+  color: var(--text);
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.15);
+  cursor: pointer;
+}
+.brand {
+  font-weight: 900;
+  color: var(--text);
+  text-decoration: none;
+  letter-spacing: 0.2px;
+  text-shadow: 0 1px 10px rgba(0,0,0,0.25);
+}
+
+/* Sidebar (full height, left) */
+.sidebar {
+  position: fixed;
+  z-index: 40;
+  top: 0; left: 0; bottom: 0;
+  width: clamp(240px, 28vw, 320px);
+  backdrop-filter: blur(4px);
+  background: rgba(15,21,32,0.96);
+  border-right: 1px solid rgba(255,255,255,0.12);
+  transform: translateX(-100%);
+  transition: transform 180ms ease;
+  display: grid;
+  align-content: start;
+  padding: 70px 16px 16px; /* leave space under header */
+}
+.sidebar.open { transform: translateX(0); }
+
+.sidebar-nav {
+  display: grid;
+  gap: 10px;
+}
+.navlink {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 800;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.10);
+}
+.navlink.active { color: var(--accent); border-color: rgba(121,192,255,0.6); }
+
+/* Backdrop (for overlap mode, also clickable to close) */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  background: rgba(0,0,0,0.0);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+  border: 0;
+}
+.backdrop.open {
+  background: rgba(0,0,0,0.35);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Main content wrapper; centers the card like before */
+.site-content {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  transition: transform 180ms ease;
+}
+
+/* ====== Card stays as you had ====== */
+/* .card { ... } remains unchanged—already centered and relative */
 .pill {
   padding: 4px 10px;
   border-radius: 999px;