[WEB-1982] chore: sidebar navigation item refactor (#5184)

* chore: sidebar navigation item refactor

* chore: module and cycle sidebar padding adjustment
This commit is contained in:
Anmol Singh Bhatia 2024-07-22 15:16:23 +05:30 committed by GitHub
parent 1956da2b90
commit 2ad1047323
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 40 additions and 32 deletions

View file

@ -33,6 +33,7 @@ type Props = {
cycleId: string;
handleClose: () => void;
isArchived?: boolean;
isPeekMode?: boolean;
};
const defaultValues: Partial<ICycle> = {
@ -45,7 +46,7 @@ const cycleService = new CycleService();
// TODO: refactor the whole component
export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { cycleId, handleClose, isArchived } = props;
const { cycleId, handleClose, isArchived, isPeekMode = false } = props;
// states
const [archiveCycleModal, setArchiveCycleModal] = useState(false);
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
@ -260,7 +261,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
)}
<>
<div className="sticky z-10 pt-20 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5">
<div
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
>
<div>
<button
className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"

View file

@ -51,6 +51,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
cycleId={peekCycle?.toString() ?? ""}
handleClose={handleClose}
isArchived={isArchived}
isPeekMode
/>
</div>
)}

View file

@ -63,11 +63,12 @@ type Props = {
moduleId: string;
handleClose: () => void;
isArchived?: boolean;
isPeekMode?: boolean;
};
// TODO: refactor this component
export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
const { moduleId, handleClose, isArchived } = props;
const { moduleId, handleClose, isArchived, isPeekMode = false } = props;
// states
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [archiveModuleModal, setArchiveModuleModal] = useState(false);
@ -309,7 +310,9 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
)}
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
<>
<div className="sticky z-10 pt-20 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5">
<div
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
>
<div>
<button
className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"

View file

@ -51,6 +51,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
moduleId={peekModule?.toString() ?? ""}
handleClose={handleClose}
isArchived={isArchived}
isPeekMode
/>
</div>
)}