2️⃣ Chapter 2.2: Web Header

apps/next/pages/_app.tsx

@@ -1,4 +1,5 @@
 import 'raf/polyfill'
+import { WebLayout } from 'app/layout/web'
 
 const fixReanimatedIssue = () => {
   // FIXME remove this once this reanimated fix gets released
@@ -28,7 +29,9 @@ function MyApp({ Component, pageProps }: SolitoAppProps) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Provider>
-        <Component {...pageProps} />
+        <WebLayout>
+          <Component {...pageProps} />
+        </WebLayout>
       </Provider>
     </>
   )

packages/app/features/home/screen.tsx

@@ -16,7 +16,7 @@ export function HomeScreen() {
           sx={{
             py: '$2',
             px: '$3',
-            bg: '$purple3',
+            bg: '$background3',
           }}
         >
           Hello Solito

packages/app/layout/web/index.tsx

@@ -0,0 +1,82 @@
+import { View, Text, A } from 'dripsy'
+import { useRouter } from 'next/router'
+import { Fragment } from 'react'
+import { Link } from 'solito/link'
+
+const tabs: Array<{
+  pathname: string
+  isActive(pathname: string): boolean
+  name: string
+}> = [
+  {
+    pathname: '/',
+    isActive: (pathname) => pathname === '/',
+    name: 'Home',
+  },
+  {
+    pathname: '/users',
+    isActive: (pathname) => pathname.startsWith('/users'),
+    name: 'Users',
+  },
+]
+
+const height = 34
+
+// this will only run on Web
+export function WebLayout({ children }) {
+  const { pathname } = useRouter()
+  return (
+    <>
+      <View
+        sx={{
+          height,
+          bg: '$background2',
+          position: 'sticky',
+          top: 0,
+          zIndex: 2,
+          px: '$3',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <View
+          sx={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: '$3',
+          }}
+        >
+          {tabs.map((tab) => {
+            const active = tab.isActive(pathname)
+            return (
+              <Fragment key={tab.pathname}>
+                <Link href={tab.pathname}>
+                  <Text
+                    sx={{
+                      lineHeight: height,
+                      fontWeight: active ? 'bold' : undefined,
+                      color: active ? '#00C2D7' : '$text',
+                    }}
+                  >
+                    {tab.name}
+                  </Text>
+                </Link>
+              </Fragment>
+            )
+          })}
+        </View>
+        <Text
+          href="https://twitter.com/fernandotherojo"
+          hrefAttrs={{
+            target: '_blank',
+            rel: 'noreferrer',
+          }}
+        >
+          by Fernando Rojo
+        </Text>
+      </View>
+      {children}
+    </>
+  )
+}

packages/app/provider/dripsy.tsx

@@ -7,7 +7,7 @@ const theme = makeTheme({
     $background2: 'rgb(28, 28, 31)',
     $background3: '#28282C',
     $purple3: '#32275F',
-    $text: '#ffffff',
+    $text: '#EDEDEF',
   },
   text: {
     body: {