Develop

apps/site/src/app/design-system/components/sidebar/components/navigation/navigation.component.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
-import { formatComponentSlug } from '@/utils/format';
+import { formatComponentSlug, formatNavItems, sortDeveloperMenu, sortMenu } from '@/utils/format';
 
 import { useSidebar } from '../../sidebar.context';
 
@@ -29,6 +29,14 @@ export function Navigation({ items, brand }: NavigationProps) {
 function List({ items, level = 0, crumbs, brand }: ListProps) {
   return items.map(item => {
     if (item.children) {
+      if (item.label.toLowerCase() === 'developers') {
+        const formattedItems = sortDeveloperMenu(item.children);
+        return (
+          <Group key={item.label} label={item.label} level={level} crumbs={crumbs}>
+            <List items={formattedItems} level={level + 1} crumbs={crumbs} brand={brand} />
+          </Group>
+        );
+      }
       return (
         <Group key={item.label} label={item.label} level={level} crumbs={crumbs}>
           <List items={item.children} level={level + 1} crumbs={crumbs} brand={brand} />

apps/site/src/utils/format.ts

@@ -33,6 +33,18 @@ export function formatNavItems(navList: { name: string; slug: string }[]) {
   return navItems;
 }
 
+function orderMenu(menuItems: Item[], order: string[]) {
+  const orderedMenu: Item[] = [];
+  order.forEach(item =>
+    menuItems.forEach(menuItem => {
+      if (item === menuItem.label.toLowerCase()) {
+        orderedMenu.push(menuItem);
+      }
+    }),
+  );
+  return orderedMenu;
+}
+
 // This had to be made as a separate function as adding some to formatNavItems too cognitively complex
 export function sortMenu(menuItems: Item[]) {
   const topLevelMenuOrder = [
@@ -46,13 +58,11 @@ export function sortMenu(menuItems: Item[]) {
     'design tokens',
   ];
 
-  const orderedMenu: Item[] = [];
-  topLevelMenuOrder.forEach(item =>
-    menuItems.forEach(menuItem => {
-      if (item === menuItem.label.toLowerCase()) {
-        orderedMenu.push(menuItem);
-      }
-    }),
-  );
-  return orderedMenu;
+  return orderMenu(menuItems, topLevelMenuOrder);
+}
+
+export function sortDeveloperMenu(menuItems: Item[]) {
+  const developersMenuOrder = ['set up', 'using components', 'using brands', 'eslint configuration', 'unit testing'];
+
+  return orderMenu(menuItems, developersMenuOrder);
 }

package.json

@@ -16,9 +16,10 @@
     "lint": "turbo run lint --no-daemon",
     "lint:fix": "turbo run lint:fix --no-daemon",
     "new:package": "node ./helpers/create-package/index.js",
-    "nuke": "pnpm nuke:node_modules && pnpm nuke:dist",
+    "nuke": "pnpm nuke:node_modules && pnpm nuke:dist && pnpm nuke:next",
     "nuke:node_modules": "find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \\;",
     "nuke:dist": "find . -name 'dist' -type d -prune -print -exec rm -rf '{}' \\;",
+    "nuke:next": "find . -name '.next' -type d -prune -print -exec rm -rf '{}' \\;",
     "prepare": "husky install",
     "test": "turbo run test --filter=./packages/* --no-daemon",
     "ci:build": "pnpm install --frozen-lockfile && pnpm format && pnpm build && pnpm lint && pnpm check-types && pnpm test",