fix(nav): docs site navigation (#4083)

* fix(mobile-nav): horizontal scroll issue on header

* feat(mobile-nav): update mobile paste logo

* feat(mobile-nav): fix build issue

* feat(mobile-nav): update search bar height

Author: PixeledCode

packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx

@@ -8,7 +8,6 @@ import * as React from "react";
 
 import { event } from "../../../lib/gtag";
 import { PasteIcon } from "../../icons/PasteIcon";
-import { PasteIconPride } from "../../icons/PasteIconPride";
 
 const LogoLink = styled(Link)`
   position: relative;
@@ -37,10 +36,6 @@ interface SiteHeaderLogoProps {
  */
 const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = ({ title, subtitle }) => {
   const theme = useTheme();
-  const [logoOpacity, setLogoOpacity] = React.useState(1);
-  const [hoverOpacity, setHoverOpacity] = React.useState(0);
-  const logoTransition = "ease-out 350ms";
-
   return (
     <Box display="flex" alignItems="center" minWidth={subtitle ? "sizeSidebar" : "size0"}>
       <LogoLink
@@ -52,28 +47,10 @@ const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = (
             label: "Paste logo",
           })
         }
-        onMouseEnter={() => {
-          setLogoOpacity(0);
-          setHoverOpacity(1);
-        }}
-        onMouseLeave={() => {
-          setLogoOpacity(1);
-          setHoverOpacity(0);
-        }}
       >
         <MediaObject verticalAlign="center">
           <MediaFigure spacing="space40">
-            <PasteIconPride display="block" size={42} transition={logoTransition} opacity={logoOpacity} />
-            <PasteIcon
-              color={theme.textColors.colorTextBrandHighlight}
-              opacity={hoverOpacity}
-              transition={logoTransition}
-              display="block"
-              position="absolute"
-              top="0"
-              left="0"
-              size={42}
-            />
+            <PasteIcon color={theme.textColors.colorTextBrandHighlight} display="block" size={38} />
           </MediaFigure>
           <MediaBody>
             <Text as="div" fontSize="fontSize40" lineHeight="lineHeight30" color="colorText">

packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx

@@ -4,13 +4,15 @@ import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
 import { InlineCode } from "@twilio-paste/inline-code";
 import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
 import { Text } from "@twilio-paste/text";
+import { useWindowSize } from "@twilio-paste/utils";
 import * as React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 import { SiteSearch } from "../../site-search";
 
 const SiteHeaderSearch: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const { breakpointIndex } = useWindowSize();
 
   const onOpen = (): void => {
     setIsOpen(true);
@@ -35,7 +37,8 @@ const SiteHeaderSearch: React.FC = () => {
         paddingTop="space20"
         borderStyle="solid"
         boxShadow="shadowBorder"
-        minWidth="200px"
+        minWidth={breakpointIndex === 0 ? "150px" : "200px"}
+        minHeight="36px"
         color="colorTextIcon"
         variant="reset"
         size="reset"
@@ -59,11 +62,15 @@ const SiteHeaderSearch: React.FC = () => {
               Search
             </Text>
           </Box>
-          <Box as="span" aria-hidden="true">
-            <InlineCode>⌘</InlineCode>
-            <InlineCode>K</InlineCode>
-          </Box>
-          <ScreenReaderOnly>Keyboard shortcut: Command / Control K</ScreenReaderOnly>
+          {breakpointIndex === 0 ? null : (
+            <>
+              <Box as="span" aria-hidden="true">
+                <InlineCode>⌘</InlineCode>
+                <InlineCode>K</InlineCode>
+              </Box>
+              <ScreenReaderOnly>Keyboard shortcut: Command / Control K</ScreenReaderOnly>
+            </>
+          )}
         </Box>
       </Button>
       <SiteSearch isOpen={isOpen} onDismiss={onClose} />