From 95914a7a4ae76105cd67ae2530a2879918d6f615 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Thu, 29 Feb 2024 20:42:35 +0100
Subject: [PATCH] chore(urls) use shorter urls, without /detail/ in path
 WD-9320

Signed-off-by: David Edler <david.edler@canonical.com>
---
 src/App.tsx                                   | 38 +++++++++----------
 src/components/NavLink.tsx                    | 29 ++++++++++++++
 src/components/Navigation.tsx                 | 33 +++-------------
 src/pages/cluster/ClusterGroupForm.tsx        |  2 +-
 .../cluster/ClusterGroupSelectorList.tsx      |  2 +-
 .../cluster/actions/EditClusterGroupBtn.tsx   |  2 +-
 src/pages/instances/CreateInstance.tsx        |  4 +-
 src/pages/instances/EditInstance.tsx          |  2 +-
 src/pages/instances/FileRow.tsx               |  2 +-
 src/pages/instances/InstanceDetail.tsx        |  2 +-
 src/pages/instances/InstanceDetailHeader.tsx  |  2 +-
 src/pages/instances/InstanceDetailPanel.tsx   | 14 +++----
 src/pages/instances/InstanceLink.tsx          |  2 +-
 .../instances/InstanceOverviewNetworks.tsx    |  2 +-
 .../instances/InstanceOverviewProfiles.tsx    |  2 +-
 .../instances/actions/OpenConsoleBtn.tsx      |  2 +-
 .../instances/actions/OpenTerminalBtn.tsx     |  2 +-
 src/pages/networks/CreateNetworkForward.tsx   |  6 +--
 src/pages/networks/EditNetwork.tsx            |  2 +-
 src/pages/networks/EditNetworkForward.tsx     |  6 +--
 src/pages/networks/MapTooltip.tsx             |  4 +-
 src/pages/networks/NetworkDetail.tsx          |  2 +-
 src/pages/networks/NetworkDetailHeader.tsx    |  2 +-
 src/pages/networks/NetworkDetailOverview.tsx  |  2 +-
 src/pages/networks/NetworkForwards.tsx        |  4 +-
 src/pages/networks/NetworkList.tsx            |  2 +-
 src/pages/profiles/EditProfile.tsx            |  4 +-
 src/pages/profiles/ProfileDetail.tsx          |  2 +-
 src/pages/profiles/ProfileDetailHeader.tsx    |  2 +-
 src/pages/profiles/ProfileDetailOverview.tsx  |  4 +-
 src/pages/profiles/ProfileLink.tsx            |  2 +-
 src/pages/storage/CustomIsoList.tsx           |  2 +-
 src/pages/storage/EditStoragePool.tsx         |  2 +-
 src/pages/storage/StoragePoolDetail.tsx       |  2 +-
 src/pages/storage/StoragePoolHeader.tsx       |  2 +-
 src/pages/storage/StoragePools.tsx            |  2 +-
 src/pages/storage/StorageUsedBy.tsx           | 10 ++---
 src/pages/storage/StorageVolumeDetail.tsx     |  2 +-
 src/pages/storage/StorageVolumeHeader.tsx     |  2 +-
 src/pages/storage/StorageVolumeNameLink.tsx   |  4 +-
 src/pages/storage/StorageVolumeOverview.tsx   |  2 +-
 src/pages/storage/StorageVolumes.tsx          |  2 +-
 src/pages/storage/forms/StorageVolumeEdit.tsx |  2 +-
 43 files changed, 109 insertions(+), 111 deletions(-)
 create mode 100644 src/components/NavLink.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d04f318f56..99873c2f9f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -113,7 +113,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name"
