Add grid sidebar view to mobile nav

src/app/(static)/sets/page.tsx

@@ -0,0 +1,35 @@
+import {
+  getPhotosCountCached,
+  getUniqueCamerasCached,
+  getUniqueFilmSimulationsCached,
+  getUniqueTagsCached,
+} from '@/cache';
+import SiteGrid from '@/components/SiteGrid';
+import PhotoGridSidebar from '@/photo/PhotoGridSidebar';
+import { SHOW_FILM_SIMULATIONS } from '@/site/config';
+
+export default async function SetsPage() {
+  const [
+    photosCount,
+    tags,
+    cameras,
+    simulations,
+  ] = await Promise.all([
+    getPhotosCountCached(),
+    getUniqueTagsCached(),
+    getUniqueCamerasCached(),
+    SHOW_FILM_SIMULATIONS ? getUniqueFilmSimulationsCached() : [],
+  ]);
+  return (
+    <SiteGrid
+      contentMain={<div className="sticky top-4 space-y-4">
+        <PhotoGridSidebar {...{
+          tags,
+          cameras,
+          simulations,
+          photosCount,
+        }} />
+      </div>}
+    />
+  );
+}

src/components/SwitcherItem.tsx

@@ -4,17 +4,20 @@ import { cc } from '@/utility/css';
 export default function SwitcherItem({
   icon,
   href,
+  className: classNameProp,
   onClick,
   active,
   noPadding,
 }: {
   icon: JSX.Element
   href?: string
+  className?: string
   onClick?: () => void
   active?: boolean
   noPadding?: boolean
 }) {
   const className = cc(
+    classNameProp,
     'py-0.5 px-1.5',
     'cursor-pointer',
     'hover:bg-gray-50 active:bg-gray-100 active:text-gray-400',

src/site/IconSets.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable max-len */
+
+const INTRINSIC_WIDTH = 28;
+const INTRINSIC_HEIGHT = 24;
+
+export default function IconSets({
+  width = INTRINSIC_WIDTH,
+  includeTitle = true,
+}: {
+  width?: number
+  includeTitle?: boolean
+}) {
+  return (
+    <svg
+      width={width}
+      height={INTRINSIC_HEIGHT * width / INTRINSIC_WIDTH}
+      viewBox="0 0 28 24"
+      fill="none"
+      stroke="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {includeTitle && <title>Photo Sets</title>}
+      <path d="M22.25 16.375L9.75 16.375" strokeWidth="1.25"/>
+      <path d="M22.25 12.125L9.75 12.125" strokeWidth="1.25"/>
+      <path d="M22.25 7.875L9.75 7.875" strokeWidth="1.25"/>
+      <path d="M7.25 16.375L6.25 16.375" strokeWidth="1.25" strokeLinecap="round"/>
+      <path d="M7.25 12.125L6.25 12.125" strokeWidth="1.25" strokeLinecap="round"/>
+      <path d="M7.25 7.875L6.25 7.875" strokeWidth="1.25" strokeLinecap="round"/>
+    </svg>
+  );
+};

src/site/Nav.tsx

@@ -12,6 +12,7 @@ import {
   isPathAdmin,
   isPathGrid,
   isPathProtected,
+  isPathSets,
   isPathSignIn,
 } from '@/site/paths';
 import AnimateItems from '../components/AnimateItems';
@@ -38,6 +39,8 @@ export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) {
       return 'full-frame';
     } else if (isPathGrid(pathname)) {
       return 'grid';
+    } else if (isPathSets(pathname)) {
+      return 'sets';
     } else if (isPathProtected(pathname)) {
       return 'admin';
     }

src/site/ViewSwitcher.tsx

@@ -2,10 +2,11 @@ import Switcher from '@/components/Switcher';
 import SwitcherItem from '@/components/SwitcherItem';
 import IconFullFrame from '@/site/IconFullFrame';
 import IconGrid from '@/site/IconGrid';
-import { PATH_GRID } from '@/site/paths';
+import { PATH_GRID, PATH_SETS } from '@/site/paths';
 import { BiLockAlt } from 'react-icons/bi';
+import IconSets from './IconSets';
 
-export type SwitcherSelection = 'full-frame' | 'grid' | 'admin';
+export type SwitcherSelection = 'full-frame' | 'grid' | 'sets' | 'admin';
 
 export default function ViewSwitcher({
   currentSelection,
@@ -28,6 +29,13 @@ export default function ViewSwitcher({
         active={currentSelection === 'grid'}
         noPadding
       />
+      <SwitcherItem
+        className="md:hidden"
+        icon={<IconSets />}
+        href={PATH_SETS}
+        active={currentSelection === 'sets'}
+        noPadding
+      />
       {showAdmin &&
         <SwitcherItem
           icon={<BiLockAlt size={15} className="-translate-y-[1px]" />}

src/site/paths.ts

@@ -11,6 +11,7 @@ import { FilmSimulation } from '@/simulation';
 // Core paths
 export const PATH_ROOT      = '/';
 export const PATH_GRID      = '/grid';
+export const PATH_SETS      = '/sets';
 export const PATH_ADMIN     = '/admin';
 export const PATH_SIGN_IN   = '/sign-in';
 export const PATH_OG        = '/og';
@@ -230,6 +231,9 @@ export const checkPathPrefix = (pathname = '', prefix: string) =>
 export const isPathGrid = (pathname?: string) =>
   checkPathPrefix(pathname, PATH_GRID);
 
+export const isPathSets = (pathname?: string) =>
+  checkPathPrefix(pathname, PATH_SETS);
+
 export const isPathSignIn = (pathname?: string) =>
   checkPathPrefix(pathname, PATH_SIGN_IN);