experiment: fixed top bar

components/ContentContainer.tsx

@@ -4,5 +4,9 @@ import { View, type ViewProps } from 'react-native';
 import tw from '~/util/tailwind';
 
 export default function ContentContainer({ children, style }: PropsWithChildren<ViewProps>) {
-  return <View style={[tw`mx-auto w-full max-w-layout flex-1`, style]}>{children}</View>;
+  return (
+    <View style={tw`bg-default`}>
+      <View style={[tw`mx-auto w-full max-w-layout flex-1`, style]}>{children}</View>
+    </View>
+  );
 }

components/Footer/index.tsx

@@ -1,7 +1,6 @@
 import { View } from 'react-native';
 
 import { A, P, useLayout } from '~/common/styleguide';
-import ContentContainer from '~/components/ContentContainer';
 import {
   Logo,
   PlatformAndroid,
@@ -22,7 +21,7 @@ export default function Footer() {
 
   return (
     <View style={tw`mt-1 w-full bg-palette-gray1 pb-7 pt-8 dark:bg-dark`}>
-      <ContentContainer>
+      <View style={tw`mx-auto w-full max-w-layout flex-1`}>
         <View style={tw`mx-auto mb-7 mt-1 max-w-footer flex-row flex-wrap justify-center gap-3.5`}>
           <PlatformTile
             name="Android"
@@ -98,7 +97,7 @@ export default function Footer() {
         <View style={tw`items-center pb-8 pt-12`}>
           <Logo style={tw`text-palette-gray3 dark:text-powder`} width={42} height={38} />
         </View>
-      </ContentContainer>
+      </View>
     </View>
   );
 }

components/Package/DetailsNavigation.tsx

@@ -2,7 +2,6 @@ import { Fragment } from 'react';
 import { View } from 'react-native';
 
 import { A, Label, useLayout } from '~/common/styleguide';
-import ContentContainer from '~/components/ContentContainer';
 import { Warning } from '~/components/Icons';
 import Navigation from '~/components/Navigation';
 import NavigationTab from '~/components/NavigationTab';
@@ -29,7 +28,7 @@ export default function DetailsNavigation({ library }: Props) {
               tw`border-b border-t border-palette-gray3 bg-palette-gray1 dark:border-palette-gray6 dark:bg-dark`,
               strippedBackground(tw.prefixMatch('dark') ? 'var(--background)' : 'var(--gray-2)'),
             ]}>
-            <ContentContainer
+            <View
               style={tw`flex-row flex-wrap items-center gap-x-0.5 gap-y-1 px-5 py-2 text-warning-dark dark:text-warning`}>
               <Warning style={tw`size-4.5 mr-1 flex-shrink-0`} />
               <Label style={tw`text-warning-dark dark:text-warning`}>
@@ -53,11 +52,11 @@ export default function DetailsNavigation({ library }: Props) {
                   instead.
                 </Label>
               )}
-            </ContentContainer>
+            </View>
           </View>
         ) : undefined
       }>
-      <ContentContainer style={tw`flex-row gap-2 px-5`}>
+      <View style={tw`mx-auto w-full max-w-screen-layout flex-row gap-2 px-5`}>
         <NavigationTab title="Overview" path={`/package/${library.npmPkg}`} />
         {!library.template && (
           <NavigationTab
@@ -67,7 +66,7 @@ export default function DetailsNavigation({ library }: Props) {
           />
         )}
         <NavigationTab title="Score" path={`/package/${library.npmPkg}/score`} />
-      </ContentContainer>
+      </View>
     </Navigation>
   );
 }

components/TopBar.tsx

@@ -3,7 +3,6 @@ import { useContext } from 'react';
 import { View } from 'react-native';
 
 import { A, H5, P, useLayout } from '~/common/styleguide';
-import ContentContainer from '~/components/ContentContainer';
 import NavigationTab from '~/components/NavigationTab';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import tw from '~/util/tailwind';
@@ -18,7 +17,8 @@ export default function TopBar() {
 
   return (
     <HtmlHeader
-      style={tw`items-center justify-center gap-y-2.5 overflow-hidden bg-palette-gray7 py-3.5 dark:bg-very-dark`}>
+      id="top-bar"
+      style={tw`top-0 w-full items-center justify-center gap-y-2.5 overflow-hidden py-3.5`}>
       <View style={tw`-mt-[1.5px] w-full max-w-layout flex-row items-center justify-between px-4`}>
         <View style={[tw`flex-row items-center`, !isBelowMaxWidth && tw`min-w-[255px]`]}>
           <Logo style={tw`text-primary`} width={29} height={26} />
@@ -29,11 +29,11 @@ export default function TopBar() {
           </H5>
         </View>
         <View style={[isBelowMaxWidth && tw`mr-auto`, isSmallScreen && tw`hidden`]}>
-          <ContentContainer style={tw`flex-row gap-2.5 px-4`}>
+          <View style={tw`flex-row gap-2.5 px-4`}>
             <NavigationTab title="Explore" path="/packages" />
             <NavigationTab title="Popular" />
             <NavigationTab title="Trending" />
-          </ContentContainer>
+          </View>
         </View>
         <View
           style={[
@@ -102,11 +102,11 @@ export default function TopBar() {
           </Button>
         </View>
       </View>
-      <ContentContainer style={[tw`flex-row gap-2.5 px-4`, !isSmallScreen && tw`hidden`]}>
+      <View style={[tw`flex-row gap-2.5 px-4`, !isSmallScreen && tw`hidden`]}>
         <NavigationTab title="Explore" path="/" />
         <NavigationTab title="Popular" />
         <NavigationTab title="Trending" />
-      </ContentContainer>
+      </View>
     </HtmlHeader>
   );
 }

pages/_app.tsx

@@ -32,7 +32,7 @@ function App({ pageProps, Component }: AppProps) {
               content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover"
             />
           </Head>
-          <main style={tw`flex flex-1 flex-col`}>
+          <main style={tw`flex flex-1 flex-col bg-palette-gray7 pt-[61px] dark:bg-very-dark`}>
             <Component {...pageProps} />
           </main>
           <Footer />

styles/styles.css

@@ -64,6 +64,7 @@
   --border: var(--gray-2);
   --border-secondary: #353840;
 
+  --top-bar: #21232af0;
   --overscroll-background: var(--gray-7);
   --outline: var(--primary-dark);
   --active: var(--primary-darker);
@@ -100,6 +101,7 @@
   --border: var(--accented);
   --border-secondary: var(--secondary);
 
+  --top-bar: #111114ed;
   --overscroll-background: var(--very-dark);
   --outline: var(--primary-dark);
   --active: var(--primary-dark);
@@ -138,6 +140,13 @@ input:focus-visible {
   @apply min-h-[100vh] bg-default;
 }
 
+#top-bar {
+  backdrop-filter: blur(6px);
+  position: fixed;
+  z-index: 100;
+  background-color: var(--top-bar);
+}
+
 /* SELECT */
 
 select {
@@ -353,7 +362,7 @@ select {
 /* PACKAGE STICKY CONTAINER */
 
 #metadataContainer {
-  top: 26px;
+  top: 87px;
   height: fit-content;
   position: sticky;
 }