feat: desktop top nav init

src/app/components/DesktopTopNav.css.ts

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css'
+import { primitiveColorVars, topNavVars, viewportVars } from '../styles/vars.css.js'
+
+export const root = style({
+  backgroundColor: `color-mix(in srgb, ${primitiveColorVars.background} 98%, transparent)`,
+  height: topNavVars.height,
+  '@media': {
+    [viewportVars['max-1080px']]: {
+      display: 'none',
+    },
+  },
+})
+
+export const curtain = style(
+  {
+    background: `linear-gradient(${primitiveColorVars.background}, transparent 70%)`,
+    height: '30px',
+    opacity: 0.98,
+    width: '100%',
+    '@media': {
+      [viewportVars['max-1080px']]: {
+        display: 'none',
+      },
+    },
+  },
+  'curtain',
+)

src/app/components/DesktopTopNav.tsx

@@ -0,0 +1,11 @@
+import { curtain, root } from './DesktopTopNav.css.js'
+
+DesktopTopNav.Curtain = Curtain
+
+export function DesktopTopNav() {
+  return <div className={root} />
+}
+
+export function Curtain() {
+  return <div className={curtain} />
+}

src/app/components/TopNav.css.ts → src/app/components/MobileTopNav.css.ts

@@ -6,6 +6,7 @@ import {
   lineHeightVars,
   primitiveColorVars,
   spaceVars,
+  viewportVars,
 } from '../styles/vars.css.js'
 
 const fadeIn = keyframes(
@@ -20,45 +21,52 @@ const fadeIn = keyframes(
   'fadeIn',
 )
 
-export const upper = style(
-  {
-    alignItems: 'center',
-    backgroundColor: primitiveColorVars.backgroundDark,
-    borderBottom: `1px solid ${primitiveColorVars.border}`,
-    display: 'flex',
-    height: '100%',
-    padding: `${spaceVars['0']} ${contentVars.horizontalPadding}`,
-    width: '100%',
+export const root = style({
+  alignItems: 'center',
+  backgroundColor: primitiveColorVars.backgroundDark,
+  borderBottom: `1px solid ${primitiveColorVars.border}`,
+  display: 'none',
+  height: '100%',
+  padding: `${spaceVars['0']} ${contentVars.horizontalPadding}`,
+  width: '100%',
+  '@media': {
+    [viewportVars['max-1080px']]: {
+      display: 'flex',
+    },
   },
-  'upper',
-)
+})
 
-export const lower = style(
+export const curtain = style(
   {
     alignItems: 'center',
     backgroundColor: primitiveColorVars.backgroundDark,
     borderBottom: `1px solid ${primitiveColorVars.border}`,
-    display: 'flex',
+    display: 'none',
     justifyContent: 'space-between',
     fontSize: fontSizeVars['13'],
     fontWeight: fontWeightVars.medium,
     height: '100%',
     padding: `${spaceVars['0']} ${contentVars.horizontalPadding}`,
     width: '100%',
+    '@media': {
+      [viewportVars['max-1080px']]: {
+        display: 'flex',
+      },
+    },
   },
-  'lower',
+  'curtain',
 )
 
-export const lowerGroup = style(
+export const curtainGroup = style(
   {
     alignItems: 'center',
     display: 'flex',
     gap: spaceVars['12'],
   },
-  'lowerGroup',
+  'curtainGroup',
 )
 
-export const lowerItem = style({}, 'lowerItem')
+export const curtainItem = style({}, 'curtainItem')
 
 export const menuTrigger = style(
   {

src/app/components/TopNav.tsx → src/app/components/MobileTopNav.tsx

@@ -4,17 +4,19 @@ import { config } from 'virtual:config'
 
 import type { Sidebar, SidebarItem } from '../../config.js'
 import { Icon } from './Icon.js'
-import * as styles from './TopNav.css.js'
+import * as styles from './MobileTopNav.css.js'
 
-export function UpperTopNav() {
+MobileTopNav.Curtain = Curtain
+
+export function MobileTopNav() {
   return (
-    <div className={styles.upper}>
+    <div className={styles.root}>
       <div className={styles.title}>Vocs</div>
     </div>
   )
 }
 
-export function LowerTopNav({
+export function Curtain({
   enableScrollToTop,
   MenuTrigger,
   OutlineTrigger,
@@ -42,19 +44,19 @@ export function LowerTopNav({
   const title = sidebarItemTitle || contentTitle
 
   return (
-    <div className={styles.lower}>
-      <div className={styles.lowerGroup}>
-        <div className={styles.lowerItem}>
+    <div className={styles.curtain}>
+      <div className={styles.curtainGroup}>
+        <div className={styles.curtainItem}>
           <MenuTrigger className={styles.menuTrigger}>
             <Icon label="Menu" src="/.vocs/icons/menu.svg" size="13px" />
             {title}
           </MenuTrigger>
         </div>
       </div>
-      <div className={styles.lowerGroup}>
+      <div className={styles.curtainGroup}>
         {enableScrollToTop && (
           <>
-            <div className={styles.lowerItem}>
+            <div className={styles.curtainItem}>
               <button
                 className={styles.outlineTrigger}
                 onClick={() => window.scrollTo({ behavior: 'smooth', top: 0 })}
@@ -67,7 +69,7 @@ export function LowerTopNav({
             <div className={styles.separator} />
           </>
         )}
-        <div className={styles.lowerItem}>
+        <div className={styles.curtainItem}>
           <OutlineTrigger className={styles.outlineTrigger}>
             On this page
             <Icon label="On this page" src="/.vocs/icons/chevron-right.svg" size="10px" />

src/app/components/PageLayout.css.ts

@@ -21,8 +21,11 @@ export const content = style(
   {
     marginLeft: leftGutterWidthVar,
     maxWidth: contentVars.width,
-    minHeight: `calc(100vh - (${topNavVars.lowerHeight} + ${topNavVars.upperHeight}))`,
+    minHeight: `calc(100vh - (${topNavVars.height} + ${topNavVars.curtainHeight}))`,
     '@media': {
+      [viewportVars['min-1080px']]: {
+        paddingTop: topNavVars.height,
+      },
       [viewportVars['max-1080px']]: {
         display: 'flex',
         marginLeft: 'auto',
@@ -51,46 +54,53 @@ export const gutterLeft = style(
   'gutterLeft',
 )
 
-export const gutterTopLower = style(
+export const gutterTop = style(
   {
     alignItems: 'center',
-    display: 'none',
-    position: 'sticky',
-    top: 0,
-    height: topNavVars.lowerHeight,
+    height: topNavVars.height,
     width: '100vw',
     zIndex: zIndexVars.gutterTop,
     '@media': {
+      [viewportVars['min-1080px']]: {
+        marginLeft: leftGutterWidthVar,
+        position: 'fixed',
+        top: 0,
+      },
       [viewportVars['max-1080px']]: {
-        display: 'flex',
+        position: 'initial',
       },
     },
   },
-  'gutterTopLower',
+  'gutterTop',
 )
 
-export const gutterTopUpper = style(
+export const gutterTopCurtain = style(
   {
-    alignItems: 'center',
-    display: 'none',
-    height: topNavVars.upperHeight,
+    display: 'flex',
+    height: topNavVars.curtainHeight,
     width: '100vw',
     zIndex: zIndexVars.gutterTop,
     '@media': {
+      [viewportVars['min-1080px']]: {
+        marginLeft: leftGutterWidthVar,
+        position: 'fixed',
+        top: topNavVars.height,
+      },
       [viewportVars['max-1080px']]: {
-        display: 'flex',
+        position: 'sticky',
+        top: 0,
       },
     },
   },
-  'gutterTopUpper',
+  'gutterTopCurtain',
 )
 
 export const gutterRight = style(
   {
     display: 'flex',
     height: '100vh',
     overflow: 'scroll',
-    padding: `${contentVars.verticalPadding} ${spaceVars['24']} 0 0`,
+    padding: `calc(${contentVars.verticalPadding} + ${topNavVars.height}) ${spaceVars['24']} 0 0`,
     position: 'fixed',
     top: '0',
     right: '0',

src/app/components/PageLayout.tsx

@@ -2,9 +2,10 @@ import { type ReactNode, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { Content } from '../components/Content.js'
+import { MobileTopNav } from '../components/MobileTopNav.js'
 import { Sidebar } from '../components/Sidebar.js'
 import { SidebarDrawer } from '../components/SidebarDrawer.js'
-import { LowerTopNav, UpperTopNav } from '../components/TopNav.js'
+import { DesktopTopNav } from './DesktopTopNav.js'
 import { Outline } from './Outline.js'
 import * as styles from './PageLayout.css.js'
 import { Popover } from './Popover.js'
@@ -27,13 +28,16 @@ export function PageLayout({
       <div className={styles.gutterLeft}>
         <Sidebar />
       </div>
-      <div ref={ref} className={styles.gutterTopUpper}>
-        <UpperTopNav />
+      <div ref={ref} className={styles.gutterTop}>
+        <DesktopTopNav />
+        <MobileTopNav />
       </div>
-      <div className={styles.gutterTopLower}>
+      <div className={styles.gutterTopCurtain}>
+        <DesktopTopNav.Curtain />
+
         <SidebarDrawer.Root open={isSidebarOpen} onOpenChange={setSidebarOpen}>
           <Popover.Root open={isOutlineOpen} onOpenChange={setOutlineOpen}>
-            <LowerTopNav
+            <MobileTopNav.Curtain
               enableScrollToTop={!inView}
               MenuTrigger={SidebarDrawer.Trigger}
               OutlineTrigger={Popover.Trigger}

src/app/components/Sidebar.css.ts

@@ -69,7 +69,7 @@ export const title = style(
     alignItems: 'center',
     borderBottom: `1px solid ${primitiveColorVars.border}`,
     display: 'flex',
-    height: topNavVars.upperHeight,
+    height: topNavVars.height,
     fontSize: fontSizeVars['18'],
     fontWeight: fontWeightVars.semibold,
     lineHeight: lineHeightVars.heading,

src/app/components/mdx/Heading.css.ts

@@ -1,5 +1,12 @@
 import { style } from '@vanilla-extract/css'
-import { fontWeightVars, lineHeightVars, topNavVars, viewportVars } from '../../styles/vars.css.js'
+import {
+  fontWeightVars,
+  lineHeightVars,
+  spaceVars,
+  topNavVars,
+  viewportVars,
+} from '../../styles/vars.css.js'
+import { root as Header } from './Header.css.js'
 
 export const root = style({
   alignItems: 'center',
@@ -16,8 +23,21 @@ export const slugTarget = style(
     top: '0px',
     visibility: 'hidden',
     '@media': {
+      [viewportVars['min-1080px']]: {
+        top: `calc(-1 * (${topNavVars.height}))`,
+        selectors: {
+          [`${Header} &, ${Header} + ${root} &`]: {
+            top: `calc(-1 * (${topNavVars.height} + ${spaceVars['24']}))`,
+          },
+        },
+      },
       [viewportVars['max-1080px']]: {
-        top: `calc(-1 * ${topNavVars.lowerHeight})`,
+        top: `calc(-1 * ${topNavVars.curtainHeight})`,
+        selectors: {
+          [`${Header} &, ${Header} + ${root} &`]: {
+            top: `calc(-1 * calc(${topNavVars.curtainHeight} + ${spaceVars['24']}))`,
+          },
+        },
       },
     },
   },

src/app/styles/vars.css.ts

@@ -369,8 +369,11 @@ createGlobalTheme(':root', spaceVars, {
 
 export const viewportVars = {
   'max-720px': 'screen and (width <= 720px)',
+  'min-720px': 'screen and (width > 720px)',
   'max-1080px': 'screen and (width <= 1080px)',
+  'min-1080px': 'screen and (width > 1080px)',
   'max-1280px': 'screen and (width <= 1280px)',
+  'min-1280px': 'screen and (width > 1280px)',
 }
 
 export const zIndexVars = createGlobalThemeContract(
@@ -408,7 +411,7 @@ export const contentVars = createGlobalThemeContract(
 )
 createGlobalTheme(':root', contentVars, {
   horizontalPadding: spaceVars['48'],
-  verticalPadding: spaceVars['80'],
+  verticalPadding: spaceVars['48'],
   width: `calc(70ch + (${contentVars.horizontalPadding} * 2))`,
 })
 
@@ -426,14 +429,14 @@ createGlobalTheme(':root', sidebarVars, {
 
 export const topNavVars = createGlobalThemeContract(
   {
-    upperHeight: 'upperHeight',
-    lowerHeight: 'lowerHeight',
+    height: 'height',
+    curtainHeight: 'curtainHeight',
   },
   getVarName('topNav'),
 )
 createGlobalTheme(':root', topNavVars, {
-  upperHeight: '60px',
-  lowerHeight: '40px',
+  height: '60px',
+  curtainHeight: '40px',
 })
 
 globalStyle(':root', {