fix(docs): remove single intem nav groups

Hyperkid123 · Mar 3, 2021 · 1386f40 · 1386f40
1 parent 4edd9b6
commit 1386f40
Showing 1 changed file with 66 additions and 29 deletions.
diff --git a/packages/docs/components/navigation/index.js b/packages/docs/components/navigation/index.js
@@ -11,9 +11,74 @@ const useStyles = createUseStyles({
         '& > button': {
             textTransform: 'capitalize'
         }
+    },
+    groupLink: {
+        'font-size': 14
     }
 });
 
+const NavigationGroup = ({ group, items, packageName }) => {
+    const classes = useStyles();
+    const { pathname } = useRouter();
+    if (items.length === 1) {
+        const  item = items[0];
+        const title = typeof item === 'object' ? item.title : item;
+        const name = typeof item === 'object' ? item.name : item;
+        return (
+            <NavItem
+                id={`/${packageName}/${name}`}
+                to={`/${packageName}/${name}`}
+                ouiaId={`/${packageName}/${name}`}
+                key={name}
+                component={({ children, ...props }) => (
+                    <Link {...props}>
+                        <a className={classnames('pf-c-nav__link', {
+                            'pf-m-current': props.href === pathname
+                        })}>
+                            {children}
+                        </a>
+                    </Link>
+                )}
+            >
+                {title}
+            </NavItem>
+        );
+    }
+
+    return (
+        <NavGroup
+            key={group}
+            title={group}
+            className={classes.capitalize}
+        >
+            {items.map(item => {
+                const title = typeof item === 'object' ? item.title : item;
+                const name = typeof item === 'object' ? item.name : item;
+                return (
+                    <NavItem
+                        id={`/${packageName}/${name}`}
+                        to={`/${packageName}/${name}`}
+                        ouiaId={`/${packageName}/${name}`}
+                        key={name}
+                        component={({ children, ...props }) => (
+                            <Link {...props}>
+                                <a className={classnames('pf-c-nav__link', classes.groupLink, {
+                                // eslint-disable-next-line react/prop-types
+                                    'pf-m-current': props.href === pathname
+                                })}>
+                                    {children}
+                                </a>
+                            </Link>
+                        )}
+                    >
+                        {title}
+                    </NavItem>
+                );
+            })}
+        </NavGroup>
+    );
+};
+
 const Navigation = () => {
     const { pathname } = useRouter();
     const classes = useStyles();
@@ -30,35 +95,7 @@ const Navigation = () => {
                         isExpanded={pathname.includes(`/${packageName}`)}
                     >
                         {groups.map(({ group, items }) => (
-                            <NavGroup
-                                key={group}
-                                title={group}
-                                className={classes.capitalize}
-                            >
-                                {items.map(item => {
-                                    const title = typeof item === 'object' ? item.title : item;
-                                    const name = typeof item === 'object' ? item.name : item;
-                                    return (
-                                        <NavItem
-                                            id={`/${packageName}/${name}`}
-                                            to={`/${packageName}/${name}`}
-                                            ouiaId={`/${packageName}/${name}`}
-                                            key={name}
-                                            component={({ children, ...props }) => (
-                                                <Link {...props}>
-                                                    <a className={classnames('pf-c-nav__link', {
-                                                    // eslint-disable-next-line react/prop-types
-                                                        'pf-m-current': props.href === pathname
-                                                    })}>
-                                                        {children}
-                                                    </a>
-                                                </Link>
-                                            )}
-                                        >
-                                            {title}
-                                        </NavItem>
-                                    );})}
-                            </NavGroup>
+                            <NavigationGroup key={group} group={group} items={items} packageName={packageName} />
                         ))}
                     </NavExpandable>
                 ))}