feat: overhaul UI components for mobile responsiveness

web-frontend/src/App.css

@@ -14,20 +14,7 @@ main {
     display: block;
 }
 
-.landing-wrapper {
-    display: grid;
-    flex: none;
-    gap: 12px;
-    grid-auto-rows: minmax(0, 1fr);
-    grid-template-columns: repeat(3, minmax(50px, 1fr));
-    grid-template-rows: repeat(1, minmax(0, 1fr));
-    height: min-content;
-    justify-content: center;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    width: 100%;
-}
+/* Landing wrapper styles moved to inline Tailwind classes for better mobile responsiveness */
 .landing-card {
     --border-bottom-width: 1px;
     --border-color: var(--token-1707e66c-e139-40d8-8020-8176f47ee22b, #e1e2e3);

web-frontend/src/components/Dashboard.jsx

@@ -35,11 +35,11 @@ const Dashboard = () => {
 
   return (
     <>
-      <div className="text-3xl font-bold mb-4">Public Dashboard</div>
+      <div className="text-2xl sm:text-3xl font-bold mb-4">Public Dashboard</div>
       <div className="text-gray-600 mb-6">
         Live statistics and trends from the Stickerlandia community.
       </div>
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <div className="col-span-1 landing-card items-start">
           <span className="text-gray-400 font-bold">Total Stickers</span>
           <span className="text-gray-600 font-bold text-xl">
@@ -70,7 +70,7 @@ const Dashboard = () => {
             <CalendarMonthOutlinedIcon /> DASH 2025 upcoming
           </span>
         </div>
-        <div className="col-span-2 landing-card items-start">
+        <div className="col-span-1 sm:col-span-2 landing-card items-start">
           <span className="text-gray-600 font-bold">Rarity Distribution</span>
           <span className="text-gray-600 font-bold text-xl">
             Breakdown of stickers by rarity level
@@ -106,7 +106,7 @@ const Dashboard = () => {
             </div>
           </div>
         </div>
-        <div className="col-span-2 landing-card">
+        <div className="col-span-1 sm:col-span-2 landing-card">
           <span className="text-gray-600 font-bold">Recent Activity</span>
           <span className="text-gray-600 font-bold text-xl">
             Latest sticker collections and events
@@ -124,7 +124,7 @@ const Dashboard = () => {
             <div className="text-sm">3 hours ago</div>
           </div>
         </div>
-        <div className="col-span-4 landing-card items-start">
+        <div className="col-span-1 sm:col-span-2 lg:col-span-4 landing-card items-start">
           <span className="text-gray-600 font-bold">Most Collected Stickers</span>
           <span className="text-gray-600 font-bold text-sm">Top Stickers in the Community</span>
           <span className="text-green-500">

web-frontend/src/components/HeaderBar.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import LoginButton from "./LoginButton";
-import LogoutButton from "./LogoutButton";
+import MobileMenu from "./MobileMenu";
 import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
-import { AuthProvider, useAuth } from "../context/AuthContext";
+import { useAuth } from "../context/AuthContext";
 
 const HeaderBar = () => {
   const { isAuthenticated, isLoading } = useAuth();
@@ -20,17 +20,10 @@ const HeaderBar = () => {
       className="bg-white pointer-events-none sticky top-0 isolate z-40 mt-[--header-mt,0] w-full"
     >
       <div className="pointer-events-auto relative mx-auto flex h-16 items-center px-6 lg:max-w-[60rem] lg:px-0 xl:max-w-[76rem]">
+        {isAuthenticated && <div className="lg:hidden"><MobileMenu /></div>}
         <div className="logo font-bold"><span className="sparkle-logo mr-1"><AutoAwesomeOutlinedIcon/></span>Stickerlandia</div>
-        <div className="ml-auto flex items-center gap-6 font-medium [@media(width<22.5rem)]:hidden">
-          {!isAuthenticated ? (
-            <div>
-              <LoginButton />
-            </div>
-          ) : (
-            <div>
-              <LogoutButton />
-            </div>
-          )}
+        <div className="ml-auto flex items-center gap-6 font-medium">
+          {!isAuthenticated && <LoginButton />}
         </div>
       </div>
     </header>

web-frontend/src/components/Landing.jsx

@@ -32,7 +32,7 @@ function Landing() {
           </Link>
         </div>
 
-        <div className="landing-wrapper flex flex-row">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           <div className="landing-card">
             <span className="card-icon">
               <WorkspacePremiumOutlinedIcon />

web-frontend/src/components/MobileMenu.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import CloseIcon from "@mui/icons-material/Close";
+import AutoAwesomeOutlinedIcon from "@mui/icons-material/AutoAwesomeOutlined";
+import UserInfo from "./UserInfo";
+import { MainNavList, SecondaryNavList } from "./NavItems";
+
+function MobileMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDrawer = (open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+    setIsOpen(open);
+  };
+
+  const handleLinkClick = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <IconButton
+        edge="start"
+        color="inherit"
+        aria-label="Open navigation menu"
+        aria-expanded={isOpen}
+        onClick={toggleDrawer(true)}
+        className="lg:hidden text-black"
+      >
+        <MenuIcon />
+      </IconButton>
+      <Drawer
+        anchor="left"
+        open={isOpen}
+        onClose={toggleDrawer(false)}
+        aria-label="Navigation menu"
+      >
+        <div className="w-64 h-full bg-white">
+          <div className="flex justify-between items-center p-4 border-b border-gray-300">
+            <span className="text-xl font-bold">
+              <span className="text-blue-500">
+                <AutoAwesomeOutlinedIcon />
+              </span>
+              Stickerlandia
+            </span>
+            <IconButton onClick={toggleDrawer(false)} aria-label="Close navigation menu">
+              <CloseIcon />
+            </IconButton>
+          </div>
+
+          <UserInfo />
+
+          <nav className="flex-1">
+            <MainNavList onItemClick={handleLinkClick} />
+          </nav>
+
+          <nav className="border-t border-gray-300 mt-auto">
+            <SecondaryNavList onItemClick={handleLinkClick} />
+          </nav>
+        </div>
+      </Drawer>
+    </>
+  );
+}
+
+export default MobileMenu;

web-frontend/src/components/MyCollection.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router";
 import { useAuth } from "../context/AuthContext";
+import HeaderBar from "./HeaderBar";
 import Sidebar from "./Sidebar";
 import { API_BASE_URL } from "../config";
 
@@ -76,11 +77,12 @@ function MyCollection() {
 
   return (
     <div className="isolate flex flex-auto flex-col bg-[--root-bg]">
+      <HeaderBar />
       <main id="main">
-        <div className="grid grid-cols-5">
+        <div className="grid grid-cols-1 lg:grid-cols-5">
           <Sidebar />
-          <div className="col-span-4 p-8">
-            <h1 className="text-3xl font-bold mb-4">My Collection</h1>
+          <div className="col-span-1 lg:col-span-4 p-4 sm:p-6 lg:p-8">
+            <h1 className="text-2xl sm:text-3xl font-bold mb-4">My Collection</h1>
             <p className="text-gray-600 mb-8">
               Welcome to your sticker collection, {user?.given_name || 'collector'}!
             </p>
@@ -104,7 +106,7 @@ function MyCollection() {
             )}
 
             {!loading && !error && stickers.length > 0 && (
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                 {stickers.map((sticker) => (
                   <Link
                     key={sticker.stickerId}

web-frontend/src/components/NavItems.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Link } from "react-router";
+import { useAuth } from "../context/AuthContext";
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import MenuBookOutlinedIcon from "@mui/icons-material/MenuBookOutlined";
+import AssessmentOutlinedIcon from "@mui/icons-material/AssessmentOutlined";
+import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
+import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
+
+const mainNavItems = [
+  { to: "/dashboard", icon: HomeOutlinedIcon, label: "User Dashboard" },
+  { to: "/collection", icon: MenuBookOutlinedIcon, label: "My Collection" },
+  { to: "/catalogue", icon: AssessmentOutlinedIcon, label: "Catalogue" },
+  { to: "/public-dashboard", icon: AssessmentOutlinedIcon, label: "Public Dashboard" },
+  { to: "", icon: LocalPrintshopOutlinedIcon, label: "Print Station", isExternal: true },
+];
+
+const secondaryNavItems = [
+  { to: "", icon: PersonOutlineOutlinedIcon, label: "Profile", isExternal: true },
+  { to: "", icon: SettingsOutlinedIcon, label: "Settings", isExternal: true },
+];
+
+function MainNavList({ onItemClick }) {
+  return (
+    <ul>
+      {mainNavItems.map((item) => (
+        <li key={item.label} className="my-3 px-5">
+          {item.isExternal ? (
+            <a className="block py-2" href={item.to} onClick={onItemClick}>
+              <item.icon />
+              {item.label}
+            </a>
+          ) : (
+            <Link className="block py-2" to={item.to} onClick={onItemClick}>
+              <item.icon />
+              {item.label}
+            </Link>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function SecondaryNavList({ onItemClick }) {
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    if (onItemClick) {
+      onItemClick();
+    }
+    logout();
+  };
+
+  return (
+    <ul>
+      {secondaryNavItems.map((item) => (
+        <li key={item.label} className="my-3 px-5">
+          <a className="block py-2" href={item.to} onClick={onItemClick}>
+            <item.icon />
+            {item.label}
+          </a>
+        </li>
+      ))}
+      <li className="my-3 px-5">
+        <button className="block w-full text-left py-2" onClick={handleLogout}>
+          <LogoutOutlinedIcon />
+          Sign Out
+        </button>
+      </li>
+    </ul>
+  );
+}
+
+export { MainNavList, SecondaryNavList };

web-frontend/src/components/PublicDashboardPage.jsx

@@ -9,10 +9,11 @@ function PublicDashboardPage() {
 
   return isAuthenticated ? (
     <div className="isolate flex flex-auto flex-col bg-[--root-bg]">
+      <HeaderBar />
       <main id="main">
-        <div className="grid grid-cols-5">
+        <div className="grid grid-cols-1 lg:grid-cols-5">
           <Sidebar />
-          <div className="col-span-4 p-8">
+          <div className="col-span-1 lg:col-span-4 p-4 sm:p-6 lg:p-8">
             <Dashboard />
           </div>
         </div>