Adjust header

sort/search should not enter the MoreMenu at smaller resolutions

Author: Jacobdeanr

app/ui/header.tsx

@@ -23,22 +23,23 @@ export default function Header({ sort, setSort, query, setQuery }: HeaderProps)
 
   return (
     <header className="sticky top-0 z-40 backdrop-blur-md bg-neutral-900/70 border-b border-neutral-800/60">
-      <div className="mx-auto max-w-6xl flex items-center justify-between px-4 sm:px-6 h-16">
+      <div className="mx-auto max-w-6xl flex items-center justify-between gap-4 px-4 sm:px-6 h-16">
+
           {/* title */}
-          <h1 className="text-lg sm:text-2xl font-bold tracking-wide whitespace-nowrap select-none">
+          <h1 className="text-lg md:text-xl xl:text-2xl font-bold tracking-wide whitespace-nowrap select-none min-w-0">
             Jacob Robbins&rsquo; <span className="font-light">Skybox&nbsp;Library</span>
           </h1>
 
         {/* right-side cluster */}
-        <div className="flex items-center gap-2 sm:gap-3">
+        <div className="flex justify-end items-center gap-2 sm:gap-3">
           {/* Search + Sort: Desktop (>= sm) */}
           <div className="hidden sm:flex items-center gap-3">
             <input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search…"
               className="
-                flex-auto min-w-0 max-w-[40vw]
+                flex-auto min-w-0 max-w-xs
                 rounded-md bg-neutral-800/70
                 px-3 py-1.5 text-sm placeholder:text-neutral-500
                 focus:outline-none focus:ring-2 focus:ring-amber-500
@@ -57,10 +58,16 @@ export default function Header({ sort, setSort, query, setQuery }: HeaderProps)
             ))}
           </nav>
 
-          {/* More Menu Button: Mobile-only (< sm) */}
-          {/* TODO: Consider moving Search/Sort/Profile Links into MoreMenu content for mobile */}
-          <div className="sm:hidden">
-            <MoreMenu />
+          {/* More Menu Button: Visible below lg */}
+          {/* Contains items hidden from the main bar at smaller breakpoints */}
+          <div className="lg:hidden flex-shrink-0">
+            <MoreMenu
+              profileLinks={profileLinks}
+              sort={sort}
+              setSort={setSort}
+              query={query}
+              setQuery={setQuery}
+            />
           </div>
         </div>
       </div>

app/ui/iconlink.tsx

@@ -1,21 +1,32 @@
 /* app/ui/iconlink.tsx */
 import Image from 'next/image';
 
-export default function IconLink({ href, label, svg }: { href: string; label: string; svg: string }) {
+interface IconLinkProps {
+  href: string;
+  label: string;
+  svg: string;
+  menuMode?: boolean; // Add optional prop
+}
+
+export default function IconLink({ href, label, svg, menuMode = false }: IconLinkProps) {
   return (
     <a
       href={href}
       aria-label={label}
       target="_blank"
       rel="noreferrer"
-      className="
-        flex-none                       /* never shrink */
-        p-2 rounded-md
-        bg-neutral-800/70 hover:bg-neutral-800
-        focus:outline-none focus:ring-2 focus:ring-amber-500
-      "
+      // Apply different styles based on menuMode
+      className={`
+        ${menuMode 
+          ? 'flex items-center gap-3 w-full px-3 py-2 text-sm text-neutral-200 hover:bg-neutral-800' 
+          : 'flex-none p-2 rounded-md bg-neutral-800/70 hover:bg-neutral-800'
+        }
+        focus:outline-none focus:ring-2 focus:ring-amber-500 transition-colors
+      `}
     >
-      <Image src={svg} alt={label} width={20} height={20} />
+      <Image src={svg} alt="" width={20} height={20} className="flex-shrink-0" />
+      {/* Show label only in menu mode */}
+      {menuMode && <span className="flex-grow">{label}</span>}
     </a>
   );
 }

app/ui/moremenu.tsx

@@ -1,19 +1,36 @@
 /* app/ui/moremenu.tsx */
 'use client';
 
+import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
 import IconLink from './iconlink';
-import { profileLinks } from './profile-links';
+import SortSelect from './sort-select'; // Import SortSelect
 
-export default function MoreMenu() {
+// Types matching those in Header/Page
+type SortOption = 'alpha' | 'alpha-desc' | 'published-date-desc' | 'published-date-asc';
+interface ProfileLink {
+  href: string;
+  label: string;
+  svg: string;
+}
+
+interface MoreMenuProps {
+  profileLinks: ProfileLink[];
+  sort: SortOption;
+  setSort: Dispatch<SetStateAction<SortOption>>;
+  query: string;
+  setQuery: Dispatch<SetStateAction<string>>;
+}
+
+export default function MoreMenu({ profileLinks, sort, setSort, query, setQuery }: MoreMenuProps) {
   const [open, setOpen] = useState(false);
 
   return (
     <div className="relative flex-shrink-0">
       <button
         onClick={() => setOpen(!open)}
-        aria-label="Open links"
-        className="sm:hidden p-2 rounded-md bg-neutral-800/70 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-amber-500"
+        aria-label="Open menu"
+        className="p-2 rounded-md bg-neutral-800/70 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-amber-500 lg:hidden"
       >
         <svg viewBox="0 0 24 24" className="w-4 h-4 fill-neutral-300">
           <circle cx="5" cy="12" r="2" />
@@ -23,12 +40,32 @@ export default function MoreMenu() {
       </button>
 
       {open && (
-        <div className="absolute right-0 mt-2 w-40 rounded-md bg-neutral-900 shadow-lg ring-1 ring-neutral-700/60">
-          <nav className="flex flex-col divide-y divide-neutral-700/60">
-            {profileLinks.map((l) => (
-              <IconLink key={l.label} {...l} />
-            ))}
-          </nav>
+        <div className="absolute right-0 mt-2 w-56 rounded-md bg-neutral-900 shadow-lg ring-1 ring-neutral-700/60 z-50">
+          <div className="flex flex-col p-2 gap-2 divide-y divide-neutral-700/60">
+
+            {/* Search Input - Shown below sm */}
+            <div className="sm:hidden px-2 pt-1 pb-2">
+              <input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search…"
+                className="w-full rounded-md bg-neutral-800 px-3 py-1.5 text-sm placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-amber-500"
+              />
+            </div>
+
+            {/* Sort Select - Shown below md */}
+            <div className="md:hidden px-2 pt-2 pb-1">
+              <label className="block text-xs text-neutral-400 mb-1">Sort by:</label>
+              <SortSelect value={sort} onChange={setSort} />
+            </div>
+
+            {/* Profile Links - Shown below lg */}
+            <nav className="lg:hidden flex flex-col pt-2">
+              {profileLinks.map((l) => (
+                <IconLink key={l.label} {...l} menuMode={true} />
+              ))}
+            </nav>
+          </div>
         </div>
       )}
     </div>