Sidebar overflow and scroll to active item (#51)

Sidebar overflow and scroll to active item

---------

Co-authored-by: SeverinoAmmirati <severino.ammirati@oncode.it>

Author: severinoAmmirati

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Sidebar overflow and automatic scroll to active item with `scrollIntoView`
+
 ## [3.1.1] - 2024-01-09
 
 ### Fixed

cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx

@@ -145,6 +145,6 @@ describe("PanelSidebar.cy.tsx", () => {
     cy.mount(PanelSidebar(sidebarItems));
 
     // Check active entries
-    cy.get("#home").parent("li").should("have.class", "active");
+    cy.get("#home").parent("div").parent("li").should("have.class", "active");
   });
 });

src/lib/Layout/PanelSideBarLayout/PanelSideBar/PanelSideBarItem.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import { ComponentType, useState } from "react";
+import { ComponentType, useState, useRef, useEffect } from "react";
 import { Collapse, NavItem } from "reactstrap";
 import { LinkRendererProps } from "src/lib/SideBar/SideBarMenuContext";
 import { PanelItem } from "./../PanelSideBar/Definitions/PanelItem";
@@ -19,52 +19,62 @@ const PanelSideBarItem = (props: PanelSideBarItemProps) => {
   const { depth = 0, children: item, LinkRenderer, onClick, toggledItemIds = [], toggledSidebar } = props;
 
   const hasitem = !!item.children?.length;
+  const isActive = item.children?.find((s) => s.active) || item.active;
   const [isOpen, setIsOpen] = useState(toggledItemIds?.includes(item.id) || item.expanded);
   if (item.display === false) {
     return null;
   }
+  const scrollToActiveItemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollToActiveItemRef.current && isActive) {
+      scrollToActiveItemRef.current.scrollIntoView();
+    }
+  }, []);
 
   return (
     <>
       <NavItem
         onClick={() => onClick && onClick(item)}
-        className={classNames({ "menu-open": isOpen, active: item.children?.find((s) => s.active) || item.active })}
+        className={classNames({ "menu-open": isOpen, active: isActive })}
         style={{ paddingLeft: depth ? `${depth + 1}rem` : undefined }}
       >
-        {hasitem ? (
-          <div className={classNames("d-flex flex-row", { "justify-content-between": item.collapseIconOnly })}>
-            {item.collapseIconOnly && (
+        <div ref={scrollToActiveItemRef}>
+          {hasitem ? (
+            <div className={classNames("d-flex flex-row", { "justify-content-between": item.collapseIconOnly })}>
+              {item.collapseIconOnly && (
+                <LinkRenderer item={item}>
+                  <span className="nav-link">
+                    {item.icon && <FontAwesomeIcon icon={item.icon} className="me-2" />}
+                    {item.title}
+                  </span>
+                </LinkRenderer>
+              )}
+
+              <a
+                role="button"
+                className={classNames("nav-link", { "w-100": !item.collapseIconOnly }, { "dropdown-toggle": hasitem })}
+                onClick={() => setIsOpen(!isOpen)}
+              >
+                {!item.collapseIconOnly && (
+                  <span>
+                    {item.icon && <FontAwesomeIcon className="me-2" icon={item.icon} />}
+                    {item.title}
+                  </span>
+                )}
+              </a>
+            </div>
+          ) : (
+            <>
               <LinkRenderer item={item}>
                 <span className="nav-link">
                   {item.icon && <FontAwesomeIcon icon={item.icon} className="me-2" />}
                   {item.title}
                 </span>
               </LinkRenderer>
-            )}
-
-            <a
-              role="button"
-              className={classNames("nav-link", { "w-100": !item.collapseIconOnly }, { "dropdown-toggle": hasitem })}
-              onClick={() => setIsOpen(!isOpen)}
-            >
-              {!item.collapseIconOnly && (
-                <span>
-                  {item.icon && <FontAwesomeIcon className="me-2" icon={item.icon} />}
-                  {item.title}
-                </span>
-              )}
-            </a>
-          </div>
-        ) : (
-          <>
-            <LinkRenderer item={item}>
-              <span className="nav-link">
-                {item.icon && <FontAwesomeIcon icon={item.icon} className="me-2" />}
-                {item.title}
-              </span>
-            </LinkRenderer>
-          </>
-        )}
+            </>
+          )}
+        </div>
       </NavItem>
 
       {hasitem && (

styles/Layout/PanelSideBarLayout.scss

@@ -131,14 +131,13 @@ section.content:first-of-type {
   position: fixed;
   display: flex;
   align-items: flex-start;
-  overflow-y: auto;
-  overflow-x: hidden;
   bottom: 0;
   background-color: $primary;
   width: $sidenav-base-width;
   top: $topnav-base-height;
   z-index: $zindex-fixed;
   transition: $sidebar-transition;
+  overflow: hidden;
 
   @include slim-scrollbar();
 
@@ -166,6 +165,8 @@ section.content:first-of-type {
       height: 100%;
       width: 100%;
       transition: #{width $sidebar-transition};
+      overflow-x: hidden;
+      overflow-y: auto;
 
       a {
         color: inherit;
@@ -203,6 +204,10 @@ section.content:first-of-type {
             margin-right: 0.5rem;
           }
 
+          &.dropdown-toggle {
+            position: relative;
+          }
+
           &.dropdown-toggle::after {
             @include chevron-right();
           }