Sidebar Items on Mobile - Nav Issue

When you are on mobile all options are present from the sidebar. Even items that you would not normally want to be clickable.

Decide if we should add the ability to remove or ignore onClick for link items that could have targetable=false?

For example on SWT we have a reports object, and within that the various pages.
https://github.com/USACE/swt-wm-web/blob/eb32c41975b68659f74de179aed597c47d38bf7b/src/links/sidebar-links.js#L12-L14

const BASE_URL = import.meta.env.BASE_URL;
const sidebarLinks = [
    { id: "home", text: "Tulsa Home", href: `${BASE_URL}/` },

    {
        id: "status-map",
        text: "Project Status Map",
        href: `${BASE_URL}/map`,
    },

    {
        id: "reports-menu",
        text: "Reports",
        targetable: false, // We could do this? Doesn't have a href. Or just make it not targetable if no href found?
        children: [
            {
                id: "reports-viewer",
                text: "Report Viewer",
                href: `${BASE_URL}/reports/`,
            },
            {
                id: "reports-monthly",
                text: "Monthly Report",
                href: `${BASE_URL}/reports/monthly`,
            },
            {
                id: "reports-daily",
                text: "Daily Report",
                href: `${BASE_URL}/reports/daily`,
            },
        ],
    }, ...etc
]

The way the sidebar is setup the initial option is meant to open the sub menu, but not be a link itself.

Start with the sidebar navigation component and its mobile rendering, then compare its item handling with src/links/sidebar-links.js in the linked SWT example. Check how entries with children but no href are rendered on mobile and define the intended non-targetable behavior. Done means parent items open submenus without acting as links, while leaf links remain usable.