Skip to content

Improve animation of section tabs #2553

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

Merged
merged 6 commits into from
Oct 25, 2024
Merged

Improve animation of section tabs #2553

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89896f9
Improve animation of section tabs
BrettJephson Oct 24, 2024
935e24d
Formatting
BrettJephson Oct 24, 2024
e242c3c
Add changeset
BrettJephson Oct 24, 2024
4bc4220
Tweak animation
BrettJephson Oct 24, 2024
6ed0532
Resolve comments
BrettJephson Oct 25, 2024
cdb421b
Formatting
BrettJephson Oct 25, 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
Prev Previous commit
Next Next commit
Formatting
  • Loading branch information
@BrettJephson
BrettJephson committed Oct 25, 2024
commit 935e24d4a44bd9104bb9fd0f53aa72a128ebd535
49 changes: 24 additions & 25 deletions packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
const currentTabRef = React.useRef<HTMLAnchorElement>(null);
const navRef = React.useRef<HTMLDivElement>(null);

// we don't set the current tab with a click event because the tab will navigate to a different section and trigger a page reload.
const currentIndex = sections.findIndex((section) => section.id === currentSection?.id);
// we don't set the current tab with a click event because the tab will navigate to a different section and trigger a page reload.
const currentIndex = sections.findIndex((section) => section.id === currentSection?.id);

const [tabDimensions, setTabDimensions] = React.useState<{
left: number;
Expand All @@ -48,7 +48,7 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
() => {
window.removeEventListener('resize', updateTabDimensions);
window.removeEventListener('load', updateTabDimensions);
}
};
}, [updateTabDimensions]);

const opacity = Boolean(tabDimensions) ? 1 : 0.0;
Expand Down Expand Up @@ -114,28 +114,27 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
/**
* The tab item - a link to a site section
*/
const Tab = React.forwardRef<
HTMLSpanElement,
{ active: boolean; href: string; label: string; }
>(function Tab(props, ref) {
const { active, href, label } = props;
return (
<Link
className={tcls(
'px-3 py-1 my-2 rounded straight-corners:rounded-none transition-colors',
active && 'text-primary dark:text-primary-400',
!active &&
'text-dark/8 hover:bg-dark/1 hover:text-dark/9 dark:text-light/8 dark:hover:bg-light/2 dark:hover:text-light/9',
)}
role="tab"
href={href}
>
<span ref={ref} className={tcls('inline-flex w-full truncate')}>
{label}
</span>
</Link>
);
});
const Tab = React.forwardRef<HTMLSpanElement, { active: boolean; href: string; label: string }>(
function Tab(props, ref) {
const { active, href, label } = props;
return (
<Link
className={tcls(
'px-3 py-1 my-2 rounded straight-corners:rounded-none transition-colors',
active && 'text-primary dark:text-primary-400',
!active &&
'text-dark/8 hover:bg-dark/1 hover:text-dark/9 dark:text-light/8 dark:hover:bg-light/2 dark:hover:text-light/9',
)}
role="tab"
href={href}
>
<span ref={ref} className={tcls('inline-flex w-full truncate')}>
{label}
</span>
</Link>
);
},
);

/**
* Dropdown trigger for when there are too many sections to show them all
Expand Down