Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement version dropdown #3967

Merged
merged 5 commits into from
Jan 23, 2024
Merged

Implement version dropdown #3967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8caca83
Implement version dropdown
luin Jan 23, 2024
c816a96
Remove Twitter icons
luin Jan 23, 2024
fd63319
Improve styles for search bar
luin Jan 23, 2024
3c228e3
Mobile support for main nav
luin Jan 23, 2024
0be5798
Improve mobile support for page nav
luin Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions packages/website/src/components/ClickOutsideHandler.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { useEffect, useRef } from 'react';

const TOUCH_EVENT = { react: 'onTouchStart', native: 'touchstart' };
const MOUSE_EVENT = { react: 'onMouseDown', native: 'mousedown' };

const setUpReactEventHandlers = (handler, props) => ({
...props,
[TOUCH_EVENT.react]: (e) => {
handler();
props[TOUCH_EVENT.react]?.(e);
},
[MOUSE_EVENT.react]: (e) => {
handler();
props[MOUSE_EVENT.react]?.(e);
},
});

const ClickOutsideHandler = ({ onClickOutside, ...props }) => {
const isTargetInsideReactTreeRef = useRef(false);

const onClickOutsideRef = useRef(onClickOutside);
useEffect(() => {
onClickOutsideRef.current = onClickOutside;
}, [onClickOutside]);

useEffect(() => {
const handler = (e) => {
if (!isTargetInsideReactTreeRef.current) {
onClickOutsideRef.current?.(e);
}

isTargetInsideReactTreeRef.current = false;
};

document.addEventListener(TOUCH_EVENT.native, handler, { passive: true });
document.addEventListener(MOUSE_EVENT.native, handler, { passive: true });
return () => {
document.removeEventListener(TOUCH_EVENT.native, handler);
document.removeEventListener(MOUSE_EVENT.native, handler);
};
}, []);

const handleReactEvent = () => {
isTargetInsideReactTreeRef.current = true;
};

return <div {...setUpReactEventHandlers(handleReactEvent, props)} />;
};

export default ClickOutsideHandler;
185 changes: 115 additions & 70 deletions packages/website/src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,119 @@ import classNames from 'classnames';
import LogoIcon from '../svg/logo.svg';
import Link from 'next/link';
import OctocatIcon from '../svg/octocat.svg';
import ExternalLinkIcon from '../svg/external-link.svg';
import DropdownIcon from '../svg/dropdown.svg';
import XIcon from '../svg/x.svg';
import GitHub from './GitHub';
import * as styles from './Header.module.scss';
import { DocSearch } from '@docsearch/react';
import { useState } from 'react';
import ActiveLink from './ActiveLink';
import ClickOutsideHandler from './ClickOutsideHandler';

const shortVersion = (version) => {
const parts = version.split('-');
const matched = parts[0].match(/(\d+)\.(\d+)\.\d+/);
if (!matched) return version;
return `${matched[1]}.${matched[2]}`;
};

const MainNav = ({ ...props }) => {
return (
<nav {...props}>
<ActiveLink
activeClassName={styles.active}
activePath="/docs"
href="/docs/quickstart"
>
Documentation
</ActiveLink>
<ActiveLink
activeClassName={styles.active}
activePath="/guides"
href="/guides/why-quill"
>
Guides
</ActiveLink>
<ActiveLink
activeClassName={styles.active}
activePath="/playground"
href="/playground"
>
Playground
</ActiveLink>
</nav>
);
};

const VersionSelector = () => {
const [isOpen, setIsOpen] = useState(false);

return (
<ClickOutsideHandler
onClickOutside={() => {
setIsOpen(false);
}}
className={styles.versionWrapper}
>
<div
role="button"
className={styles.version}
onClick={() => {
setIsOpen(!isOpen);
}}
>
v{shortVersion(process.env.version)} <DropdownIcon />
</div>
<div
role="menu"
className={classNames(styles.versionDropdown, {
[styles.isOpen]: isOpen,
})}
>
<a
role="menuitem"
href={`https://github.com/quilljs/quill/releases/tag/v${process.env.version}`}
className={styles.versionDropdownItem}
target="_blank"
>
Release Notes <ExternalLinkIcon />
</a>
<a
role="menuitem"
href={`https://github.com/quilljs/quill/blob/v${process.env.version}/.github/CONTRIBUTING.md`}
className={styles.versionDropdownItem}
target="_blank"
>
Contributing <ExternalLinkIcon />
</a>
<div className={styles.versionLabel}>Previous Versions</div>
<a
role="menuitem"
href="https://quilljs.com"
className={styles.versionDropdownItem}
target="_blank"
>
v{'1.3.7'} <ExternalLinkIcon />
</a>
</div>
</ClickOutsideHandler>
);
};

const Header = () => {
const [isNavOpen, setIsNavOpen] = useState(false);

return (
<header className={styles.header}>
<nav className={classNames('navbar-drop', { active: isNavOpen })}>
<button
className="navbar-close"
onClick={() => setIsNavOpen(false)}
></button>
<ul>
<li className="navbar-item">
<Link className="navbar-link" href="/docs/quickstart">
Documentation
</Link>
</li>
<li className="navbar-item">
<Link className="navbar-link" href="/guides/why-quill">
Guides
</Link>
</li>
<li className="navbar-item">
<Link className="navbar-link" href="/playground">
Playground
</Link>
</li>
<li className="navbar-item" style={{ display: 'none' }}>
<Link className="navbar-link" href="/blog/">
Blog
</Link>
</li>
<li className={classNames(styles.githubMenuItem)}>
<GitHub dark />
</li>
</ul>
</nav>
<div className={styles.headerContent}>
<Link className={styles.logo} href="/">
<LogoIcon width="60" />
<div className={styles.version}>v2</div>
</Link>
<nav className={styles.mainNav}>
<ActiveLink
activeClassName={styles.active}
activePath="/docs"
href="/docs/quickstart"
>
Documentation
</ActiveLink>
<ActiveLink
activeClassName={styles.active}
activePath="/guides"
href="/guides/why-quill"
>
Guides
</ActiveLink>
<ActiveLink
activeClassName={styles.active}
activePath="/playground"
href="/playground"
>
Playground
</ActiveLink>
</nav>
<div className={styles.logo}>
<Link href="/">
<LogoIcon width="60" />
</Link>
<VersionSelector />
</div>
<MainNav className={styles.mainNav} />
<nav className={styles.secondaryNav}>
<a
href="https://github.com/quilljs/quill"
Expand All @@ -81,25 +123,28 @@ const Header = () => {
>
<OctocatIcon />
</a>
<a
href="https://twitter.com/quilljs"
target="_blank"
title="Quill on X"
>
<XIcon />
</a>
<DocSearch
appId="quilljs"
indexName="quilljs"
apiKey="281facf513620e95600126795a00ab6c"
/>
</nav>
<button
className={styles.mobileNavToggle}
onClick={() => setIsNavOpen(!isNavOpen)}
>
<span></span>
<span></span>
<span></span>
</button>
</div>
<div
className={classNames(styles.mobileNav, {
[styles.isNavOpen]: isNavOpen,
})}
>
<MainNav className={styles.mobileMainNav} />
</div>
<button className="navbar-open" onClick={() => setIsNavOpen(true)}>
<span></span>
<span></span>
<span></span>
</button>
</header>
);
};
Expand Down
Loading