KK
/
customer-dashboard
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

open store menu

master
alex 2024-01-28 09:31:45 +01:00
parent 78038d7260
commit bfa1a6796c
3 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Components/AppRoutes/index.js
View File

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

29
src/Components/SideMenu/index.js
View File

@ -27,6 +27,7 @@ export function SideMenuContent({
const storesContext = useStoresContext(); const storesContext = useStoresContext();
const location = useLocation(); const location = useLocation();
const [selectedKeys, setSelectedKeys] = useState("/"); const [selectedKeys, setSelectedKeys] = useState("/");
const [openKeys, setOpenKeys] = useState([""]);
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
@ -56,13 +57,19 @@ export function SideMenuContent({
label: store.name, label: store.name,
icon: <ShopOutlined />, icon: <ShopOutlined />,
children: [], 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")) { if (sideBarContext.permissions.includes("settings")) {
groupStore.children.push({ groupStore.children.push({
label: t("sideMenu.store.settings"), label: t("sideMenu.store.settings"),
icon: <SettingOutlined />, 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({ groupStore.children.push({
label: t("sideMenu.store.employees"), label: t("sideMenu.store.employees"),
icon: <TeamOutlined />, 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({ groupStore.children.push({
label: t("sideMenu.store.services"), label: t("sideMenu.store.services"),
icon: <ScissorOutlined />, 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({ groupStore.children.push({
label: t("sideMenu.store.calendar"), label: t("sideMenu.store.calendar"),
icon: <CalendarOutlined />, 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({ groupStore.children.push({
label: t("sideMenu.store.website.title"), label: t("sideMenu.store.website.title"),
icon: <EditOutlined />, 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); 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 // 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 // this will prevent to auto close sideMenu on first render as the useEffects will be called after the first render
if (contentFirstRender.current) { if (contentFirstRender.current) {
@ -195,7 +209,10 @@ export function SideMenuContent({
theme="light" theme="light"
selectedKeys={[selectedKeys]} selectedKeys={[selectedKeys]}
items={getFirstMenuItems()} items={getFirstMenuItems()}
defaultOpenKeys={["/website"]} openKeys={openKeys}
onOpenChange={(openKeys) =>
setOpenKeys(openKeys[openKeys.length - 1])
}
/> />
</div> </div>
</div> </div>

14
src/utils.js
View File

@ -37,12 +37,14 @@ export const Constants = {
ROUTE_PATHS: { ROUTE_PATHS: {
OVERVIEW: "/", OVERVIEW: "/",
STORE: { 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", FEEDBACK: "/feedback",
SUPPORT: "/support", SUPPORT: "/support",