@sfdc-webapps/feature-navigation-menu 1.0.2

package/feature.ts

@@ -0,0 +1,5 @@
+import type { Feature } from '../cli/src/types.js';
+
+const feature: Feature = {};
+
+export default feature;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@sfdc-webapps/feature-navigation-menu",
+  "version": "1.0.2",
+  "description": "Navigation menu feature for web applications",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "cd dist/digitalExperiences/webApplications/feature-navigation-menu && yarn && yarn dev",
+    "build": "node ../cli/dist/index.js apply-patches packages/feature-navigation-menu packages/base-react-app packages/feature-navigation-menu/dist --clean",
+    "watch": "node ../cli/dist/index.js watch-patches packages/feature-navigation-menu packages/base-react-app packages/feature-navigation-menu/dist --clean"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1"
+  }
+}

package/template/webApp/src/about.tsx

@@ -0,0 +1,10 @@
+export default function About() {
+    return (
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div className="text-center">
+                <h1 className="text-4xl font-bold text-gray-900 mb-4">About</h1>
+                <p className="text-lg text-gray-600">This is the about page.</p>
+            </div>
+        </div>
+    );
+}

package/template/webApp/src/appLayout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router";
+import NavigationMenu from "./navigationMenu";
+
+export default function AppLayout() {
+    return (
+        <>
+            <NavigationMenu />
+            <Outlet />
+        </>
+    );
+}

package/template/webApp/src/navigationMenu.tsx

@@ -0,0 +1,75 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+    const [isOpen, setIsOpen] = useState(false);
+    const location = useLocation();
+  
+    const isActive = (path: string) => location.pathname === path;
+  
+    const toggleMenu = () => setIsOpen(!isOpen);
+
+    // Get all route configs and filter by showInNavigation
+    const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+        .filter(route => route.handle?.showInNavigation === true && route.fullPath !== undefined && route.handle?.label !== undefined)
+        .map(route => ({
+            path: route.fullPath,
+            label: route.handle?.label
+        } as { path: string; label: string }));
+  
+    return (
+      <nav className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <Link to="/" className="text-xl font-semibold text-gray-900">
+              React App
+            </Link>
+            <button
+              onClick={toggleMenu}
+              className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label="Toggle menu"
+            >
+              <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+                <span
+                  className={`block h-0.5 w-6 bg-current transition-all ${
+                    isOpen ? 'rotate-45 translate-y-2' : ''
+                  }`}
+                />
+                <span
+                  className={`block h-0.5 w-6 bg-current transition-all ${
+                    isOpen ? 'opacity-0' : ''
+                  }`}
+                />
+                <span
+                  className={`block h-0.5 w-6 bg-current transition-all ${
+                    isOpen ? '-rotate-45 -translate-y-2' : ''
+                  }`}
+                />
+              </div>
+            </button>
+          </div>
+          {isOpen && (
+            <div className="pb-4">
+              <div className="flex flex-col space-y-2">
+                {navigationRoutes.map(item => (
+                  <Link
+                    key={item.path}
+                    to={item.path}
+                    onClick={() => setIsOpen(false)}
+                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      isActive(item.path)
+                        ? 'bg-blue-100 text-blue-700'
+                        : 'text-gray-700 hover:bg-gray-100'
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </nav>
+    );
+  }

package/template/webApp/src/new.tsx

@@ -0,0 +1,10 @@
+export default function New() {
+    return (
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div className="text-center">
+                <h1 className="text-4xl font-bold text-gray-900 mb-4">New</h1>
+                <p className="text-lg text-gray-600">This is the new page.</p>
+            </div>
+        </div>
+    );
+}

package/template/webApp/src/router-utils.tsx

@@ -0,0 +1,36 @@
+import type { RouteObject } from "react-router";
+import { routes } from "./routes";
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (route: RouteObject, parentPath: string = ''): RouteWithFullPath[] => {
+    // Construct the full path for this route
+    let fullPath: string;
+
+    if (route.index) {
+        // Index routes use the parent path
+        fullPath = parentPath || '/';
+    } else if (route.path) {
+        // Combine parent path with current path
+        if (route.path.startsWith('/')) {
+            fullPath = route.path;
+        } else {
+            fullPath = parentPath === '/'
+                ? `/${route.path}`
+                : `${parentPath}/${route.path}`;
+        }
+    } else {
+        fullPath = parentPath;
+    }
+
+    const routeWithPath = { ...route, fullPath };
+
+    // Recursively process children
+    const childRoutes = route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+    return [routeWithPath, ...childRoutes];
+}
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+    return routes.flatMap(route => flatMapRoutes(route));
+}

package/template/webApp/src/routes.tsx

@@ -0,0 +1,28 @@
+import type { RouteObject } from "react-router";
+import AppLayout from "./appLayout";
+import About from './about'
+import New from './new'
+
+export const routes: RouteObject[] = [
+    {
+        path: '/',
+        element: <AppLayout />,
+        children: [
+            {
+                path: 'about',
+                element: <About />,
+                handle: { showInNavigation: true, label: 'About' }
+            },
+            {
+                path: 'contact',
+                element: <h1>Hello World from Contact Page</h1>,
+                handle: { showInNavigation: false }
+            },
+            {
+                path: 'new',
+                element: <New />,
+                handle: { showInNavigation: true, label: 'New Page' }
+            },
+        ]
+    }
+]

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["template/webApp"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}