Merge pull request #983 from AOT-Technologies/revert-978-feature/FWF-5586-updation-of-navbar-collapse

arun-s-aot · web-flow · commit e6255943c9ff · 2025-11-21T18:51:06.000+05:30
Revert "Feature/fwf 5586 updation of navbar collapse"
diff --git a/forms-flow-components/src/components/SvgIcons/index.tsx b/forms-flow-components/src/components/SvgIcons/index.tsx
@@ -514,13 +514,6 @@ export const ApplicationLogo = ({ color = baseColor, ...props }) => (
   <path fillRule="evenodd" clipRule="evenodd" d="M7.30992 0.241904C6.98738 -0.0806347 6.46444 -0.0806347 6.1419 0.241904C5.81937 0.564443 5.81937 1.08738 6.1419 1.40992L7.1741 2.44212C3.14386 2.85546 0 6.26059 0 10.4C0 13.2954 1.53818 15.8316 3.84197 17.2359C4.27304 17.4987 4.8126 17.2432 4.94327 16.7555C5.04336 16.382 4.86452 15.994 4.53938 15.7846C2.77105 14.6458 1.6 12.6596 1.6 10.4C1.6 7.45211 3.59305 4.96973 6.30516 4.22682L6.1419 4.39008C5.81937 4.71262 5.81937 5.23556 6.1419 5.5581C6.46444 5.88064 6.98738 5.88064 7.30992 5.5581L9.38401 3.48401C9.70655 3.16147 9.70655 2.63853 9.38401 2.31599L7.30992 0.241904ZM8.21601 19.9581C8.53855 20.2806 9.06149 20.2806 9.38402 19.9581C9.70656 19.6356 9.70656 19.1126 9.38402 18.7901L8.93937 18.3454C12.915 17.8804 16 14.5005 16 10.4C16 7.41613 14.3664 4.8138 11.9448 3.4386C11.5152 3.19463 10.9928 3.4512 10.865 3.92841C10.7625 4.31082 10.9532 4.70681 11.2925 4.91077C13.1544 6.02993 14.4 8.0695 14.4 10.4C14.4 13.798 11.7518 16.5775 8.40666 16.7873L9.38402 15.8099C9.70656 15.4874 9.70656 14.9645 9.38402 14.6419C9.06149 14.3194 8.53855 14.3194 8.21601 14.6419L6.14192 16.716C5.81938 17.0385 5.81938 17.5615 6.14192 17.884L8.21601 19.9581ZM11.5259 7.53431C11.2135 7.22189 10.7065 7.22189 10.394 7.53431L7.1997 10.7286L5.80517 9.33412C5.49276 9.02201 4.98664 9.02189 4.67431 9.33412C4.36189 9.64654 4.36189 10.1535 4.67431 10.466L6.6411 12.4318C6.95352 12.7442 7.45954 12.7442 7.77196 12.4318C7.80682 12.3969 7.83766 12.3596 7.86474 12.3204C7.88561 12.3034 7.90582 12.2852 7.92528 12.2658L11.5259 8.66517C11.8379 8.35277 11.838 7.84664 11.5259 7.53431Z" fill="#253DF4"/>
 </svg>
 );
-export const MenuToggleIcon = ({ color = grayColor, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M4 6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6Z" stroke="#7C7D7F" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M15 4V20" stroke="#7C7D7F" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M9 10L11 12L9 14" stroke="#7C7D7F" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
 export const CopyIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx
@@ -23,7 +23,7 @@ import { LANGUAGE } from "../constants/constants";
 import { checkIntegrationEnabled } from "../services/integration";
 import MenuComponent from "./MenuComponent";
 // import Appname from "./formsflow.svg";
-import { ApplicationLogo, LogoutIcon, MenuToggleIcon } from "@formsflow/components";
+import { ApplicationLogo, LogoutIcon } from "@formsflow/components";
 import { ProfileSettingsModal } from "./ProfileSettingsModal";
 import PropTypes from 'prop-types';
 
@@ -139,25 +139,13 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
   const [activeKey, setActiveKey] = useState(0);
   const hideLogo = StyleServices?.getCSSVariable("--hide-formsflow-logo")?.toLowerCase();
 
-  const getInitialCollapsedState = () => {
-    return window.innerWidth <= 1200;
-  };
-  const [persistentCollapsed, setPersistentCollapsed] = useState(getInitialCollapsedState);
-  const [hoverToggled, setHoverToggled] = useState(false);
-  const collapsed = persistentCollapsed !== hoverToggled;
+  // Collapsible sidebar state
+  const [collapsed, setCollapsed] = useState(true);
   const sidebarRef = useRef(null);
 
-  const handleToggleClick = () => {
-    setPersistentCollapsed(!persistentCollapsed);
-    setHoverToggled(false);
-  };
-
-  const handleMouseEnter = () => {
-    setHoverToggled(true);
-  };
-  const handleMouseLeave = () => {
-    setHoverToggled(false);
-  };
+  // Expand on hover handlers
+  const handleMouseEnter = () => setCollapsed(false);
+  const handleMouseLeave = () => setCollapsed(true);
 
   const getInitials = (name) => {
     if (!name) return "";
@@ -360,6 +348,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
      return options;
   }
 
+  // Collapsible sidebar class
   const sidebarClass = `sidenav${collapsed ? " collapsed" : ""}`;
 
   useEffect(() => {
@@ -369,25 +358,6 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
     );
   }, [collapsed]);
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth > 1200) {
-        setPersistentCollapsed(false);
-      } else {
-        setPersistentCollapsed(true);
-      }
-      setHoverToggled(false);
-    };
-
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
   return (
     <div
       className={sidebarClass}
@@ -398,9 +368,6 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
       onMouseLeave={handleMouseLeave}
       role="button"
     >
-      <div className={`menu-toggle-icon${collapsed ? "" : " open"}`} onClick={handleToggleClick} role="button">
-        <MenuToggleIcon />
-      </div>
       {renderLogo(hideLogo, collapsed)}
       <div className={`options-container${collapsed ? " collapsed" : ""}`} data-testid="options-container">
         <Accordion activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
diff --git a/forms-flow-nav/src/sidenav/Sidebar.scss b/forms-flow-nav/src/sidenav/Sidebar.scss
@@ -79,21 +79,6 @@ $animSpeed: 300ms;
     width: var(--navbar-width); // expanded width
   }
 
-  .menu-toggle-icon {
-    padding: 0.87rem 0.75rem;
-    padding-bottom: 0;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-
-    svg {
-      transition: transform 0.3s ease;
-    }
-
-    &.open svg {
-      transform: rotate(180deg);
-    }
-  }
-
   .logo-container {
     display: flex;
     align-items: center;
@@ -106,7 +91,7 @@ $animSpeed: 300ms;
     text-align: center;
     // flex-grow: 1;
     overflow-y: auto;
-    margin-bottom: auto;
+    margin-bottom: 5rem;
   }
 
   .accordion {
