♻️ Use consistent tab positioning between sites

chowdhary-org · Apr 25, 2024 · af80791 · af80791
1 parent f5330b6
commit af80791
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 44 deletions.
diff --git a/src/app/foundation/components/Header.tsx b/src/app/foundation/components/Header.tsx
@@ -1,22 +1,38 @@
-import { Button } from '@/app/foundation/components/Button'
-import { Container } from '@/app/foundation/components/Container'
-import { Logo } from '@/app/foundation/components/Logo'
+import { Button } from '@/app/holdings/components/Button'
+import { Container } from '@/app/holdings/components/Container'
+import { Logo } from '@/app/holdings/components/Logo'
 
 export function Header() {
   return (
-    <header className="border-primary-500 relative z-50 flex-none border-b bg-white lg:pt-6">
-      <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
-        <div className="mt-10 flex items-center gap-8 lg:mt-0 lg:grow lg:basis-0">
-          <div className="border-primary-500 bg-primary-50 -my-px flex items-center gap-4 rounded-t-3xl border border-b-0 px-8 py-4">
-            <Logo className="text-primary-500 h-12 w-auto" />
-            <div className="text-xl font-bold uppercase">Foundation</div>
+    <header className="relative z-50 flex-none border-b border-primary-500 bg-white lg:pt-6">
+      <Container className="flex flex-wrap items-center justify-center text-center sm:justify-between lg:flex-nowrap">
+        <div className="pt-8 lg:hidden">
+          <div className="flex justify-center">
+            <Logo className="mb-8 h-12 w-auto text-primary-500" />
+          </div>
+          <div className="grid grid-cols-2 items-center">
+            <a
+              className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+              href="https://chowdhary.co"
+            >
+              Holdings
+            </a>
+            <div className="-my-px rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4 text-xl font-bold uppercase">
+              Foundation
+            </div>
           </div>
+        </div>
+        <div className="mt-10 hidden items-center gap-8 lg:mt-0 lg:flex lg:grow lg:basis-0">
           <a
-            className="focus-visible:outline-primary-500 text-primary-800 rounded text-xl font-bold uppercase focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
             href="https://chowdhary.co"
           >
             Holdings
           </a>
+          <div className="-my-px flex items-center gap-4 rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4">
+            <Logo className="h-12 w-auto text-primary-500" />
+            <div className="text-xl font-bold uppercase">Foundation</div>
+          </div>
         </div>
         <div className="hidden sm:mt-10 sm:flex lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
           <Button href="#apply">Apply for a grant</Button>

diff --git a/src/app/holdings/components/Header.tsx b/src/app/holdings/components/Header.tsx
@@ -4,15 +4,31 @@ import { Logo } from '@/app/holdings/components/Logo'
 
 export function Header() {
   return (
-    <header className="border-primary-500 relative z-50 flex-none border-b bg-white lg:pt-6">
-      <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
-        <div className="mt-10 flex items-center gap-8 lg:mt-0 lg:grow lg:basis-0">
-          <div className="border-primary-500 bg-primary-50 -my-px flex items-center gap-4 rounded-t-3xl border border-b-0 px-8 py-4">
-            <Logo className="text-primary-500 h-12 w-auto" />
+    <header className="relative z-50 flex-none border-b border-primary-500 bg-white lg:pt-6">
+      <Container className="flex flex-wrap items-center justify-center text-center sm:justify-between lg:flex-nowrap">
+        <div className="pt-8 lg:hidden">
+          <div className="flex justify-center">
+            <Logo className="mb-8 h-12 w-auto text-primary-500" />
+          </div>
+          <div className="grid grid-cols-2 items-center">
+            <div className="-my-px rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4 text-xl font-bold uppercase">
+              Holdings
+            </div>
+            <a
+              className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+              href="https://chowdhary.org"
+            >
+              Foundation
+            </a>
+          </div>
+        </div>
+        <div className="mt-10 hidden items-center gap-8 lg:mt-0 lg:flex lg:grow lg:basis-0">
+          <div className="-my-px flex items-center gap-4 rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4">
+            <Logo className="h-12 w-auto text-primary-500" />
             <div className="text-xl font-bold uppercase">Holdings</div>
           </div>
           <a
-            className="focus-visible:outline-primary-500 text-primary-800 rounded text-xl font-bold uppercase focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
             href="https://chowdhary.org"
           >
             Foundation

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx