RND-3532: drop down menu for hidden links at small screen size (#2434)

GitbookIO · Aug 19, 2024 · 5fe7adb · 5fe7adb
1 parent 41684d0
commit 5fe7adb
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 13 deletions.
diff --git a/.changeset/clean-balloons-travel.md b/.changeset/clean-balloons-travel.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+RND-3532: drop down menu for hidden links at small screen size
diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@gitbook/icons';
 import { DetailedHTMLProps, HTMLAttributes, useId } from 'react';
 
-import { tcls } from '@/lib/tailwind';
+import { ClassValue, tcls } from '@/lib/tailwind';
 
 import { Link } from '../primitives';
 
@@ -18,8 +18,10 @@ export function Dropdown<E extends HTMLElement>(props: {
     button: (buttonProps: DropdownButtonProps<E>) => React.ReactNode;
     /** Content of the dropdown */
     children: React.ReactNode;
+    /** Custom styles */
+    className?: ClassValue;
 }) {
-    const { button, children } = props;
+    const { button, children, className } = props;
     const dropdownId = useId();
 
     return (
@@ -47,6 +49,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                     'duration-1000',
                     'group-hover/dropdown:visible',
                     'group-focus-within/dropdown:visible',
+                    className,
                 )}
             >
                 <div

diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
@@ -14,6 +14,7 @@ import { ContentRefContext } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
 import { HeaderLink } from './HeaderLink';
+import { HeaderLinkMore } from './HeaderLinkMore';
 import { HeaderLinks } from './HeaderLinks';
 import { HeaderLogo } from './HeaderLogo';
 import { SpacesDropdown } from './SpacesDropdown';
@@ -90,6 +91,11 @@ export function Header(props: {
                                 />
                             );
                         })}
+                        <HeaderLinkMore
+                            label={t(getSpaceLanguage(customization), 'more')}
+                            links={customization.header.links}
+                            context={context}
+                        />
                     </HeaderLinks>
                     <div
                         className={tcls(

diff --git a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
@@ -0,0 +1,49 @@
+import { CustomizationHeaderLink } from '@gitbook/api';
+import React from 'react';
+
+import { ContentRefContext, resolveContentRef } from '@/lib/references';
+
+import { Dropdown, DropdownChevron, DropdownMenu, DropdownMenuItem } from './Dropdown';
+import styles from './headerLinks.module.css';
+
+/**
+ * Dropdown menu for header links hidden at small screen size.
+ */
+export function HeaderLinkMore(props: {
+    label: React.ReactNode;
+    links: CustomizationHeaderLink[];
+    context: ContentRefContext;
+}) {
+    const { label, links, context } = props;
+
+    const renderButton = () => (
+        <button className="px-1">
+            <span className="sr-only">{label}</span>
+            <DropdownChevron />
+        </button>
+    );
+
+    return (
+        <div className={`${styles.linkEllipsis} items-center`}>
+            <Dropdown button={renderButton} className="-translate-x-48 md:translate-x-0">
+                <DropdownMenu>
+                    {links.map((link, index) => (
+                        <MoreMenuLink key={index} link={link} context={context} />
+                    ))}
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+    );
+}
+
+async function MoreMenuLink(props: { context: ContentRefContext; link: CustomizationHeaderLink }) {
+    const { context, link } = props;
+
+    const target = await resolveContentRef(link.to, context);
+
+    if (!target) {
+        return null;
+    }
+
+    return <DropdownMenuItem href={target.href}>{link.title}</DropdownMenuItem>;
+}
diff --git a/packages/gitbook/src/components/Header/headerLinks.module.css b/packages/gitbook/src/components/Header/headerLinks.module.css
@@ -4,36 +4,83 @@
 }
 
 .containerHeaderlinks > * {
+    display: flex;
+}
+.linkEllipsis {
     display: none;
+    & div > a {
+        display: none;
+    }
 }
 
-@container headerlinks ( width > 150px ) {
-    .containerHeaderlinks > *:nth-child(1) {
+@container headerlinks ( width < 150px ) {
+    .containerHeaderlinks > :nth-child(n + 1) {
+        display: none;
+    }
+    .containerHeaderlinks > :nth-child(n + 1) ~ .linkEllipsis {
         display: flex;
+        & div > a:nth-of-type(n + 1) {
+            display: flex;
+        }
     }
 }
-@container headerlinks ( width > 300px ) {
-    .containerHeaderlinks > *:nth-child(2) {
+@container headerlinks ( width < 300px ) {
+    .containerHeaderlinks > :nth-child(n + 2) {
+        display: none;
+    }
+    .containerHeaderlinks > :nth-child(n + 2) ~ .linkEllipsis {
         display: flex;
+        & div > a:nth-of-type(n + 2) {
+            display: flex;
+        }
     }
 }
-@container headerlinks ( width > 450px ) {
-    .containerHeaderlinks > *:nth-child(3) {
+@container headerlinks ( width < 450px ) {
+    .containerHeaderlinks > :nth-child(n + 3) {
+        display: none;
+    }
+    .containerHeaderlinks > :nth-child(n + 3) ~ .linkEllipsis {
         display: flex;
+        & div > a:nth-of-type(n + 3) {
+            display: flex;
+        }
     }
 }
-@container headerlinks ( width > 600px ) {
-    .containerHeaderlinks > *:nth-child(4) {
+@container headerlinks ( width < 600px ) {
+    .containerHeaderlinks > :nth-child(n + 4) {
+        display: none;
+    }
+    .containerHeaderlinks > :nth-child(n + 4) ~ .linkEllipsis {
         display: flex;
+        & div > a:nth-of-type(n + 4) {
+            display: flex;
+        }
     }
 }
-@container headerlinks ( width > 750px ) {
-    .containerHeaderlinks > *:nth-child(5) {
+@container headerlinks ( width < 750px ) {
+    .containerHeaderlinks > :nth-child(n + 5) {
+        display: none;
+    }
+    .containerHeaderlinks > :nth-child(n + 5) ~ .linkEllipsis {
+        display: flex;
+        & div > :nth-child(n + 5) {
+            display: flex;
+        }
+    }
+}
+@container headerlinks ( width < 900px ) {
+    .containerHeaderlinks > :nth-child(n + 6) {
+        display: none;
+    }
+    .containerHeaderlinks > :nth-child(n + 6) ~ .linkEllipsis {
         display: flex;
+        & div > a:nth-of-type(n + 6) {
+            display: flex;
+        }
     }
 }
 @container headerlinks ( width > 900px ) {
-    .containerHeaderlinks > *:nth-child(n + 5) {
+    .containerHeaderlinks > *:not(.linkEllipsis) {
         display: flex;
     }
 }
diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts
@@ -53,4 +53,5 @@ export const de = {
     pdf_limit_reached:
         'Das PDF konnte für ${1} Seiten nicht generiert werden, Generierung wurde bei ${2} gestoppt.',
     pdf_limit_reached_continue: 'Mit ${1} weiteren Seiten erweitern.',
+    more: 'Mehr',
 };
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
@@ -51,4 +51,5 @@ export const en = {
     pdf_mode_all: 'All pages',
     pdf_limit_reached: "Couldn't generate the PDF for ${1} pages, generation stopped at ${2}.",
     pdf_limit_reached_continue: 'Extend with ${1} more pages.',
+    more: 'More',
 };
diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts
@@ -55,4 +55,5 @@ export const es: TranslationLanguage = {
     pdf_limit_reached:
         'No se pudo generar el PDF para ${1} páginas, la generación se detuvo en ${2}.',
     pdf_limit_reached_continue: 'Extender con ${1} páginas más.',
+    more: 'Más',
 };
diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts
@@ -53,4 +53,5 @@ export const fr: TranslationLanguage = {
     pdf_mode_all: 'Toutes les pages',
     pdf_limit_reached: 'Impossible de générer le PDF pour ${1} pages, génération arrêtée à ${2}.',
     pdf_limit_reached_continue: 'Étendre avec ${1} pages supplémentaires.',
+    more: 'Plus',
 };
diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts
@@ -53,4 +53,5 @@ export const ja: TranslationLanguage = {
     pdf_mode_all: '全てのページ',
     pdf_limit_reached: '${1}ページのPDFを生成できませんでした、${2}で生成が停止しました。',
     pdf_limit_reached_continue: 'さらに${1}ページで拡張',
+    more: '詳細',
 };
diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts
@@ -53,4 +53,5 @@ export const pt_br = {
     pdf_limit_reached:
         'Não foi possível gerar o PDF para ${1} páginas, generation stopped at ${2}.',
     pdf_limit_reached_continue: 'Extender com mais ${1} páginas.',
+    more: 'Mais',
 };
diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts
@@ -51,4 +51,5 @@ export const zh: TranslationLanguage = {
     pdf_mode_all: '所有页面',
     pdf_limit_reached: '无法为${1}页生成 PDF，生成在${2}页时停止。',
     pdf_limit_reached_continue: '使用${1}页进行扩展。',
+    more: '更多',
 };