This gives you a collapsible Business Assets section placed directly under Business Development in the left sidebar, with the sub-sections you described and routed placeholder pages so everything loads.

Prompt for Replit

Project intent: Add a new main nav section “Business Assets” (under “Business Development”) with two groups:

Templates

Document Covers

Slideshow Templates

Business Plan Template

Logo Templates

Stock Library (rename from “Stock Images”)

Icons

Mockups

Stock Photos

What to do:

Replace src/components/Sidebar.tsx with the file below.

Add src/routes.tsx (menu + route map).

Replace src/App.tsx with the file below (layout + routing).

Create the placeholder pages below under src/pages/business-assets/....

Ensure Business Assets appears below Business Development in the sidebar and all links route.

Use React Router, TypeScript, lucide-react for icons, Tailwind for styling. No external UI lib required.

Files to create/update: (exact content below)

src/routes.tsx

src/components/Sidebar.tsx

src/App.tsx

src/pages/business-assets/templates/DocumentCovers.tsx

src/pages/business-assets/templates/SlideshowTemplates.tsx

src/pages/business-assets/templates/BusinessPlanTemplate.tsx

src/pages/business-assets/templates/LogoTemplates.tsx

src/pages/business-assets/stock/Icons.tsx

src/pages/business-assets/stock/Mockups.tsx

src/pages/business-assets/stock/StockPhotos.tsx

src/routes.tsx
import { LayoutDashboard, Briefcase, Layers, Images, FileText, Presentation, CaseSensitive, Image, Boxes, GalleryVerticalEnd } from "lucide-react";
import React from "react";

// Route element lazy-loaders (keeps bundle slim)
const DocumentCovers = React.lazy(() => import("./pages/business-assets/templates/DocumentCovers"));
const SlideshowTemplates = React.lazy(() => import("./pages/business-assets/templates/SlideshowTemplates"));
const BusinessPlanTemplate = React.lazy(() => import("./pages/business-assets/templates/BusinessPlanTemplate"));
const LogoTemplates = React.lazy(() => import("./pages/business-assets/templates/LogoTemplates"));

const IconsPage = React.lazy(() => import("./pages/business-assets/stock/Icons"));
const MockupsPage = React.lazy(() => import("./pages/business-assets/stock/Mockups"));
const StockPhotosPage = React.lazy(() => import("./pages/business-assets/stock/StockPhotos"));

export type NavItem = {
  label: string;
  path?: string;
  icon?: React.ReactNode;
  children?: NavItem[];
  groupLabel?: string; // for visual grouping headers
};

export const NAV: NavItem[] = [
  // (Your existing sections appear here)
  {
    label: "Business Development",
    icon: <Briefcase className="w-4 h-4" />,
    children: [
      // keep your existing items here (e.g., Name Generator, Slogan, etc.)
    ],
  },

  // NEW: Business Assets (this block is intentionally placed right AFTER Business Development)
  {
    label: "Business Assets",
    icon: <Layers className="w-4 h-4" />,
    children: [
      { groupLabel: "Templates" },
      {
        label: "Document Covers",
        path: "/business-assets/templates/document-covers",
        icon: <FileText className="w-4 h-4" />,
      },
      {
        label: "Slideshow Templates",
        path: "/business-assets/templates/slideshow-templates",
        icon: <Presentation className="w-4 h-4" />,
      },
      {
        label: "Business Plan Template",
        path: "/business-assets/templates/business-plan",
        icon: <GalleryVerticalEnd className="w-4 h-4" />,
      },
      {
        label: "Logo Templates",
        path: "/business-assets/templates/logo-templates",
        icon: <CaseSensitive className="w-4 h-4" />,
      },

      { groupLabel: "Stock Library" },
      {
        label: "Icons",
        path: "/business-assets/stock/icons",
        icon: <Image className="w-4 h-4" />,
      },
      {
        label: "Mockups",
        path: "/business-assets/stock/mockups",
        icon: <Boxes className="w-4 h-4" />,
      },
      {
        label: "Stock Photos",
        path: "/business-assets/stock/photos",
        icon: <Images className="w-4 h-4" />,
      },
    ],
  },
];

