Update the nav bar (#41)

* Update the nav bar Closes #4 Apply changes made to the nav bar in `gravitational/docs` since we added the `DropdownMenu` component to `gravitational/docs-website`. * Add `inTwoColumns` to the nav bar query Responds to TuukkaIkius feedback.
gravitational · Dec 18, 2024 · b7c3d2c · b7c3d2c
1 parent d6165c1
commit b7c3d2c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 37 deletions.
diff --git a/server/sanity.ts b/server/sanity.ts
@@ -106,6 +106,7 @@ const navQuery = `
         }
       }
     }
+    inTwoColumns
   },
   rightSide {
     search {

diff --git a/src/components/DropdownMenu/DropdownMenuItem.tsx b/src/components/DropdownMenu/DropdownMenuItem.tsx
@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 import Link from "../Link";
 
 import styles from "./DropdownMenuItem.module.css";
-
+import cn from "classnames";
 export interface MenuItemProps {
   itemType: string | "normal" | "image";
   icon?: string | null;
@@ -59,7 +59,7 @@ const DropdownMenuItem = ({
               alt=""
             />
           </div>
-          <div className={clsx(styles.item, styles.imageItemText)} {...props}>
+          <div className={cn(styles.item, styles.imageItemText)} {...props}>
             <p className={styles.imageItemTitle}>{customImage?.itemTitle}</p>
             {customImage?.imageDate && (
               <p className={styles.dateText}>{customImage?.imageDate}</p>

diff --git a/src/components/DropdownMenu/DropdownSection.module.css b/src/components/DropdownMenu/DropdownSection.module.css
@@ -61,3 +61,12 @@
     }
   }
 }
+
+.inTwoColumns {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 4px;
+  @media (--nav) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
diff --git a/src/components/DropdownMenu/DropdownSection.tsx b/src/components/DropdownMenu/DropdownSection.tsx
@@ -1,6 +1,5 @@
-import { clsx } from "clsx";
-
 import styles from "./DropdownSection.module.css";
+import cn from "classnames";
 
 export interface DropdownMenuProps {
   title?: string;
@@ -11,6 +10,7 @@ export interface DropdownMenuProps {
   isImageLink?: boolean;
   childLength?: number;
   isFirst: boolean;
+  inTwoColumns?: boolean;
 }
 
 const DropdownSection = ({
@@ -23,12 +23,13 @@ const DropdownSection = ({
   childLength = 3,
   isFirst,
   className,
+  inTwoColumns = false,
   ...props
 }: DropdownMenuProps & React.HTMLAttributes<HTMLDivElement>) => {
   const textExists = title || subtitle ? true : false;
   return (
     <div
-      className={clsx(
+      className={cn(
         styles.dropdownSection,
         isFirst && styles.first,
         className && className
@@ -41,7 +42,13 @@ const DropdownSection = ({
           {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
         </div>
       )}
-      <div className={clsx(styles.sectionBox, textExists && styles.hasText)}>
+      <div
+        className={cn(
+          styles.sectionBox,
+          textExists && styles.hasText,
+          inTwoColumns && styles.inTwoColumns
+        )}
+      >
         {children}
       </div>
     </div>

diff --git a/src/components/DropdownMenu/DropdownSubMenu.tsx b/src/components/DropdownMenu/DropdownSubMenu.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { clsx } from "clsx";
 
 import type { NavigationItem } from "../../../server/sanity-types";
 import Icon from "../Icon";
 import Link from "../Link";
 
 import DropdownMenuItem from "./DropdownMenuItem";
+import cn from "classnames";
 import DropdownSection from "./DropdownSection";
 import styles from "./DropdownSubMenu.module.css";
 
@@ -33,11 +33,19 @@ const DropdownSubMenu = ({ items }: DropdownMenuProps) => {
             return (
               <div
                 key={`submenu-${submenuTitle}-${index}`}
-                className={clsx(
+                className={cn(
                   styles.subMenu,
                   index === activeTab ? styles.active : ""
                 )}
                 onClick={() => setActiveTab(index)}
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setActiveTab(index);
+                  }
+                }}
+                aria-expanded={activeTab === index}
               >
                 {submenuTitle}
                 <Icon name="arrowRight" size="sm" />
@@ -51,36 +59,47 @@ const DropdownSubMenu = ({ items }: DropdownMenuProps) => {
         .map(({ submenuSections, submenuTitle }, i) => (
           <div
             key={`wrapper${submenuTitle}-${i}`}
-            className={clsx(
-              styles.wrapper,
-              i === activeTab ? styles.active : ""
-            )}
+            className={cn(styles.wrapper, i === activeTab ? styles.active : "")}
           >
-            {submenuSections?.map((section, index) => (
-              <DropdownSection
-                key={`drsection${section.title}-${index}`}
-                titleLink={false}
-                isImageLink={false}
-                title={section.title || undefined}
-                subtitle={section.subtitle}
-                isFirst={index === 0}
-                className={clsx(
-                  styles.dropdownSection,
-                  section.sectionItems.find(
-                    ({ itemType }) => itemType === "normal"
-                  ) && styles.normal,
-                  index === submenuSections.length - 1 && styles.last
-                )}
-              >
-                {section.sectionItems.map((sectionItemProps, i) => (
-                  <DropdownMenuItem
-                    key={`${sectionItemProps.title}-item${i}`}
-                    title={sectionItemProps.title || undefined}
-                    {...sectionItemProps}
-                  />
-                ))}
-              </DropdownSection>
-            ))}
+            {submenuSections?.map((section, index) => {
+              const middleIndex = Math.ceil(section.sectionItems.length / 2);
+              const items = section.inTwoColumns
+                ? [
+                    section.sectionItems.slice(0, middleIndex),
+                    section.sectionItems.slice(middleIndex),
+                  ]
+                : [section.sectionItems];
+              return (
+                <DropdownSection
+                  key={`drsection${section.title}-${index}`}
+                  titleLink={false}
+                  isImageLink={false}
+                  title={section.title || undefined}
+                  subtitle={section.subtitle}
+                  isFirst={index === 0}
+                  inTwoColumns={section?.inTwoColumns}
+                  className={cn(
+                    styles.dropdownSection,
+                    section.sectionItems.find(
+                      ({ itemType }) => itemType === "normal"
+                    ) && styles.normal,
+                    index === submenuSections.length - 1 && styles.last
+                  )}
+                >
+                  {items.map((item, j) => (
+                    <div key={`submenu-items-${item[0]?.title}-${j}`}>
+                      {item.map((sectionItemProps, i) => (
+                        <DropdownMenuItem
+                          title={sectionItemProps?.title || undefined}
+                          key={`${sectionItemProps?.title}-item${i}`}
+                          {...sectionItemProps}
+                        />
+                      ))}
+                    </div>
+                  ))}
+                </DropdownSection>
+              );
+            })}
           </div>
         ))}
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -106,6 +106,7 @@ const navQuery = ` @@
             }
           }
         }
+        inTwoColumns
       },
       rightSide {
         search {
@@ Expand Down @@