Skip to content

Commit

Permalink
fix(nav): docs site navigation (#4083)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
PixeledCode authored Sep 26, 2024
1 parent fc1163f commit 2cf9ff8
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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"
Expand All @@ -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} />
Expand Down

0 comments on commit 2cf9ff8

Please sign in to comment.