[DashboardLayout] Modify the default AppBar branding link

[ashishjaswal2002]

Steps to reproduce

Steps:

1. Open this link to live example: (required)

Current behavior

I am using Dashboard Layout i have an error when i click on the logo it is redirecting to the '/' layout and if i add

it is giving me error of a descendant elements because is already defined with '/' route. What i want is that to change the '/' route inside a tag how to access this anchor tag so i can change the route.

As you can see the code i am accessing the classes of material ui so i can add my own style inside createTheme.

Please reply fast and i cannot provide the live link because it is against the company.

Expected behavior

import * as React from "react";
import PropTypes from "prop-types";
import { createTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import { AppProvider } from "@toolpad/core/AppProvider";
import { DashboardLayout } from "@toolpad/core/DashboardLayout";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; // Import Outlet to render nested routes
import DashboardIcon from "@mui/icons-material/Dashboard";
import GrassIcon from "@mui/icons-material/Grass";
import ImagesearchRollerIcon from "@mui/icons-material/ImagesearchRoller";
import { FolderIcon } from "lucide-react";
import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
import TourIcon from "@mui/icons-material/Tour";
import logo from "../assets/Images/Logo.png";

import SupportAgentIcon from "@mui/icons-material/SupportAgent";
import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive";
import Navbar from "../components/navbar/page";

const navigation = [
  {
    segment: "dashboard",
    title: "Dashboard",
    icon: <DashboardIcon />,
  },
  {
    segment: "ground-manager",
    title: "Ground Manager",
    icon: <GrassIcon />,
    children: [
      {
        segment: "view-grounds",
        title: "View Grounds",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "banner-manager",
    title: "Banner Manager",
    icon: <ImagesearchRollerIcon />,
    children: [
      {
        segment: "add-banners",
        title: "Add New Banner",
        icon: <FolderIcon />,
      },
      {
        segment: "view-banners",
        title: "View All Banners",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "tournament-manager",
    title: "Tournament Manager",
    icon: <TourIcon />,
    children: [
      {
        segment: "add-tournament",
        title: "Add Tournament",
        icon: <FolderIcon />,
      },
      {
        segment: "view-tournament",
        title: "View Tournament",
        icon: <FolderIcon />,
      },
      {
        segment: "user-tournament/register",
        title: "Registered User",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "user-manager",
    title: "User Manager",
    icon: <PeopleOutlineIcon />,
    children: [
      {
        segment: "ground-owners",
        title: "View Ground Owner ",
        icon: <FolderIcon />,
      },
      {
        segment: "user-registered",
        title: "View Users",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "support-manager",
    title: "Support Manager",
    icon: <SupportAgentIcon />,
    children: [
      {
        segment: "user-support",
        title: "User Support",
        icon: <FolderIcon />,
      },
    ],
  },
  {
    segment: "notification-manager",
    title: "Notification Manager",
    icon: <NotificationsActiveIcon />,
    children: [
      {
        segment: "push-notification",
        title: "App Notification",
        icon: <FolderIcon />,
      },
    ],
  },
];

function DashboardLayoutCustomThemeSwitcher(props) {
  const { window } = props;

  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;

  return (
    <>
      <Navbar />
    </>
  );
}

DashboardLayoutCustomThemeSwitcher.propTypes = {
  window: PropTypes.func,
};

DashboardLayoutCustomThemeSwitcher.propTypes = {
  window: PropTypes.func,
};

const demoTheme = createTheme({
  cssVariables: {
    colorSchemeSelector: "data-toolpad-color-scheme",
  },

  colorSchemes: { light: true },

  components: {
    MuiStack: {
      styleOverrides: {
        root: {
          display: "flex",
          alignItems: "center",
        },
      },

    },

    MuiCssBaseline: {
      styleOverrides: {
        body: {
          "& .MuiBox-root": {
            ".css-1a2ef5c": {
              marginTop: "1rem",
            },
          },
        },
      },
    },

  },

  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  },
});

function DemoPageContent({ pathname }) {
  return (
    <Box
      sx={{
        py: 4,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
      }}
    ></Box>
  );
}

DemoPageContent.propTypes = {
  pathname: PropTypes.string.isRequired,
};

function DashboardLayoutNavigationNested(props) {
  const { window } = props;
  const location = useLocation(); // Provides the current location
  const navigate = useNavigate();

  const router = React.useMemo(() => {
    return {
      pathname: location.pathname, // Get the current path dynamically
      navigate: (path) => navigate(path),
      searchParams: new URLSearchParams(location.search), // Parse query parameters
    };
  }, [navigate, location]);

  return (
    // preview-start
    <AppProvider
      navigation={navigation}
     router={router}
      theme={demoTheme}
      branding={{

        logo: (

            <img src={logo}  alt="one7sports logo" />

        ),
        title: "",
      }}
    >
      {/* <DashboardLayout>

      </DashboardLayout> */}

      <DashboardLayout
        slots={{
          toolbarActions: DashboardLayoutCustomThemeSwitcher,
        }}
      >
        <Box>
          <Outlet />
        </Box>
      </DashboardLayout>
    </AppProvider>
    // preview-end
  );
}

DashboardLayoutNavigationNested.propTypes = {
  /**
   * Injected by the documentation to work in an iframe.
   * Remove this when copying and pasting into your project.
   */
  window: PropTypes.func,
};

export default DashboardLayoutNavigationNested;

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: Dashboard

Search keywords:

Where did you get this from? Is it a template from the mui store?

[ashishjaswal2002]

It is a component from material ui https://mui.com/toolpad/core/react-dashboard-layout/

[flaviendelangle]

This is a Toolpad component (which is a product of our company), I'm transfering to the correct repo :+1:

[ashishjaswal2002]

So how can i access a tag im material ui app provider so i can change the route.

[bharatkashyap]

What you're looking for is the branding prop of the AppProvider. You can do something like:

 branding={{
    logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
    title: 'MUI',
  }}

Ref this demo: https://mui.com/toolpad/core/react-dashboard-layout/#branding

[ashishjaswal2002]

@bharatkashyap please read the issue again.

[ashishjaswal2002]

Let me mention Again I mentioned the Dashboard Layout code above When i click on the image it redirects to the home page and on inspect i can see anchor tag . which is redirecting to the home page '/' what i want is that i want to redirect to the custom route when user click on the image i just want to change the href link. This is my issue. So how can i code so it redirects to the '/custom-route'.

in.

  branding={{
     logo: (
     <Link to="/dashboard'>
    </img src="https://mui.com/stxZXatic/logo.png" alt="MUI logo" />
     </Link>)
     title: 'MUI',
}}

If i set like this it is giving me anchor tag erros or a tag inside descendant errors......

[ashishjaswal2002]

When will i get the solution for this?

[bharatkashyap]

Understood. The default route is set in the Link component here https://github.com/mui/toolpad/blob/master/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx#L369 and I don't see a way to change it via props currently

We could potentially add a branding.home property to the branding prop and let that be the default before falling back to /. Wdyt @apedroferreira? Did I miss a possible way to customize this route?

[ashishjaswal2002]

how ?

branding.home ={{

}}

[ashishjaswal2002]

@bharatkashyap is there any other way? what should i do now? please give me guidance

[bharatkashyap]

@bharatkashyap is there any other way? what should i do now? please give me guidance

Hi Ashish, the fastest way to see this feature land would be to contribute a PR that adds branding.home - feel free to create one and we can gather everyone else's opinions there, if it merges we can add it to the next version which is planned to be released today

[ashishjaswal2002]

For this i have to clone repo? please give me guidance step by steps

[bharatkashyap]

Yes, clone the repo, make the changes on your local, push it to your fork on a new branch and then create a Pull Request

[apedroferreira]

Understood. The default route is set in the Link component here https://github.com/mui/toolpad/blob/master/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx#L369 and I don't see a way to change it via props currently

We could potentially add a branding.home property to the branding prop and let that be the default before falling back to /. Wdyt @apedroferreira? Did I miss a possible way to customize this route?

Yeah, currently there's no way to override this. The quickest way to allow for it would probably be to provide a new slot so that the whole link and its content in the header can be overridden. And then if eventually we find more use cases for it or this becomes a common use case, we could add something like a homeUrl to the branding.

[ashishjaswal2002]

@apedroferreira when it is going to be drop?