feat(UI-1290): add open submenu on click (#967)

autokitteh · Feb 11, 2025 · f4e1253 · f4e1253
1 parent 11d60be
commit f4e1253
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/components/molecules/menu/menu.tsx b/src/components/molecules/menu/menu.tsx
@@ -14,18 +14,18 @@ import { cn } from "@utilities";
 import { useModalStore, useProjectStore, useToastStore } from "@store";
 
 import { Button, IconSvg } from "@components/atoms";
-import { PopoverListWrapper, PopoverListContent, PopoverListTrigger } from "@components/molecules/popover/index";
+import { PopoverListWrapper, PopoverListContent, PopoverListTrigger } from "@components/molecules/popover";
 
 import { NewProject, ProjectsIcon } from "@assets/image";
 
 export const Menu = ({ className, isOpen = false }: MenuProps) => {
 	const { t } = useTranslation(["menu", "errors"]);
 	const { getProjectsList, projectsList } = useProjectStore();
 	const navigate = useNavigate();
-	const [sortedProjectsList, setSortedProjectsList] = useState<Project[]>([]);
+	const { projectId } = useParams();
 	const { openModal } = useModalStore();
 	const addToast = useToastStore((state) => state.addToast);
-	const { projectId } = useParams();
+	const [sortedProjectsList, setSortedProjectsList] = useState<Project[]>([]);
 
 	useEffect(() => {
 		const sortedProjects = projectsList.slice().sort((a, b) => a.name.localeCompare(b.name));
@@ -88,10 +88,10 @@ export const Menu = ({ className, isOpen = false }: MenuProps) => {
 						</AnimatePresence>
 					</Button>
 				</li>
-				<PopoverListWrapper animation="slideFromLeft" interactionType="hover">
+				<PopoverListWrapper animation="slideFromLeft" interactionType="click">
 					<PopoverListTrigger>
 						<li className="group">
-							<div className="z-10 flex w-full items-center justify-start gap-1.5 rounded-full p-0.5 text-gray-1100 group-hover:bg-green-200">
+							<div className="relative z-10 flex w-full items-center justify-start gap-1.5 rounded-full p-0.5 text-gray-1100 group-hover:bg-green-200">
 								<div className="flex size-9 items-center justify-center">
 									<IconSvg
 										alt={t("myProjects")}
@@ -120,7 +120,7 @@ export const Menu = ({ className, isOpen = false }: MenuProps) => {
 					<PopoverListContent
 						activeId={projectId}
 						className={cn(
-							"scrollbar z-30 flex h-screen flex-col overflow-scroll rounded-lg pb-16 pt-[212px] text-black",
+							"scrollbar z-20 flex h-screen flex-col overflow-scroll pb-16 pt-[212px] text-black",
 							"mr-2.5 w-auto border-x border-gray-500 bg-gray-250 px-2"
 						)}
 						emptyListMessage={t("noProjectsFound")}

diff --git a/src/components/molecules/popover/popoverListContent.tsx b/src/components/molecules/popover/popoverListContent.tsx
@@ -103,7 +103,7 @@ export const PopoverListContent = React.forwardRef<
 				value={searchTerm}
 			/>
 			{popoverItems.length ? (
-				<div style={{ overflowY: "auto", maxHeight: "100%" }}>
+				<div className="scrollbar max-h-full overflow-auto">
 					{popoverItems.map((item, index) => (
 						<div
 							aria-selected={context.activeIndex === index}

diff --git a/src/hooks/usePopover.ts b/src/hooks/usePopover.ts
@@ -19,7 +19,7 @@ import {
 import { PopoverOptions } from "@src/interfaces/components";
 
 const useBasePopover = (
-	{ animation, initialOpen = false, placement = "bottom" }: PopoverOptions = {
+	{ animation, initialOpen = false, placement = "bottom", onOpenChange }: PopoverOptions = {
 		interactionType: "hover",
 	}
 ) => {
@@ -28,7 +28,10 @@ const useBasePopover = (
 	const data = useFloating({
 		placement,
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: (isOpen) => {
+			onOpenChange?.(isOpen);
+			setOpen(isOpen);
+		},
 		whileElementsMounted: autoUpdate,
 		middleware: [
 			offset(5),