export const ROUTES = [
  { path: "/business-assets/templates/document-covers", element: <DocumentCovers /> },
  { path: "/business-assets/templates/slideshow-templates", element: <SlideshowTemplates /> },
  { path: "/business-assets/templates/business-plan", element: <BusinessPlanTemplate /> },
  { path: "/business-assets/templates/logo-templates", element: <LogoTemplates /> },

  { path: "/business-assets/stock/icons", element: <IconsPage /> },
  { path: "/business-assets/stock/mockups", element: <MockupsPage /> },
  { path: "/business-assets/stock/photos", element: <StockPhotosPage /> },
];

src/components/Sidebar.tsx
import { NavLink, useLocation } from "react-router-dom";
import { ChevronDown } from "lucide-react";
import React, { useMemo, useState } from "react";
import { NAV, NavItem } from "../routes";

function GroupLabel({ text }: { text: string }) {
  return (
    <div className="px-3 pt-4 pb-1 text-[10px] uppercase tracking-wide text-slate-400">
      {text}
    </div>
  );
}

function Leaf({ item }: { item: NavItem }) {
  const activeClass =
    "block px-3 py-2 rounded-lg text-sm font-medium bg-slate-800/60 text-white";
  const baseClass =
    "block px-3 py-2 rounded-lg text-sm text-slate-200 hover:bg-slate-800/40 hover:text-white";

  return item.path ? (
    <NavLink
      to={item.path}
      className={({ isActive }) => (isActive ? activeClass : baseClass)}
    >
      <div className="flex items-center gap-2">
        {item.icon}
        <span>{item.label}</span>
      </div>
    </NavLink>
  ) : (
    <div className="px-3 py-2 text-slate-400">{item.label}</div>
  );
}

function Branch({ item }: { item: NavItem }) {
  const { pathname } = useLocation();
  const isAnyChildActive = useMemo(() => {
    if (!item.children) return false;
    return item.children.some((c) => c.path && pathname.startsWith(c.path!));
  }, [item.children, pathname]);

  const [open, setOpen] = useState(isAnyChildActive);

  return (
    <div className="mt-2">
      <button
        onClick={() => setOpen((s) => !s)}
        className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-semibold ${
          open || isAnyChildActive
            ? "bg-slate-800/60 text-white"
            : "text-slate-200 hover:bg-slate-800/40 hover:text-white"
        }`}
      >
        <div className="flex items-center gap-2">
          {item.icon}
          <span>{item.label}</span>
        </div>
        <ChevronDown
          className={`w-4 h-4 transition-transform ${
            open ? "rotate-180" : ""
          }`}
        />
      </button>

      {open && (
        <div className="mt-1 space-y-1">
          {item.children?.map((child, idx) =>
            child.groupLabel ? (
              <GroupLabel key={`grp-${idx}`} text={child.groupLabel} />
            ) : (
              <Leaf key={`${child.label}-${child.path ?? idx}`} item={child} />
            )
          )}
        </div>
      )}
    </div>
  );
}

export default function Sidebar() {
  return (
    <aside className="w-72 shrink-0 border-r border-slate-800 bg-slate-900/70 backdrop-blur-md">
      <div className="px-3 py-4">
        <div className="px-2 py-2 mb-2 text-xs uppercase tracking-wider text-slate-400">
          Dashboard
        </div>

        {NAV.map((item) =>
          item.children && item.children.length > 0 ? (
            <Branch key={item.label} item={item} />
          ) : (
            <Leaf key={item.label} item={item} />
          )
        )}
      </div>
    </aside>
  );
}

src/App.tsx
import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import { ROUTES } from "./routes";

function Placeholder() {
  return (
    <div className="p-6 text-slate-300">
      <h1 className="text-xl font-semibold text-white">Welcome</h1>
      <p className="mt-2">Select a section from the left to begin.</p>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div className="min-h-screen bg-slate-950 text-slate-100 flex">
        <Sidebar />
        <main className="flex-1">
          <Suspense
            fallback={
              <div className="p-6 text-slate-400">Loading, one sec…</div>
            }
          >
            <Routes>
              <Route path="/" element={<Placeholder />} />
              {ROUTES.map((r) => (
                <Route key={r.path} path={r.path} element={r.element} />
              ))}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </Suspense>
        </main>
      </div>
    </BrowserRouter>
  );
}