Client:Profile: change submenu to tabs

This commit is contained in:
Darya Umrikhina 2024-06-11 17:05:53 +07:00
parent df5884429c
commit 11f650da7c

View File

@ -32,7 +32,7 @@ import { inject, observer } from "mobx-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ProfileViewLoader } from "@docspace/shared/skeletons/profile"; import { ProfileViewLoader } from "@docspace/shared/skeletons/profile";
import { Submenu } from "@docspace/shared/components/submenu"; import { Tabs } from "@docspace/shared/components/tabs";
import MainProfile from "./sub-components/main-profile"; import MainProfile from "./sub-components/main-profile";
import LoginContent from "./sub-components/LoginContent"; import LoginContent from "./sub-components/LoginContent";
@ -54,7 +54,7 @@ const Wrapper = styled.div`
} }
`; `;
const StyledSubMenu = styled(Submenu)` const StyledTabs = styled(Tabs)`
> .sticky { > .sticky {
z-index: 201; z-index: 201;
margin-inline-end: -17px; margin-inline-end: -17px;
@ -91,13 +91,13 @@ const SectionBodyContent = (props) => {
content: <FileManagement />, content: <FileManagement />,
}); });
const getCurrentTab = () => { const getCurrentTabId = () => {
const path = location.pathname; const path = location.pathname;
const currentTab = data.findIndex((item) => path.includes(item.id)); const currentTab = data.find((item) => path.includes(item.id));
return currentTab !== -1 ? currentTab : 0; return currentTab !== -1 ? currentTab.id : data[0].id;
}; };
const currentTab = getCurrentTab(); const currentTabId = getCurrentTabId();
const onSelect = (e) => { const onSelect = (e) => {
const arrayPaths = location.pathname.split("/"); const arrayPaths = location.pathname.split("/");
@ -110,11 +110,11 @@ const SectionBodyContent = (props) => {
return ( return (
<Wrapper> <Wrapper>
<MainProfile /> <MainProfile />
<StyledSubMenu <StyledTabs
data={data} items={data}
startSelect={currentTab} selectedItemId={currentTabId}
onSelect={onSelect} onSelect={onSelect}
topProps={SECTION_HEADER_HEIGHT[currentDeviceType]} stickyTop={SECTION_HEADER_HEIGHT[currentDeviceType]}
/> />
</Wrapper> </Wrapper>
); );