open store menu

src/Components/AppRoutes/index.js

@@ -30,7 +30,7 @@ export default function AppRoutes({ setUserSession }) {
       />
 
       <Route
-        path={`${Constants.ROUTE_PATHS.STORE.SETTINGS}/:storeId`}
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SETTINGS}`}
         element={
           <MySupsenseFallback>
             <StoreSettings />
@@ -39,7 +39,7 @@ export default function AppRoutes({ setUserSession }) {
       />
 
       <Route
-        path={`${Constants.ROUTE_PATHS.STORE.EMPLOYEES}/:storeId`}
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`}
         element={
           <MySupsenseFallback>
             <StoreEmployees />
@@ -48,7 +48,7 @@ export default function AppRoutes({ setUserSession }) {
       />
 
       <Route
-        path={`${Constants.ROUTE_PATHS.STORE.SERVICES}/:storeId`}
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SERVICES}`}
         element={
           <MySupsenseFallback>
             <StoreServices />
@@ -57,7 +57,7 @@ export default function AppRoutes({ setUserSession }) {
       />
 
       <Route
-        path={`${Constants.ROUTE_PATHS.STORE.CALENDAR}/:storeId`}
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.CALENDAR}`}
         element={
           <MySupsenseFallback>
             <StoreCalendar />
@@ -66,7 +66,7 @@ export default function AppRoutes({ setUserSession }) {
       />
 
       <Route
-        path={`${Constants.ROUTE_PATHS.STORE.CALENDAR_AUTH}/:status`}
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:status/:storeId/${Constants.ROUTE_PATHS.STORE.CALENDAR_AUTH}`}
         element={
           <MySupsenseFallback>
             <StoreCalendarAuth />
@@ -75,7 +75,7 @@ export default function AppRoutes({ setUserSession }) {
       />
 
       <Route
-        path={`${Constants.ROUTE_PATHS.STORE.WEBSITE}/:storeId`}
+        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.WEBSITE}`}
         element={
           <MySupsenseFallback>
             <StoreWebsite />

src/Components/SideMenu/index.js

@@ -27,6 +27,7 @@ export function SideMenuContent({
   const storesContext = useStoresContext();
   const location = useLocation();
   const [selectedKeys, setSelectedKeys] = useState("/");
+  const [openKeys, setOpenKeys] = useState([""]);
   const { t } = useTranslation();
 
   const navigate = useNavigate();
@@ -56,13 +57,19 @@ export function SideMenuContent({
         label: store.name,
         icon: <ShopOutlined />,
         children: [],
+        key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}`,
       };
 
+      console.warn(
+        "here",
+        `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}`
+      );
+
       if (sideBarContext.permissions.includes("settings")) {
         groupStore.children.push({
           label: t("sideMenu.store.settings"),
           icon: <SettingOutlined />,
-          key: `${Constants.ROUTE_PATHS.STORE.SETTINGS}/${store.store_id}`,
+          key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.SETTINGS}`,
         });
       }
 
@@ -70,7 +77,7 @@ export function SideMenuContent({
         groupStore.children.push({
           label: t("sideMenu.store.employees"),
           icon: <TeamOutlined />,
-          key: `${Constants.ROUTE_PATHS.STORE.EMPLOYEES}/${store.store_id}`,
+          key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`,
         });
       }
 
@@ -78,7 +85,7 @@ export function SideMenuContent({
         groupStore.children.push({
           label: t("sideMenu.store.services"),
           icon: <ScissorOutlined />,
-          key: `${Constants.ROUTE_PATHS.STORE.SERVICES}/${store.store_id}`,
+          key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.SERVICES}`,
         });
       }
 
@@ -86,7 +93,7 @@ export function SideMenuContent({
         groupStore.children.push({
           label: t("sideMenu.store.calendar"),
           icon: <CalendarOutlined />,
-          key: `${Constants.ROUTE_PATHS.STORE.CALENDAR}/${store.store_id}`,
+          key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.CALENDAR}`,
         });
       }
 
@@ -97,7 +104,7 @@ export function SideMenuContent({
         groupStore.children.push({
           label: t("sideMenu.store.website.title"),
           icon: <EditOutlined />,
-          key: `${Constants.ROUTE_PATHS.STORE.WEBSITE}/${store.store_id}`,
+          key: `${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${store.store_id}/${Constants.ROUTE_PATHS.STORE.WEBSITE}`,
         });
       }
 
@@ -141,6 +148,13 @@ export function SideMenuContent({
 
     setSelectedKeys(pathname);
 
+    let path = pathname.split("/");
+
+    if (path.length > 2) {
+      // /store/:storeId/:subPage - open the store menu
+      setOpenKeys([`/${path[1]}/${path[2]}`]);
+    }
+
     // auto close sideMenu on mobile
     // this will prevent to auto close sideMenu on first render as the useEffects will be called after the first render
     if (contentFirstRender.current) {
@@ -195,7 +209,10 @@ export function SideMenuContent({
             theme="light"
             selectedKeys={[selectedKeys]}
             items={getFirstMenuItems()}
-            defaultOpenKeys={["/website"]}
+            openKeys={openKeys}
+            onOpenChange={(openKeys) =>
+              setOpenKeys(openKeys[openKeys.length - 1])
+            }
           />
         </div>
       </div>

src/utils.js

@@ -37,12 +37,14 @@ export const Constants = {
   ROUTE_PATHS: {
     OVERVIEW: "/",
     STORE: {
-      SETTINGS: "/store/settings",
+      // schema: /store/:storeId/:subPage
-      EMPLOYEES: "/store/employees",
+      OVERVIEW: "/store",
-      SERVICES: "/store/services",
+      SETTINGS: "settings",
-      CALENDAR: "/store/calendar",
+      EMPLOYEES: "employees",
-      CALENDAR_AUTH: "/store/calendar/auth",
+      SERVICES: "services",
-      WEBSITE: "/store/website",
+      CALENDAR: "calendar",
+      CALENDAR_AUTH: "calendar/auth",
+      WEBSITE: "website",
     },
     FEEDBACK: "/feedback",
     SUPPORT: "/support",