wip

zaknesler · Jul 1, 2023 · e066cdc · e066cdc
1 parent 526f99b
commit e066cdc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/components/list.tsx b/src/components/list.tsx
@@ -14,13 +14,15 @@ export const RecipeList: React.FC<RecipeListProps> = ({
   notFoundText = 'No recipes found',
 }) => {
   return (
-    <div className="flex flex-col gap-4 md:gap-8">
+    <div className="flex flex-1 flex-col gap-4 md:gap-8">
       {isLoading ? (
         <PulsingItems count={3} itemHeightClass="h-32" />
       ) : recipes?.length ? (
         recipes.map(recipe => <RecipeSummary key={recipe.id} recipe={recipe} />)
       ) : (
-        <p className="text-center">{notFoundText}</p>
+        <p className="flex flex-1 items-center justify-center text-center">
+          {notFoundText}
+        </p>
       )}
     </div>
   )

diff --git a/src/components/nav.tsx b/src/components/nav.tsx
@@ -74,20 +74,20 @@ export const Nav: React.FC<NavProps> = ({ open, onToggle }) => {
       </nav>
 
       {open && (
-        <div className="flex h-full flex-1 flex-col justify-between gap-4">
-          <div className="flex flex-1 flex-col justify-center overflow-y-auto text-center font-semibold">
+        <div className="flex flex-1 flex-col gap-4">
+          <div className="flex flex-1 flex-col justify-center gap-1 overflow-hidden text-center text-lg font-semibold">
             {links.map(link => (
               <Link
                 key={link.label}
                 href={link.href}
                 title={link.label}
-                className="p-3"
+                className="p-3 hover:bg-gray-100"
               >
                 {link.label}
               </Link>
             ))}
           </div>
-          <Search expanded className="print:hidden" inputClassName="p-3" />
+          <Search expanded className="flex print:hidden" inputClassName="p-3" />
         </div>
       )}
     </>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -32,10 +32,12 @@ const MyApp: AppType = ({ Component, pageProps }) => {
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       </Head>
       <main
-        className={`${monoFont.variable} mx-auto flex h-full w-full max-w-5xl flex-col gap-4 p-4 font-mono md:gap-8 md:p-8`}
+        className={`${monoFont.variable} mx-auto flex h-full w-full max-w-5xl flex-col font-mono`}
       >
-        <Nav open={navOpen} onToggle={() => setNavOpen(!navOpen)} />
-        {!navOpen && <Component {...pageProps} />}
+        <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+          <Nav open={navOpen} onToggle={() => setNavOpen(!navOpen)} />
+          {!navOpen && <Component {...pageProps} />}
+        </div>
       </main>
     </>
   )