Clean

process-analytics · Aug 1, 2023 · 900ef69 · 900ef69
1 parent 9548621
commit 900ef69
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 44 deletions.
diff --git a/src/components/material-kit/Navbar/Navbar.tsx b/src/components/material-kit/Navbar/Navbar.tsx
@@ -45,7 +45,11 @@ import { Dropdown, NavbarItems } from './desktop';
 import { isMobileView as isMobileViewFunc } from '../../../helper';
 
 import { BrandContent } from '../..';
-import { HeaderRoute } from '../../Header';
+import {
+  HeaderRoute,
+  HeaderRouteWithMenus,
+  isHeaderRouteWithMenus,
+} from '../../Header';
 
 const InnerContainer = ({
   brandContent,
@@ -60,10 +64,10 @@ const InnerContainer = ({
 }: Omit<NavbarProps, 'hoverStyle'> & {
   hoverStyle: HoverStyle;
 }): JSX.Element => {
-  const [collapseElement, setCollapseElement] = useState<
+  const [collapsedElement, setCollapsedElement] = useState<
     EventTarget & HTMLSpanElement
   >();
-  const [collapseName, setCollapseName] = useState<string>();
+  const [collapsedName, setCollapsedName] = useState<string>();
 
   const [isOpenMobileNavbar, setIsOpenMobileNavbar] = useState(false);
   const isMobileView = isMobileViewFunc();
@@ -109,9 +113,9 @@ const InnerContainer = ({
               routes={routes}
               isCenter={isCenter}
               hoverStyle={hoverStyle}
-              setCollapseElement={setCollapseElement}
-              setCollapseName={setCollapseName}
-              collapseName={collapseName}
+              setCollapsedElement={setCollapsedElement}
+              setCollapsedName={setCollapsedName}
+              collapsedName={collapsedName}
             />
           )}
 
@@ -148,10 +152,10 @@ const InnerContainer = ({
               isHeaderRouteWithMenus(route),
             ) as HeaderRouteWithMenus[]
           }
-          collapseElement={collapseElement}
-          collapseName={collapseName}
-          setCollapseElement={setCollapseElement}
-          setCollapseName={setCollapseName}
+          collapsedElement={collapsedElement}
+          collapsedName={collapsedName}
+          setCollapsedElement={setCollapsedElement}
+          setCollapsedName={setCollapsedName}
           dropdownStyle={dropdownStyle}
           hoverStyle={hoverStyle}
         />

diff --git a/src/components/material-kit/Navbar/common/NavbarItem.tsx b/src/components/material-kit/Navbar/common/NavbarItem.tsx
@@ -100,12 +100,10 @@ const Title = ({
 
     <MKTypography
       variant="button"
-      // variant="body2"
       fontWeight="regular"
       textTransform="capitalize"
       color="inherit"
       sx={{
-        // fontWeight: 'bold',
         ml: 1,
         mr: 0.25,
         alignSelf: 'center',

diff --git a/src/components/material-kit/Navbar/desktop/Dropdown.tsx b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
@@ -25,7 +25,9 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import React, { useState } from 'react';
+import React, { Dispatch, SetStateAction, useState } from 'react';
+
+import { HeaderRouteWithMenus } from '../../../Header';
 
 import { NavDropdown, NavDropdownProps } from './navDropdown';
 import {
@@ -35,28 +37,29 @@ import {
 
 export type DropdownProps = {
   routes: HeaderRouteWithMenus[];
-  collapseName?: string;
-  setCollapseName: Dispatch<SetStateAction<string | undefined>>;
-  setCollapseElement: Dispatch<
+  collapsedName?: string;
+  setCollapsedName: Dispatch<SetStateAction<string | undefined>>;
+  setCollapsedElement: Dispatch<
     SetStateAction<(EventTarget & HTMLSpanElement) | undefined>
   >;
 };
 
 export const Dropdown = ({
   routes,
-  collapseElement,
-  setCollapseElement,
-  collapseName,
-  setCollapseName,
+  collapsedElement,
+  setCollapsedElement,
+  collapsedName,
+  setCollapsedName,
   dropdownStyle,
   hoverStyle,
-}: Omit<
-  NavDropdownProps,
-  | 'nestedDropdownName'
-  | 'setNestedDropdownName'
-  | 'nestedDropdownElement'
-  | 'setNestedDropdownElement'
-> &
+}: DropdownProps &
+  Omit<
+    NavDropdownProps,
+    | 'nestedDropdownName'
+    | 'setNestedDropdownName'
+    | 'nestedDropdownElement'
+    | 'setNestedDropdownElement'
+  > &
   Omit<
     NestedDropdownMenuProps,
     | 'routes'
@@ -73,12 +76,20 @@ export const Dropdown = ({
   return (
     <>
       <NavDropdown
-        routes={routes.filter(route => route.name === collapseName)}
-        collapseElement={collapseElement}
+        routes={routes.filter(route => route.name === collapsedName)}
+        collapsedElement={collapsedElement}
         setNestedDropdownElement={setNestedDropdownElement}
         setNestedDropdownName={setNestedDropdownName}
         dropdownStyle={dropdownStyle}
         hoverStyle={hoverStyle}
+        onMouseEnter={() => {
+          setCollapsedElement(collapsedElement);
+        }}
+        onMouseLeave={() => {
+          if (!nestedDropdownName) {
+            setCollapsedName(undefined);
+          }
+        }}
       />
       <NestedDropdownMenu
         routes={routes}

diff --git a/src/components/material-kit/Navbar/desktop/NavbarItems.tsx b/src/components/material-kit/Navbar/desktop/NavbarItems.tsx
@@ -36,20 +36,20 @@ import { Link } from '../../..';
 type NavbarItemsProps = {
   routes: HeaderRoute[];
   isCenter?: boolean;
-  setCollapseElement: Dispatch<
+  setCollapsedElement: Dispatch<
     SetStateAction<(EventTarget & HTMLSpanElement) | undefined>
   >;
-  setCollapseName: Dispatch<SetStateAction<string | undefined>>;
-  collapseName?: string;
+  setCollapsedName: Dispatch<SetStateAction<string | undefined>>;
+  collapsedName?: string;
   hoverStyle: HoverStyle;
 };
 
 export const NavbarItems = ({
   routes,
   isCenter,
-  setCollapseElement,
-  setCollapseName,
-  collapseName,
+  setCollapsedElement,
+  setCollapsedName,
+  collapsedName,
   hoverStyle,
 }: NavbarItemsProps): JSX.Element => (
   <MKBox
@@ -67,16 +67,16 @@ export const NavbarItems = ({
           hoverStyle={hoverStyle}
           icon={route.icon}
           isCollapsible={!!route.menus}
-          isCollapsed={route.name === collapseName}
+          isCollapsed={route.name === collapsedName}
           onMouseEnter={({
             currentTarget,
           }: React.MouseEvent<HTMLDivElement>): void => {
-            setCollapseElement(currentTarget);
-            setCollapseName(route.name);
+            setCollapsedElement(currentTarget);
+            setCollapsedName(route.name);
           }}
           onMouseLeave={(): void => {
-            setCollapseElement(undefined);
-            setCollapseName(undefined);
+            setCollapsedElement(undefined);
+            setCollapsedName(undefined);
           }}
         />
       ) : (

diff --git a/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx b/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
@@ -39,7 +39,7 @@ import { MKTypography, MKBox, MKBoxProps } from '../../..';
 
 export type NavDropdownProps = {
   routes: HeaderRouteWithMenus[];
-  collapseElement?: EventTarget & HTMLSpanElement;
+  collapsedElement?: EventTarget & HTMLSpanElement;
   setNestedDropdownElement: Dispatch<
     SetStateAction<(EventTarget & HTMLSpanElement) | undefined>
   >;
@@ -51,7 +51,7 @@ export type NavDropdownProps = {
 };
 export const NavDropdown = ({
   routes,
-  collapseElement,
+  collapsedElement,
   setNestedDropdownElement,
   setNestedDropdownName,
   dropdownStyle,
@@ -63,9 +63,9 @@ export const NavDropdown = ({
 
   return (
     <Popper
-      anchorEl={collapseElement}
+      anchorEl={collapsedElement}
       popperRef={null}
-      open={!!collapseElement}
+      open={!!collapsedElement}
       placement="bottom"
       transition
       style={{ zIndex: 10 }}