refactor(docs): replace hard-coded z-index with constants for header/search overlay

Author: Mohit5Upadhyay

src/components/header.js

@@ -5,7 +5,7 @@ import * as Search from './search'
 import NavDrawer from './nav-drawer'
 import Link from './link'
 import useSearch from '../hooks/use-search'
-import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
+import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
 import headerNavItems from '../../content/header-nav.yml'
 import {DarkTheme} from '../theme'
 import SiteTitle from './site-title'
@@ -19,7 +19,7 @@ function Header() {
   const search = useSearch()
 
   return (
-    <DarkTheme sx={{top: 0, position: 'sticky', zIndex: 1}}>
+    <DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>
       <NpmHeaderBar />
       <Box
         as="header"

src/components/search.js

@@ -5,7 +5,7 @@ import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
 import TextInput from './text-input'
 import useSiteMetadata from '../hooks/use-site-metadata'
-import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
+import {HEADER_BAR, HEADER_HEIGHT, Z_INDEX} from '../constants'
 import {LightTheme} from '../theme'
 import {LinkNoUnderline} from './link'
 import * as getNav from '../util/get-nav'
@@ -132,7 +132,7 @@ export const Mobile = ({
                 left: 0,
                 right: 0,
                 bottom: 0,
-                zIndex: 1,
+                zIndex: Z_INDEX.SEARCH_OVERLAY,
               }}
             >
               <Box
@@ -169,7 +169,7 @@ export const Mobile = ({
                     borderColor: 'border.muted',
                     position: 'relative',
                     bg: 'canvas.default',
-                    zIndex: 9999, 
+                    zIndex: Z_INDEX.SEARCH_OVERLAY + 1, 
                   }}
                 >
                   <motion.div

src/constants.js

@@ -11,3 +11,8 @@ export const SKIP_TO_CONTENT_ID = 'skip-to-content'
 export const SKIP_TO_SEARCH_ID = 'search-box-input'
 
 export const CLI_PATH = '/cli'
+
+export const Z_INDEX = {
+  HEADER: 10,
+  SEARCH_OVERLAY: 25
+}