introducing layouts for every route for better and finer control

itsmegood · Feb 1, 2024 · d40ce1e · d40ce1e
1 parent 4e7e41a
commit d40ce1e
Show file tree

Hide file tree

Showing 21 changed files with 551 additions and 491 deletions.
diff --git a/.env.example b/.env.example
@@ -12,4 +12,4 @@ SENTRY_DSN="your-dsn"
 # if they aren't then the real github api will be attempted
 GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
 GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"
-GITHUB_TOKEN="MOCK_GITHUB_TOKEN"
+GITHUB_TOKEN="MOCK_GITHUB_TOKEN"
diff --git a/app/components/layout/header.tsx b/app/components/layout/header.tsx
@@ -1,4 +1,4 @@
-import { Form, Link, useMatches, useSubmit } from '@remix-run/react'
+import { Form, Link, useSubmit } from '@remix-run/react'
 import { useEffect, useRef, useState } from 'react'
 
 import { getUserImgSrc } from '#app/utils/misc.tsx'
@@ -35,10 +35,10 @@ export function HeaderNav({
 	const [searchExpand, setSearchExpand] = useState(false)
 	const searchRef = useRef<HTMLInputElement>(null)
 
-	const matches = useMatches()
-	const isProjectPage = matches.find(
-		match => match.id === 'routes/projects+/index',
-	)
+	// const matches = useMatches()
+	// const isProjectPage = matches.find(
+	// 	match => match.id === 'routes/projects+/index',
+	// )
 
 	const handleSearchExpand = () => {
 		setSearchExpand(true)
@@ -54,38 +54,18 @@ export function HeaderNav({
 	return (
 		<>
 			<header
-				className={
-					sticky
-						? 'sticky top-0 z-50 rounded-sm bg-background/95 shadow-sm backdrop-blur-md'
-						: 'shadow-sm'
-				}
+			// className={
+			// 	sticky
+			// 		? 'sticky top-0 z-50 rounded-sm bg-background/95 shadow-sm backdrop-blur-md'
+			// 		: 'shadow-sm'
+			// }
 			>
-				<nav className="inline-flex w-full items-center justify-between p-3">
+				<nav className="flex w-full items-center justify-between p-6">
 					<div className="flex items-center justify-between gap-2 md:w-1/4">
-						<MobileNav menuItems={mobileNavItems} />
+						{mobileNavItems && <MobileNav menuItems={mobileNavItems} />}
 
-						<Link to="/" className="inline-flex items-center">
-							<svg
-								className="mr-2 cursor-none text-primary lg:cursor-auto"
-								width="35"
-								height="35"
-								viewBox="0 0 97 85"
-								fill="none"
-							>
-								<path
-									d="M96.1608 1.3148C98.5608 36.1148 73.4941 47.1481 60.6608 48.3148C81.8608 52.3148 84.4941 71.9815 83.1608 81.3148C57.9608 85.3148 50.9941 60.9815 50.6608 48.3148C51.8608 5.9148 81.4941 -0.685196 96.1608 1.3148Z"
-									fill="currentColor"
-									stroke="currentColor"
-								/>
-								<path
-									d="M1.16077 1.3148C-1.23923 36.1148 23.8274 47.1481 36.6608 48.3148C15.4608 52.3148 12.8274 71.9815 14.1608 81.3148C39.3608 85.3148 46.3274 60.9815 46.6608 48.3148C45.4608 5.9148 15.8274 -0.685196 1.16077 1.3148Z"
-									fill="currentColor"
-									stroke="currentColor"
-								/>
-							</svg>
-							<span className="hidden text-2xl font-semibold text-primary md:block">
-								BloomBacker
-							</span>
+						<Link to="/" className="text-2xl font-semibold text-primary">
+							䷸ Book<span className="text-sky-400">Breeze</span>
 						</Link>
 					</div>
 
@@ -95,7 +75,7 @@ export function HeaderNav({
 								className={
 									searchExpand
 										? 'absolute left-0 top-0 z-50 inline-flex w-full items-center justify-center gap-2 border-b bg-background p-3 md:hidden'
-										: 'flex px-8 md:w-2/4'
+										: 'flex md:w-2/4'
 								}
 							>
 								{searchExpand && (
@@ -105,58 +85,36 @@ export function HeaderNav({
 									</Button>
 								)}
 
-								{!isProjectPage && (
-									<SearchBar
-										action="/projects"
-										status="idle"
-										searchRef={searchRef}
-										onSubmitHandler={_ => {
-											searchRef.current?.blur()
-											setSearchExpand(false)
-										}}
-										className={searchExpand ? '' : 'hidden md:flex'}
-									/>
-								)}
+								{/* {!isProjectPage && ( */}
+								<SearchBar
+									action="/projects"
+									status="idle"
+									searchRef={searchRef}
+									onSubmitHandler={_ => {
+										searchRef.current?.blur()
+										setSearchExpand(false)
+									}}
+									className={searchExpand ? '' : 'hidden md:flex'}
+								/>
+								{/* )} */}
 							</div>
 
-							<div className="flex items-center justify-end md:w-1/4 md:justify-between">
-								<div className="hidden items-center gap-4 md:inline-flex">
-									<Button asChild size="sm">
-										<Link to="/projects">
-											<Icon name="compass" size="sm">
-												<span className="hidden md:block">Discover</span>
-											</Icon>
-										</Link>
-									</Button>
-									<Button asChild variant="link">
-										<Link to="/studio/projects/new" className="hidden lg:flex">
-											Start A Project
-										</Link>
-									</Button>
-								</div>
-
-								<div className="inline-flex gap-4">
-									{!searchExpand && (
-										<>
-											<Button asChild size="sm">
-												<Link to="/projects" className="md:hidden">
-													<Icon name="compass" size="sm" />
-												</Link>
-											</Button>
-											{!isProjectPage && (
-												<Button
-													size="sm"
-													variant="outline"
-													onClick={handleSearchExpand}
-													className="md:hidden"
-												>
-													<Icon name="magnifying-glass" size="sm" />
-													<span className="sr-only">Search</span>
-												</Button>
-											)}
-										</>
-									)}
-								</div>
+							<div className="inline-flex gap-4">
+								{!searchExpand && (
+									<>
+										{/* {!isProjectPage && ( */}
+										<Button
+											size="sm"
+											variant="outline"
+											onClick={handleSearchExpand}
+											className="md:hidden"
+										>
+											<Icon name="magnifying-glass" size="sm" />
+											<span className="sr-only">Search</span>
+										</Button>
+										{/* )} */}
+									</>
+								)}
 							</div>
 						</>
 					)}

diff --git a/app/components/layout/mobile-nav.tsx b/app/components/layout/mobile-nav.tsx
@@ -15,13 +15,13 @@ export function MobileNav({
 }) {
 	return (
 		<Sheet>
-			<SheetTrigger className="flex cursor-none items-center rounded-md border border-primary p-1 md:hidden">
+			<SheetTrigger className="flex cursor-none items-center rounded-md border border-primary p-1 lg:hidden">
 				<Icon name="menu" size="lg" />
 				<span className="sr-only">Toggle Menu</span>
 			</SheetTrigger>
 			<SheetContent
 				side="left"
-				className="h-screen overflow-y-auto border md:hidden"
+				className="h-screen overflow-y-auto border lg:hidden"
 			>
 				<div className="flex flex-col gap-4">
 					<div className="inline-flex">

diff --git a/app/components/ui/icons/name.d.ts b/app/components/ui/icons/name.d.ts
@@ -1,36 +1,36 @@
 // This file is generated by npm run build:icons
 
 export type IconName =
-	| 'arrow-left'
-	| 'arrow-right'
-	| 'avatar'
-	| 'camera'
-	| 'check'
-	| 'clock'
-	| 'compass'
-	| 'cross-1'
-	| 'dots-horizontal'
-	| 'double-arrow-left'
-	| 'double-arrow-right'
-	| 'download'
-	| 'envelope-closed'
-	| 'exit'
-	| 'eye-open'
-	| 'file-text'
-	| 'gift'
-	| 'github-logo'
-	| 'laptop'
-	| 'link-2'
-	| 'lock-closed'
-	| 'lock-open-1'
-	| 'magnifying-glass'
-	| 'menu'
-	| 'moon'
-	| 'pencil-1'
-	| 'pencil-2'
-	| 'plus'
-	| 'question-mark-circled'
-	| 'reset'
-	| 'sun'
-	| 'trash'
-	| 'update'
+	| "arrow-left"
+	| "arrow-right"
+	| "avatar"
+	| "camera"
+	| "check"
+	| "clock"
+	| "compass"
+	| "cross-1"
+	| "dots-horizontal"
+	| "double-arrow-left"
+	| "double-arrow-right"
+	| "download"
+	| "envelope-closed"
+	| "exit"
+	| "eye-open"
+	| "file-text"
+	| "gift"
+	| "github-logo"
+	| "laptop"
+	| "link-2"
+	| "lock-closed"
+	| "lock-open-1"
+	| "magnifying-glass"
+	| "menu"
+	| "moon"
+	| "pencil-1"
+	| "pencil-2"
+	| "plus"
+	| "question-mark-circled"
+	| "reset"
+	| "sun"
+	| "trash"
+	| "update";