Hi folks,

currently I've code like this in my page.tsx:

"use client";
export default function Account() {
  const [currentTab, setCurrentTab] = useState<string>("accounts");
  const t = useTranslations();

  const tabs = [
    { label: t("settings.tab1.name"), value: "tab1" },
    { label: t("settings.tab2.name"), value: "tab2" },
    { label: t("settings.tab3.name"), value: "tab3" },

  ];

  return (
    <>
      <Box component="main" className="grow py-8">
        <Container maxWidth="md">
          <Typography variant="h4">{t("settings.name")}</Typography>
          <Tabs
            indicatorColor="primary"
            onChange={handleTabsChange}
            scrollButtons="auto"
            textColor="primary"
            value={currentTab}
            variant="scrollable"
            className="mt-3"
          >
            {tabs.map(tab => (
              <Tab
                data-test={tab.value.toLocaleLowerCase() + "_btn"}
                key={tab.value}
                label={tab.label}
                value={tab.value}
              />
            ))}
          </Tabs>
          <Divider className="mb-6" />
          {currentTab === "tab1" && <Tab1View />}
          {currentTab === "tab2" && <Tab2View />}
          {currentTab === "tab3" && <Tab3View />}

        </Container>
      </Box>
    </>
  );
}

Is it possible to use layout instead of page and make the tabs accessable via url ? E.g. <domain>/my-path#tab2
T