+          path="/ui/project/:project/instance/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
@@ -121,7 +121,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name/:activeTab"
+          path="/ui/project/:project/instance/:name/:activeTab"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
@@ -129,7 +129,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/instances/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/instance/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<InstanceDetail />} />}
@@ -153,7 +153,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name"
+          path="/ui/project/:project/profile/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
@@ -161,7 +161,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name/:activeTab"
+          path="/ui/project/:project/profile/:name/:activeTab"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
@@ -169,7 +169,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/profiles/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/profile/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<ProfileDetail />} />}
@@ -193,7 +193,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name"
+          path="/ui/project/:project/network/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
@@ -201,7 +201,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name/:activeTab"
+          path="/ui/project/:project/network/:name/:activeTab"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
@@ -209,7 +209,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/network/:name/:activeTab/:section"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<NetworkDetail />} />}
@@ -217,7 +217,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:network/forwards/create"
+          path="/ui/project/:project/network/:network/forwards/create"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<CreateNetworkForward />} />}
@@ -225,7 +225,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/networks/detail/:network/forwards/:forwardAddress/edit"
+          path="/ui/project/:project/network/:network/forwards/:forwardAddress/edit"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<EditNetworkForward />} />}
@@ -289,7 +289,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/storage/detail/:name"
+          path="/ui/project/:project/storage/pool/:name"
           element={
             <ProtectedRoute
               outlet={<ProjectLoader outlet={<StoragePoolDetail />} />}
@@ -297,23 +297,23 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/project/:project/storage/detail/:name/:activeTab"
+          path="/ui/project/:project/storage/pool/:name/:activeTab"
           element={<ProtectedRoute outlet={<StoragePoolDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:name/:activeTab/:section"
+          path="/ui/project/:project/storage/pool/:name/:activeTab/:section"
           element={<ProtectedRoute outlet={<StoragePoolDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume"
+          path="/ui/project/:project/storage/pool/:pool/volumes/:type/:volume"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume/:activeTab"
+          path="/ui/project/:project/storage/pool/:pool/volumes/:type/:volume/:activeTab"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
-          path="/ui/project/:project/storage/detail/:pool/volumes/:type/:volume/:activeTab/:section"
+          path="/ui/project/:project/storage/pool/:pool/volumes/:type/:volume/:activeTab/:section"
           element={<ProtectedRoute outlet={<StorageVolumeDetail />} />}
         />
         <Route
@@ -329,7 +329,7 @@ const App: FC = () => {
           element={<ProtectedRoute outlet={<CreateClusterGroup />} />}
         />
         <Route
-          path="/ui/cluster/groups/detail/:group"
+          path="/ui/cluster/group/:group"
           element={
             <ProtectedRoute
               outlet={<ClusterGroupLoader outlet={<ClusterList />} />}
@@ -337,7 +337,7 @@ const App: FC = () => {
           }
         />
         <Route
-          path="/ui/cluster/groups/detail/:group/edit"
+          path="/ui/cluster/group/:group/edit"
           element={
             <ProtectedRoute
               outlet={<ClusterGroupLoader outlet={<EditClusterGroup />} />}
diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
new file mode 100644
index 0000000000..121d5d7b69
--- /dev/null
+++ b/src/components/NavLink.tsx
@@ -0,0 +1,29 @@
+import { FC, ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+interface Props {
+  to: string;
+  title: string;
+  children: ReactNode;
+}
+
+const NavLink: FC<Props> = ({ to, title, children }) => {
+  const location = useLocation();
+
+  // ignore last char to consider /instances and /instance as active
+  const matchPart = to.substring(0, to.length - 1);
+  const isActive = location.pathname.startsWith(matchPart);
+
+  return (
+    <Link
+      title={title}
+      to={to}
+      aria-current={isActive ? "page" : undefined}
+      className="p-side-navigation__link"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default NavLink;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index bda895ab0c..de10688dcd 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,5 +1,4 @@
 import { FC, MouseEvent, useEffect, useState } from "react";
-import { NavLink } from "react-router-dom";
 import { Button, Icon } from "@canonical/react-components";
 import { useAuth } from "context/auth";
 import classnames from "classnames";
@@ -9,6 +8,7 @@ import { isWidthBelow, logout } from "util/helpers";
 import { useProject } from "context/project";
 import { useMenuCollapsed } from "context/menuCollapsed";
 import { useDocs } from "context/useDocs";
+import NavLink from "components/NavLink";
 
 const isSmallScreen = () => isWidthBelow(620);
 
@@ -92,7 +92,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/instances`}
                           title={`Instances (${projectName})`}
                         >
@@ -105,7 +104,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/profiles`}
                           title={`Profiles (${projectName})`}
                         >
@@ -118,7 +116,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/networks`}
                           title={`Networks (${projectName})`}
                         >
@@ -131,7 +128,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/storage`}
                           title={`Storage (${projectName})`}
                         >
@@ -144,7 +140,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/images`}
                           title={`Images (${projectName})`}
                         >
@@ -157,7 +152,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item secondary">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/project/${projectName}/configuration`}
                           title={`Configuration (${projectName})`}
                         >
@@ -170,11 +164,7 @@ const Navigation: FC = () => {
                       </li>
                       <hr className="is-dark navigation-hr" />
                       <li className="p-side-navigation__item">
-                        <NavLink
-                          className="p-side-navigation__link"
-                          to="/ui/cluster"
-                          title="Cluster"
-                        >
+                        <NavLink to="/ui/cluster" title="Cluster">
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="machines"
@@ -184,7 +174,6 @@ const Navigation: FC = () => {
                       </li>
                       <li className="p-side-navigation__item">
                         <NavLink
-                          className="p-side-navigation__link"
                           to={`/ui/operations`}
                           title={`Operations (${projectName})`}
                         >
@@ -197,11 +186,7 @@ const Navigation: FC = () => {
                       </li>
                       {!isRestricted && (
                         <li className="p-side-navigation__item">
-                          <NavLink
-                            className="p-side-navigation__link"
-                            to="/ui/warnings"
-                            title="Warnings"
-                          >
+                          <NavLink to="/ui/warnings" title="Warnings">
                             <Icon
                               className="is-light p-side-navigation__icon"
                               name="warning-grey"
@@ -211,11 +196,7 @@ const Navigation: FC = () => {
                         </li>
                       )}
                       <li className="p-side-navigation__item">
-                        <NavLink
-                          className="p-side-navigation__link"
-                          to="/ui/settings"
-                          title="Settings"
-                        >
+                        <NavLink to="/ui/settings" title="Settings">
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="settings"
@@ -243,11 +224,7 @@ const Navigation: FC = () => {
                   {!isAuthenticated && (
                     <>
                       <li className="p-side-navigation__item">
-                        <NavLink
-                          className="p-side-navigation__link"
-                          to="/ui/login"
-                          title="Login"
-                        >
+                        <NavLink to="/ui/login" title="Login">
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="profile"
diff --git a/src/pages/cluster/ClusterGroupForm.tsx b/src/pages/cluster/ClusterGroupForm.tsx
index 156b542946..c97c321f16 100644
--- a/src/pages/cluster/ClusterGroupForm.tsx
+++ b/src/pages/cluster/ClusterGroupForm.tsx
@@ -84,7 +84,7 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
       })
         .then(() => {
           const verb = group ? "saved" : "created";
-          navigate(`/ui/cluster/groups/detail/${values.name}`);
+          navigate(`/ui/cluster/group/${values.name}`);
           toastNotify.success(`Cluster group ${values.name} ${verb}.`);
         })
         .catch((e: Error) => {
diff --git a/src/pages/cluster/ClusterGroupSelectorList.tsx b/src/pages/cluster/ClusterGroupSelectorList.tsx
index f91b689612..9017a99bc5 100644
--- a/src/pages/cluster/ClusterGroupSelectorList.tsx
+++ b/src/pages/cluster/ClusterGroupSelectorList.tsx
@@ -28,7 +28,7 @@ const ClusterGroupSelectorList: FC<Props> = ({ clusterGroups }) => {
             to={
               group.name === allClusterGroups
                 ? "/ui/cluster"
-                : `/ui/cluster/groups/detail/${group.name}`
+                : `/ui/cluster/group/${group.name}`
             }
             className="p-contextual-menu__link link"
           >
diff --git a/src/pages/cluster/actions/EditClusterGroupBtn.tsx b/src/pages/cluster/actions/EditClusterGroupBtn.tsx
index 9ba8169593..a749ec546f 100644
--- a/src/pages/cluster/actions/EditClusterGroupBtn.tsx
+++ b/src/pages/cluster/actions/EditClusterGroupBtn.tsx
@@ -12,7 +12,7 @@ const EditClusterGroupBtn: FC<Props> = ({ group }) => {
   return (
     <Button
       className="u-no-margin--bottom"
-      onClick={() => navigate(`/ui/cluster/groups/detail/${group}/edit`)}
+      onClick={() => navigate(`/ui/cluster/group/${group}/edit`)}
     >
       Edit group
     </Button>
diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
index 98535a71db..9743ec1ded 100644
--- a/src/pages/instances/CreateInstance.tsx
+++ b/src/pages/instances/CreateInstance.tsx
@@ -200,7 +200,7 @@ const CreateInstance: FC = () => {
     isIsoImage: boolean,
   ) => {
     const instanceLink = (
-      <Link to={`/ui/project/${project}/instances/detail/${instanceName}`}>
+      <Link to={`/ui/project/${project}/instance/${instanceName}`}>
         {instanceName}
       </Link>
     );
@@ -218,7 +218,7 @@ const CreateInstance: FC = () => {
         );
       });
     } else {
-      const consoleUrl = `/ui/project/${project}/instances/detail/${instanceName}/console`;
+      const consoleUrl = `/ui/project/${project}/instance/${instanceName}/console`;
       const message = isIsoImage && (
         <>
           <p>Continue the installation process from its console.</p>
diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
index 9433fb4161..2d78f85eb5 100644
--- a/src/pages/instances/EditInstance.tsx
+++ b/src/pages/instances/EditInstance.tsx
@@ -146,7 +146,7 @@ const EditInstance: FC<Props> = ({ instance }) => {
       void formik.setFieldValue("yaml", undefined);
     }
 
-    const baseUrl = `/ui/project/${project}/instances/detail/${instance.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/instance/${instance.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);
diff --git a/src/pages/instances/FileRow.tsx b/src/pages/instances/FileRow.tsx
index 9dfbb2c98f..57a0c1206b 100644
--- a/src/pages/instances/FileRow.tsx
+++ b/src/pages/instances/FileRow.tsx
@@ -14,7 +14,7 @@ interface FileRowProps {
 
 const FileRow: FC<FileRowProps> = ({ instance, path }) => {
   const fileName = path.split("/").at(-1) ?? "";
-  const fileUrl = `/ui/project/${instance.project}/instances/detail/${instance.name}/logs/?file=${fileName}`;
+  const fileUrl = `/ui/project/${instance.project}/instance/${instance.name}/logs/?file=${fileName}`;
   const [isOpen, setOpen] = useState(getUrlParam("file") === fileName);
 
   const {
diff --git a/src/pages/instances/InstanceDetail.tsx b/src/pages/instances/InstanceDetail.tsx
index aee397776d..154e79fe7f 100644
--- a/src/pages/instances/InstanceDetail.tsx
+++ b/src/pages/instances/InstanceDetail.tsx
@@ -72,7 +72,7 @@ const InstanceDetail: FC = () => {
           <TabLinks
             tabs={tabs}
             activeTab={activeTab}
-            tabUrl={`/ui/project/${project}/instances/detail/${name}`}
+            tabUrl={`/ui/project/${project}/instance/${name}`}
           />
 
           {!activeTab && (
diff --git a/src/pages/instances/InstanceDetailHeader.tsx b/src/pages/instances/InstanceDetailHeader.tsx
index 813067439d..10a0f9faa3 100644
--- a/src/pages/instances/InstanceDetailHeader.tsx
+++ b/src/pages/instances/InstanceDetailHeader.tsx
@@ -66,7 +66,7 @@ const InstanceDetailHeader: FC<Props> = ({ name, instance, project }) => {
         eventQueue.set(
           operation.metadata.id,
           () => {
-            navigate(`/ui/project/${project}/instances/detail/${values.name}`);
+            navigate(`/ui/project/${project}/instance/${values.name}`);
             toastNotify.success(
               <>
                 Instance <strong>{getInstanceName(operation.metadata)}</strong>{" "}
diff --git a/src/pages/instances/InstanceDetailPanel.tsx b/src/pages/instances/InstanceDetailPanel.tsx
index 7839bb0353..02f029354b 100644
--- a/src/pages/instances/InstanceDetailPanel.tsx
+++ b/src/pages/instances/InstanceDetailPanel.tsx
@@ -144,7 +144,7 @@ const InstanceDetailPanel: FC = () => {
               <th>
                 <h3 className="p-muted-heading p-heading--5">
                   <Link
-                    to={`/ui/project/${instance.project}/instances/detail/${instance.name}/configuration`}
+                    to={`/ui/project/${instance.project}/instance/${instance.name}/configuration`}
                   >
                     Profiles
                   </Link>
@@ -156,7 +156,7 @@ const InstanceDetailPanel: FC = () => {
                   items={instance.profiles.map((name) => (
                     <Link
                       key={name}
-                      to={`/ui/project/${instance.project}/profiles/detail/${name}`}
+                      to={`/ui/project/${instance.project}/profile/${name}`}
                     >
                       {name}
                     </Link>
@@ -175,7 +175,7 @@ const InstanceDetailPanel: FC = () => {
                     items={networkDevices.map((item) => (
                       <Link
                         key={item.network}
-                        to={`/ui/project/${instance.project}/networks/detail/${item.network}`}
+                        to={`/ui/project/${instance.project}/network/${item.network}`}
                       >
                         {item.network}
                       </Link>
@@ -191,7 +191,7 @@ const InstanceDetailPanel: FC = () => {
                     No networks found.
                     <br />
                     <Link
-                      to={`/ui/project/${instance.project}/instances/detail/${instance.name}/configuration/networks`}
+                      to={`/ui/project/${instance.project}/instance/${instance.name}/configuration/networks`}
                     >
                       Configure instance networks
                     </Link>
@@ -203,7 +203,7 @@ const InstanceDetailPanel: FC = () => {
               <th colSpan={2} className="snapshots-header">
                 <h3 className="p-muted-heading p-heading--5">
                   <Link
-                    to={`/ui/project/${instance.project}/instances/detail/${instance.name}/snapshots`}
+                    to={`/ui/project/${instance.project}/instance/${instance.name}/snapshots`}
                   >
                     Snapshots
                   </Link>
@@ -237,7 +237,7 @@ const InstanceDetailPanel: FC = () => {
                   <tr>
                     <td colSpan={2}>
                       <Link
-                        to={`/ui/project/${instance.project}/instances/detail/${instance.name}/snapshots`}
+                        to={`/ui/project/${instance.project}/instance/${instance.name}/snapshots`}
                       >
                         {`View all (${instance.snapshots.length})`}
                       </Link>
@@ -252,7 +252,7 @@ const InstanceDetailPanel: FC = () => {
                     No snapshots found.
                     <br />
                     <Link
-                      to={`/ui/project/${instance.project}/instances/detail/${instance.name}/snapshots`}
+                      to={`/ui/project/${instance.project}/instance/${instance.name}/snapshots`}
                     >
                       Manage instance snapshots
                     </Link>
diff --git a/src/pages/instances/InstanceLink.tsx b/src/pages/instances/InstanceLink.tsx
index a333532468..1e1f806d38 100644
--- a/src/pages/instances/InstanceLink.tsx
+++ b/src/pages/instances/InstanceLink.tsx
@@ -12,7 +12,7 @@ interface Props {
 const InstanceLink: FC<Props> = ({ instance }) => {
   return (
     <Link
-      to={`/ui/project/${instance.project}/instances/detail/${instance.name}`}
+      to={`/ui/project/${instance.project}/instance/${instance.name}`}
       onClick={(e) => e.stopPropagation()}
     >
       <ItemName item={instance} />
diff --git a/src/pages/instances/InstanceOverviewNetworks.tsx b/src/pages/instances/InstanceOverviewNetworks.tsx
index f1226d16e9..36aa750eb4 100644
--- a/src/pages/instances/InstanceOverviewNetworks.tsx
+++ b/src/pages/instances/InstanceOverviewNetworks.tsx
@@ -63,7 +63,7 @@ const InstanceOverviewNetworks: FC<Props> = ({ instance, onFailure }) => {
           {
             content: (
               <Link
-                to={`/ui/project/${instance.project}/networks/detail/${network.name}`}
+                to={`/ui/project/${instance.project}/network/${network.name}`}
                 title={`Network ${network.name}`}
               >
                 {network.name}
diff --git a/src/pages/instances/InstanceOverviewProfiles.tsx b/src/pages/instances/InstanceOverviewProfiles.tsx
index 1b32801016..d994cc57ba 100644
--- a/src/pages/instances/InstanceOverviewProfiles.tsx
+++ b/src/pages/instances/InstanceOverviewProfiles.tsx
@@ -48,7 +48,7 @@ const InstanceOverviewProfiles: FC<Props> = ({ instance, onFailure }) => {
         {
           content: (
             <Link
-              to={`/ui/project/${instance.project}/profiles/detail/${profile}`}
+              to={`/ui/project/${instance.project}/profile/${profile}`}
               title={`Profile ${profile}`}
             >
               {profile}
diff --git a/src/pages/instances/actions/OpenConsoleBtn.tsx b/src/pages/instances/actions/OpenConsoleBtn.tsx
index 7c214dd90c..10ccad5630 100644
--- a/src/pages/instances/actions/OpenConsoleBtn.tsx
+++ b/src/pages/instances/actions/OpenConsoleBtn.tsx
@@ -12,7 +12,7 @@ const OpenConsoleBtn: FC<Props> = ({ instance }) => {
 
   const handleOpen = () => {
     navigate(
-      `/ui/project/${instance.project}/instances/detail/${instance.name}/console`,
+      `/ui/project/${instance.project}/instance/${instance.name}/console`,
     );
   };
 
diff --git a/src/pages/instances/actions/OpenTerminalBtn.tsx b/src/pages/instances/actions/OpenTerminalBtn.tsx
index aa875a167a..247806960f 100644
--- a/src/pages/instances/actions/OpenTerminalBtn.tsx
+++ b/src/pages/instances/actions/OpenTerminalBtn.tsx
@@ -12,7 +12,7 @@ const OpenTerminalBtn: FC<Props> = ({ instance }) => {
 
   const handleOpen = () => {
     navigate(
-      `/ui/project/${instance.project}/instances/detail/${instance.name}/terminal`,
+      `/ui/project/${instance.project}/instance/${instance.name}/terminal`,
     );
   };
 
diff --git a/src/pages/networks/CreateNetworkForward.tsx b/src/pages/networks/CreateNetworkForward.tsx
index cdbdba5efb..403987b2e6 100644
--- a/src/pages/networks/CreateNetworkForward.tsx
+++ b/src/pages/networks/CreateNetworkForward.tsx
@@ -46,9 +46,7 @@ const CreateNetworkForward: FC = () => {
               queryKeys.forwards,
             ],
           });
-          navigate(
-            `/ui/project/${project}/networks/detail/${network}/forwards`,
-          );
+          navigate(`/ui/project/${project}/network/${network}/forwards`);
           toastNotify.success(
             `Network forward ${forward.listen_address} created.`,
           );
@@ -80,7 +78,7 @@ const CreateNetworkForward: FC = () => {
       <FormFooterLayout>
         <Link
           className="p-button--base"
-          to={`/ui/project/${project}/networks/detail/${network}/forwards`}
+          to={`/ui/project/${project}/network/${network}/forwards`}
         >
           Cancel
         </Link>
diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx
index d2ef4447a5..7669a129c1 100644
--- a/src/pages/networks/EditNetwork.tsx
+++ b/src/pages/networks/EditNetwork.tsx
@@ -124,7 +124,7 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
       void formik.setFieldValue("yaml", undefined);
     }
 
-    const baseUrl = `/ui/project/${project}/networks/detail/${network.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/network/${network.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);
diff --git a/src/pages/networks/EditNetworkForward.tsx b/src/pages/networks/EditNetworkForward.tsx
index 946df48cda..3783e34c6b 100644
--- a/src/pages/networks/EditNetworkForward.tsx
+++ b/src/pages/networks/EditNetworkForward.tsx
@@ -73,9 +73,7 @@ const EditNetworkForward: FC = () => {
               queryKeys.forwards,
             ],
           });
-          navigate(
-            `/ui/project/${project}/networks/detail/${network}/forwards`,
-          );
+          navigate(`/ui/project/${project}/network/${network}/forwards`);
           toastNotify.success(
             `Network forward ${forward.listen_address} updated.`,
           );
@@ -108,7 +106,7 @@ const EditNetworkForward: FC = () => {
       <FormFooterLayout>
         <Link
           className="p-button--base"
-          to={`/ui/project/${project}/networks/detail/${network}/forwards`}
+          to={`/ui/project/${project}/network/${network}/forwards`}
         >
           Cancel
         </Link>
diff --git a/src/pages/networks/MapTooltip.tsx b/src/pages/networks/MapTooltip.tsx
index e59d41f400..53bc896a76 100644
--- a/src/pages/networks/MapTooltip.tsx
+++ b/src/pages/networks/MapTooltip.tsx
@@ -33,9 +33,7 @@ const MapTooltip: FC<MapTooltipProps> = ({ item, type }) => {
 
     return (
       <div className="p-text--small tooltip">
-        <a
-          href={`/ui/project/${instance.project}/instances/detail/${instance.name}`}
-        >
+        <a href={`/ui/project/${instance.project}/instance/${instance.name}`}>
           <ItemName item={instance} />
         </a>
         <br />
diff --git a/src/pages/networks/NetworkDetail.tsx b/src/pages/networks/NetworkDetail.tsx
index d5e8d6a09c..2f86033a1d 100644
--- a/src/pages/networks/NetworkDetail.tsx
+++ b/src/pages/networks/NetworkDetail.tsx
@@ -50,7 +50,7 @@ const NetworkDetail: FC = () => {
         <TabLinks
           tabs={network?.managed ? tabs : ["Overview"]}
           activeTab={activeTab}
-          tabUrl={`/ui/project/${project}/networks/detail/${name}`}
+          tabUrl={`/ui/project/${project}/network/${name}`}
         />
         <NotificationRow />
         {!activeTab && (
diff --git a/src/pages/networks/NetworkDetailHeader.tsx b/src/pages/networks/NetworkDetailHeader.tsx
index f2fb1a3abf..28e8cbbbff 100644
--- a/src/pages/networks/NetworkDetailHeader.tsx
+++ b/src/pages/networks/NetworkDetailHeader.tsx
@@ -48,7 +48,7 @@ const NetworkDetailHeader: FC<Props> = ({ name, network, project }) => {
       }
       renameNetwork(name, values.name, project)
         .then(() => {
-          navigate(`/ui/project/${project}/networks/detail/${values.name}`);
+          navigate(`/ui/project/${project}/network/${values.name}`);
           toastNotify.success(`Network ${name} renamed to ${values.name}.`);
           void formik.setFieldValue("isRenaming", false);
         })
diff --git a/src/pages/networks/NetworkDetailOverview.tsx b/src/pages/networks/NetworkDetailOverview.tsx
index 1b7fcc41bb..48dafa5880 100644
--- a/src/pages/networks/NetworkDetailOverview.tsx
+++ b/src/pages/networks/NetworkDetailOverview.tsx
@@ -162,7 +162,7 @@ const NetworkDetailOverview: FC<Props> = ({ network }) => {
                       items={data.profiles.map((item) => (
                         <div key={item.name}>
                           <Link
-                            to={`/ui/project/${item.project}/profiles/detail/${item.name}`}
+                            to={`/ui/project/${item.project}/profile/${item.name}`}
                           >
                             {item.name}
                           </Link>
diff --git a/src/pages/networks/NetworkForwards.tsx b/src/pages/networks/NetworkForwards.tsx
index 5be232ec0b..2e92b8e69f 100644
--- a/src/pages/networks/NetworkForwards.tsx
+++ b/src/pages/networks/NetworkForwards.tsx
@@ -90,7 +90,7 @@ const NetworkForwards: FC<Props> = ({ network, project }) => {
             <>
               <Link
                 className="p-button--base u-no-margin--bottom has-icon"
-                to={`/ui/project/${project}/networks/detail/${network.name}/forwards/${forward.listen_address}/edit`}
+                to={`/ui/project/${project}/network/${network.name}/forwards/${forward.listen_address}/edit`}
                 title="Edit network forward"
               >
                 <Icon name="edit" />
@@ -124,7 +124,7 @@ const NetworkForwards: FC<Props> = ({ network, project }) => {
     <>
       <Link
         className="p-button--positive u-no-margin--bottom u-float-right"
-        to={`/ui/project/${project}/networks/detail/${network.name}/forwards/create`}
+        to={`/ui/project/${project}/network/${network.name}/forwards/create`}
       >
         Create forward
       </Link>
diff --git a/src/pages/networks/NetworkList.tsx b/src/pages/networks/NetworkList.tsx
index 890432bd27..a813408b28 100644
--- a/src/pages/networks/NetworkList.tsx
+++ b/src/pages/networks/NetworkList.tsx
@@ -60,7 +60,7 @@ const NetworkList: FC = () => {
       columns: [
         {
           content: (
-            <Link to={`/ui/project/${project}/networks/detail/${network.name}`}>
+            <Link to={`/ui/project/${project}/network/${network.name}`}>
               {network.name}
             </Link>
           ),
diff --git a/src/pages/profiles/EditProfile.tsx b/src/pages/profiles/EditProfile.tsx
index 7f4df3a40c..a41c574c2d 100644
--- a/src/pages/profiles/EditProfile.tsx
+++ b/src/pages/profiles/EditProfile.tsx
@@ -150,7 +150,7 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
       void formik.setFieldValue("yaml", undefined);
     }
 
-    const baseUrl = `/ui/project/${project}/profiles/detail/${profile.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/profile/${profile.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);
@@ -176,7 +176,7 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
         <Notification severity="caution" title="Inherited profile">
           Modifications are only available in the{" "}
           <Link
-            to={`/ui/project/default/profiles/detail/${profile.name}/configuration`}
+            to={`/ui/project/default/profile/${profile.name}/configuration`}
           >
             default project
           </Link>
diff --git a/src/pages/profiles/ProfileDetail.tsx b/src/pages/profiles/ProfileDetail.tsx
index b8f7f36676..55363ffa36 100644
--- a/src/pages/profiles/ProfileDetail.tsx
+++ b/src/pages/profiles/ProfileDetail.tsx
@@ -74,7 +74,7 @@ const ProfileDetail: FC = () => {
           <TabLinks
             tabs={tabs}
             activeTab={activeTab}
-            tabUrl={`/ui/project/${projectName}/profiles/detail/${name}`}
+            tabUrl={`/ui/project/${projectName}/profile/${name}`}
           />
 
           {!activeTab && (
diff --git a/src/pages/profiles/ProfileDetailHeader.tsx b/src/pages/profiles/ProfileDetailHeader.tsx
index 5fa9d7a88f..b64d72620d 100644
--- a/src/pages/profiles/ProfileDetailHeader.tsx
+++ b/src/pages/profiles/ProfileDetailHeader.tsx
@@ -54,7 +54,7 @@ const ProfileDetailHeader: FC<Props> = ({
       }
       renameProfile(name, values.name, project)
         .then(() => {
-          navigate(`/ui/project/${project}/profiles/detail/${values.name}`);
+          navigate(`/ui/project/${project}/profile/${values.name}`);
           toastNotify.success(`Profile ${name} renamed to ${values.name}.`);
           void formik.setFieldValue("isRenaming", false);
         })
diff --git a/src/pages/profiles/ProfileDetailOverview.tsx b/src/pages/profiles/ProfileDetailOverview.tsx
index 8e83cde175..ec10d1b273 100644
--- a/src/pages/profiles/ProfileDetailOverview.tsx
+++ b/src/pages/profiles/ProfileDetailOverview.tsx
@@ -48,7 +48,7 @@ const ProfileDetailOverview: FC<Props> = ({ profile, featuresProfiles }) => {
       {!featuresProfiles && (
         <Notification severity="caution" title="Inherited profile">
           Modifications are only available in the{" "}
-          <Link to={`/ui/project/default/profiles/detail/${profile.name}`}>
+          <Link to={`/ui/project/default/profile/${profile.name}`}>
             default project
           </Link>
           .
@@ -127,7 +127,7 @@ const ProfileDetailOverview: FC<Props> = ({ profile, featuresProfiles }) => {
         </Col>
         <Col size={7} className="view-config">
           <Link
-            to={`/ui/project/${project}/profiles/detail/${
+            to={`/ui/project/${project}/profile/${
               profile.name
             }/configuration/${slugify(CLOUD_INIT)}`}
           >
diff --git a/src/pages/profiles/ProfileLink.tsx b/src/pages/profiles/ProfileLink.tsx
index bbf8c67379..de8fadbd80 100644
--- a/src/pages/profiles/ProfileLink.tsx
+++ b/src/pages/profiles/ProfileLink.tsx
@@ -12,7 +12,7 @@ interface Props {
 const ProfileLink: FC<Props> = ({ profile }) => {
   return (
     <Link
-      to={`/ui/project/${profile.project}/profiles/detail/${profile.name}`}
+      to={`/ui/project/${profile.project}/profile/${profile.name}`}
       onClick={(e) => e.stopPropagation()}
     >
       <ItemName item={profile} />
diff --git a/src/pages/storage/CustomIsoList.tsx b/src/pages/storage/CustomIsoList.tsx
index 9db3e151da..8772aa6f17 100644
--- a/src/pages/storage/CustomIsoList.tsx
+++ b/src/pages/storage/CustomIsoList.tsx
@@ -86,7 +86,7 @@ const CustomIsoList: FC<Props> = ({ project }) => {
         {
           content: (
             <div className="u-truncate" title={image.pool}>
-              <Link to={`/ui/project/${project}/storage/detail/${image.pool}`}>
+              <Link to={`/ui/project/${project}/storage/pool/${image.pool}`}>
                 {image.pool}
               </Link>
             </div>
diff --git a/src/pages/storage/EditStoragePool.tsx b/src/pages/storage/EditStoragePool.tsx
index 42d6df1264..0f399c0080 100644
--- a/src/pages/storage/EditStoragePool.tsx
+++ b/src/pages/storage/EditStoragePool.tsx
@@ -90,7 +90,7 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
   });
 
   const setSection = (newSection: string) => {
-    const baseUrl = `/ui/project/${project}/storage/detail/${pool.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/storage/pool/${pool.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);
diff --git a/src/pages/storage/StoragePoolDetail.tsx b/src/pages/storage/StoragePoolDetail.tsx
index b103f9b2a5..2bb8b767d7 100644
--- a/src/pages/storage/StoragePoolDetail.tsx
+++ b/src/pages/storage/StoragePoolDetail.tsx
@@ -77,7 +77,7 @@ const StoragePoolDetail: FC = () => {
         <TabLinks
           tabs={tabs}
           activeTab={activeTab}
-          tabUrl={`/ui/project/${project}/storage/detail/${name}`}
+          tabUrl={`/ui/project/${project}/storage/pool/${name}`}
         />
 
         {!activeTab && (
diff --git a/src/pages/storage/StoragePoolHeader.tsx b/src/pages/storage/StoragePoolHeader.tsx
index 4714e183e7..b46790294b 100644
--- a/src/pages/storage/StoragePoolHeader.tsx
+++ b/src/pages/storage/StoragePoolHeader.tsx
@@ -42,7 +42,7 @@ const StoragePoolHeader: FC<Props> = ({ name, pool, project }) => {
       }
       renameStoragePool(name, values.name, project)
         .then(() => {
-          navigate(`/ui/project/${project}/storage/detail/${values.name}`);
+          navigate(`/ui/project/${project}/storage/pool/${values.name}`);
           toastNotify.success(
             `Storage pool ${name} renamed to ${values.name}.`,
           );
diff --git a/src/pages/storage/StoragePools.tsx b/src/pages/storage/StoragePools.tsx
index 3fc4950fba..bb94853470 100644
--- a/src/pages/storage/StoragePools.tsx
+++ b/src/pages/storage/StoragePools.tsx
@@ -86,7 +86,7 @@ const StoragePools: FC = () => {
       columns: [
         {
           content: (
-            <Link to={`/ui/project/${project}/storage/detail/${pool.name}`}>
+            <Link to={`/ui/project/${project}/storage/pool/${pool.name}`}>
               {pool.name}
             </Link>
           ),
diff --git a/src/pages/storage/StorageUsedBy.tsx b/src/pages/storage/StorageUsedBy.tsx
index 43a10adc5b..f1ead00096 100644
--- a/src/pages/storage/StorageUsedBy.tsx
+++ b/src/pages/storage/StorageUsedBy.tsx
@@ -52,9 +52,7 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
             <ExpandableList
               items={data[PROFILES].map((item) => (
                 <div key={`${item.name}-${item.project}`}>
-                  <Link
-                    to={`/ui/project/${item.project}/profiles/detail/${item.name}`}
-                  >
+                  <Link to={`/ui/project/${item.project}/profile/${item.name}`}>
                     {item.name}
                   </Link>
                   {item.project !== project && ` (project ${item.project})`}
@@ -89,7 +87,7 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
                   {item.instance && (
                     <div key={`${item.instance}-${item.name}-${item.project}`}>
                       <Link
-                        to={`/ui/project/${item.project}/instances/detail/${item.instance}/snapshots`}
+                        to={`/ui/project/${item.project}/instance/${item.instance}/snapshots`}
                       >
                         {`${item.instance} ${item.name}`}
                       </Link>
@@ -101,7 +99,7 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
                       key={`${item.volume}-${item.name}-${item.project}-${item.pool}`}
                     >
                       <Link
-                        to={`/ui/project/${item.project}/storage/detail/${item.pool}/volumes/custom/${item.volume}/snapshots`}
+                        to={`/ui/project/${item.project}/storage/pool/${item.pool}/volumes/custom/${item.volume}/snapshots`}
                       >
                         {`${item.volume} ${item.name}`}
                       </Link>
@@ -122,7 +120,7 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
               items={data[CUSTOM_VOLUMES].map((item) => (
                 <div key={`${item.name}-${item.project}`}>
                   <Link
-                    to={`/ui/project/${item.project}/storage/detail/${storage.name}/volumes/custom/${item.name}`}
+                    to={`/ui/project/${item.project}/storage/pool/${storage.name}/volumes/custom/${item.name}`}
                   >
                     {item.name}
                   </Link>
diff --git a/src/pages/storage/StorageVolumeDetail.tsx b/src/pages/storage/StorageVolumeDetail.tsx
index 740503f5db..2d16afc523 100644
--- a/src/pages/storage/StorageVolumeDetail.tsx
+++ b/src/pages/storage/StorageVolumeDetail.tsx
@@ -72,7 +72,7 @@ const StorageVolumeDetail: FC = () => {
         <TabLinks
           tabs={tabs}
           activeTab={activeTab}
-          tabUrl={`/ui/project/${project}/storage/detail/${pool}/volumes/${type}/${volume.name}`}
+          tabUrl={`/ui/project/${project}/storage/pool/${pool}/volumes/${type}/${volume.name}`}
         />
         <NotificationRow />
         {!activeTab && (
diff --git a/src/pages/storage/StorageVolumeHeader.tsx b/src/pages/storage/StorageVolumeHeader.tsx
index b0b4311733..7de87beaf3 100644
--- a/src/pages/storage/StorageVolumeHeader.tsx
+++ b/src/pages/storage/StorageVolumeHeader.tsx
@@ -50,7 +50,7 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project }) => {
       renameStorageVolume(project, volume, values.name)
         .then(() => {
           navigate(
-            `/ui/project/${project}/storage/detail/${volume.pool}/volumes/${volume.type}/${values.name}`,
+            `/ui/project/${project}/storage/pool/${volume.pool}/volumes/${volume.type}/${values.name}`,
           );
           toastNotify.success(
             `Storage volume ${volume.name} renamed to ${values.name}.`,
diff --git a/src/pages/storage/StorageVolumeNameLink.tsx b/src/pages/storage/StorageVolumeNameLink.tsx
index 954e9eb6aa..b976bdd637 100644
--- a/src/pages/storage/StorageVolumeNameLink.tsx
+++ b/src/pages/storage/StorageVolumeNameLink.tsx
@@ -17,11 +17,11 @@ export const generateLinkForVolumeDetail = (args: {
   project: string;
 }) => {
   const { volume, project } = args;
-  let path = `storage/detail/${volume.pool}/volumes/${volume.type}/${volume.name}`;
+  let path = `storage/pool/${volume.pool}/volumes/${volume.type}/${volume.name}`;
 
   // NOTE: name of a volume created from an instance is exactly the same as the instance name
   if (volume.type === "container" || volume.type === "virtual-machine") {
-    path = `instances/detail/${volume.name}`;
+    path = `instance/${volume.name}`;
   }
 
   if (volume.type === "image") {
diff --git a/src/pages/storage/StorageVolumeOverview.tsx b/src/pages/storage/StorageVolumeOverview.tsx
index 63ae96c65d..2b34fbee89 100644
--- a/src/pages/storage/StorageVolumeOverview.tsx
+++ b/src/pages/storage/StorageVolumeOverview.tsx
@@ -54,7 +54,7 @@ const StorageVolumeOverview: FC<Props> = ({ project, volume }) => {
                 <th className="p-muted-heading">Pool</th>
                 <td>
                   <Link
-                    to={`/ui/project/${project}/storage/detail/${volume.pool}`}
+                    to={`/ui/project/${project}/storage/pool/${volume.pool}`}
                   >
                     {volume.pool}
                   </Link>
diff --git a/src/pages/storage/StorageVolumes.tsx b/src/pages/storage/StorageVolumes.tsx
index 918e66e9a4..2f40f20215 100644
--- a/src/pages/storage/StorageVolumes.tsx
+++ b/src/pages/storage/StorageVolumes.tsx
@@ -237,7 +237,7 @@ const StorageVolumes: FC = () => {
         },
         {
           content: (
-            <Link to={`/ui/project/${project}/storage/detail/${volume.pool}`}>
+            <Link to={`/ui/project/${project}/storage/pool/${volume.pool}`}>
               {volume.pool}
             </Link>
           ),
diff --git a/src/pages/storage/forms/StorageVolumeEdit.tsx b/src/pages/storage/forms/StorageVolumeEdit.tsx
index f6e8b3890d..9309e2089a 100644
--- a/src/pages/storage/forms/StorageVolumeEdit.tsx
+++ b/src/pages/storage/forms/StorageVolumeEdit.tsx
@@ -70,7 +70,7 @@ const StorageVolumeEdit: FC<Props> = ({ volume }) => {
   });
 
   const setSection = (newSection: string) => {
-    const baseUrl = `/ui/project/${project}/storage/detail/${volume.pool}/volumes/${volume.type}/${volume.name}/configuration`;
+    const baseUrl = `/ui/project/${project}/storage/pool/${volume.pool}/volumes/${volume.type}/${volume.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
       : navigate(`${baseUrl}/${slugify(newSection)}`);