refactor: do not include header in root layout

This patch removes the `<Header>` from the root layout and instead creates a new `_header` layout that uses the sticky version of the header and updates the `_layout` layout to include a header that is simply part of the column flex.
nicholaschiang · Aug 7, 2023 · a24b102 · a24b102
1 parent e489f00
commit a24b102
Show file tree

Hide file tree

Showing 19 changed files with 78 additions and 55 deletions.
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -0,0 +1,61 @@
+import { Link, useMatches } from '@remix-run/react'
+import { User, LogIn, LogOut, ChevronRight } from 'lucide-react'
+import { Fragment } from 'react'
+
+import { ThemeSwitcher } from 'components/theme-switcher'
+import { buttonVariants } from 'components/ui/button'
+
+import { type Handle } from 'root'
+import { useOptionalUser } from 'utils'
+import { cn } from 'utils/cn'
+
+export function Header({ className }: { className?: string }) {
+  const matches = useMatches()
+  const user = useOptionalUser()
+  return (
+    <header
+      className={cn(
+        'bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-700 px-6 flex items-center justify-between h-10 z-10',
+        className,
+      )}
+    >
+      <ol className='flex items-center gap-2 text-lg tracking-tighter lowercase'>
+        {matches
+          .filter((match) => match.handle && match.handle.breadcrumb)
+          .map((match, index) => (
+            <Fragment key={match.id}>
+              {index !== 0 && (
+                <ChevronRight className='text-gray-300 dark:text-gray-600 h-4 w-4 mt-0.5' />
+              )}
+              <li>{(match.handle as Handle).breadcrumb(match)}</li>
+            </Fragment>
+          ))}
+      </ol>
+      <div className='flex items-center'>
+        {!matches.some((match) => match.id.includes('login')) && (
+          <Link
+            aria-label={user ? 'Log out' : 'Log in'}
+            className={buttonVariants({ size: 'icon', variant: 'ghost' })}
+            to={user ? '/logout' : '/login'}
+          >
+            {user ? (
+              <LogOut className='w-3 h-3' />
+            ) : (
+              <LogIn className='w-3 h-3' />
+            )}
+          </Link>
+        )}
+        {user && (
+          <Link
+            aria-label='Edit profile'
+            className={buttonVariants({ size: 'icon', variant: 'ghost' })}
+            to='/profile'
+          >
+            <User className='w-3 h-3' />
+          </Link>
+        )}
+        <ThemeSwitcher />
+      </div>
+    </header>
+  )
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -9,7 +9,6 @@ import {
   useLoaderData,
   useRouteError,
   isRouteErrorResponse,
-  useMatches,
   useNavigation,
   useNavigationType,
   type RouteMatch,
@@ -23,12 +22,8 @@ import {
   json,
 } from '@vercel/remix'
 import cn from 'classnames'
-import { User, LogIn, LogOut, ChevronRight } from 'lucide-react'
 import NProgress from 'nprogress'
-import { Fragment, type ReactNode, useEffect } from 'react'
-
-import { ThemeSwitcher } from 'components/theme-switcher'
-import { buttonVariants } from 'components/ui/button'
+import { type ReactNode, useEffect } from 'react'
 
 import tailwindStylesheetUrl from 'styles/tailwind.css'
 
@@ -41,7 +36,6 @@ import {
   isTheme,
   useTheme,
 } from 'theme'
-import { useOptionalUser } from 'utils'
 
 export type Handle = { breadcrumb: (match: RouteMatch) => ReactNode }
 
@@ -241,7 +235,6 @@ function App({ data, children }: { data?: LoaderData; children: ReactNode }) {
         <ThemeHead ssrTheme={Boolean(data?.theme)} />
       </head>
       <body className='bg-white text-gray-900 selection:bg-gray-200 selection:text-gray-900 dark:bg-gray-950 dark:text-gray-50 dark:selection:bg-gray-800 dark:selection:text-gray-50'>
-        <Header />
         {children}
         <script
           dangerouslySetInnerHTML={{
@@ -258,52 +251,6 @@ function App({ data, children }: { data?: LoaderData; children: ReactNode }) {
   )
 }
 
-function Header() {
-  const matches = useMatches()
-  const user = useOptionalUser()
-  return (
-    <header className='sticky top-0 bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-700 px-6 flex items-center justify-between h-10 z-10'>
-      <ol className='flex items-center gap-2 text-lg tracking-tighter lowercase'>
-        {matches
-          .filter((match) => match.handle && match.handle.breadcrumb)
-          .map((match, index) => (
-            <Fragment key={match.id}>
-              {index !== 0 && (
-                <ChevronRight className='text-gray-300 dark:text-gray-600 h-4 w-4 mt-0.5' />
-              )}
-              <li>{(match.handle as Handle).breadcrumb(match)}</li>
-            </Fragment>
-          ))}
-      </ol>
-      <div className='flex items-center'>
-        {!matches.some((match) => match.id.includes('login')) && (
-          <Link
-            aria-label={user ? 'Log out' : 'Log in'}
-            className={buttonVariants({ size: 'icon', variant: 'ghost' })}
-            to={user ? '/logout' : '/login'}
-          >
-            {user ? (
-              <LogOut className='w-3 h-3' />
-            ) : (
-              <LogIn className='w-3 h-3' />
-            )}
-          </Link>
-        )}
-        {user && (
-          <Link
-            aria-label='Edit profile'
-            className={buttonVariants({ size: 'icon', variant: 'ghost' })}
-            to='/profile'
-          >
-            <User className='w-3 h-3' />
-          </Link>
-        )}
-        <ThemeSwitcher />
-      </div>
-    </header>
-  )
-}
-
 function ErrorDisplay({ children }: { children: ReactNode }) {
   return (
     <ThemeProvider specifiedTheme={null}>

diff --git a/app/routes/join.tsx → app/routes/_header.join.tsx b/app/routes/join.tsx → app/routes/_header.join.tsx
diff --git a/app/routes/login.tsx → app/routes/_header.login.tsx b/app/routes/login.tsx → app/routes/_header.login.tsx
diff --git a/app/routes/logout.tsx → app/routes/_header.logout.tsx b/app/routes/logout.tsx → app/routes/_header.logout.tsx
diff --git a/...me.($sex).$brandSlug/consumer-reviews.tsx → ...me.($sex).$brandSlug/consumer-reviews.tsx b/...me.($sex).$brandSlug/consumer-reviews.tsx → ...me.($sex).$brandSlug/consumer-reviews.tsx
diff --git a/...Name.($sex).$brandSlug/critic-reviews.tsx → ...Name.($sex).$brandSlug/critic-reviews.tsx b/...Name.($sex).$brandSlug/critic-reviews.tsx → ...Name.($sex).$brandSlug/critic-reviews.tsx
diff --git a/...easonName.($sex).$brandSlug/designers.tsx → ...easonName.($sex).$brandSlug/designers.tsx b/...easonName.($sex).$brandSlug/designers.tsx → ...easonName.($sex).$brandSlug/designers.tsx
diff --git a/...ame.($sex).$brandSlug/rate-and-review.tsx → ...ame.($sex).$brandSlug/rate-and-review.tsx b/...ame.($sex).$brandSlug/rate-and-review.tsx → ...ame.($sex).$brandSlug/rate-and-review.tsx
diff --git a/...r.$seasonName.($sex).$brandSlug/route.tsx → ...r.$seasonName.($sex).$brandSlug/route.tsx b/...r.$seasonName.($sex).$brandSlug/route.tsx → ...r.$seasonName.($sex).$brandSlug/route.tsx
diff --git a/...nName.($sex).$brandSlug/scores-header.tsx → ...nName.($sex).$brandSlug/scores-header.tsx b/...nName.($sex).$brandSlug/scores-header.tsx → ...nName.($sex).$brandSlug/scores-header.tsx
diff --git a/...$seasonName.($sex).$brandSlug/section.tsx → ...$seasonName.($sex).$brandSlug/section.tsx b/...$seasonName.($sex).$brandSlug/section.tsx → ...$seasonName.($sex).$brandSlug/section.tsx
diff --git a/...easonName.($sex).$brandSlug/show-info.tsx → ...easonName.($sex).$brandSlug/show-info.tsx b/...easonName.($sex).$brandSlug/show-info.tsx → ...easonName.($sex).$brandSlug/show-info.tsx
diff --git a/...onName.($sex).$brandSlug/what-to-know.tsx → ...onName.($sex).$brandSlug/what-to-know.tsx b/...onName.($sex).$brandSlug/what-to-know.tsx → ...onName.($sex).$brandSlug/what-to-know.tsx
diff --git a/...onName.($sex).$brandSlug/where-to-buy.tsx → ...onName.($sex).$brandSlug/where-to-buy.tsx b/...onName.($sex).$brandSlug/where-to-buy.tsx → ...onName.($sex).$brandSlug/where-to-buy.tsx
diff --git a/app/routes/shows._index.tsx → app/routes/_header.shows._index.tsx b/app/routes/shows._index.tsx → app/routes/_header.shows._index.tsx
diff --git a/app/routes/shows.tsx → app/routes/_header.shows.tsx b/app/routes/shows.tsx → app/routes/_header.shows.tsx
diff --git a/app/routes/_header.tsx b/app/routes/_header.tsx
@@ -0,0 +1,12 @@
+import { Outlet } from '@remix-run/react'
+
+import { Header } from 'components/header'
+
+export default function HeaderLayout() {
+  return (
+    <>
+      <Header className='sticky top-0' />
+      <Outlet />
+    </>
+  )
+}
diff --git a/app/routes/_layout.tsx b/app/routes/_layout.tsx
@@ -1,6 +1,8 @@
 import { Prisma } from '@prisma/client'
 import { Outlet } from '@remix-run/react'
 
+import { Header } from 'components/header'
+
 import { log } from 'log.server'
 
 export function loader() {
@@ -46,7 +48,8 @@ export function loader() {
 
 export default function LayoutPage() {
   return (
-    <main className='fixed inset-0 pt-10 flex flex-col overflow-hidden'>
+    <main className='fixed inset-0 flex flex-col overflow-hidden'>
+      <Header className='flex-none' />
       <Outlet />
     </main>
   )