feat(theme-toggle): implement triple tap gesture for theme switching and enhance sidebar visibility logic

src/components/Layouts/sidebar/index.tsx

@@ -15,6 +15,7 @@ export function Sidebar() {
   const pathname = usePathname();
   const { setIsOpen, isOpen, isMobile, toggleSidebar } = useSidebarContext();
   const [expandedItems, setExpandedItems] = useState<string[]>([]);
+  const isVisible = (item: { visible?: boolean }) => item.visible !== false;
 
   const toggleExpanded = (title: string) => {
     setExpandedItems((prev) =>
@@ -26,9 +27,9 @@ export function Sidebar() {
     const newExpandedItems: string[] = [];
 
     NAV_DATA.forEach((section) => {
-      section.items.forEach((item) => {
+      section.items.filter(isVisible).forEach((item) => {
         if (item.items.length > 0) {
-          const hasActiveSubItem = item.items.some(
+          const hasActiveSubItem = item.items.filter(isVisible).some(
             (subItem: NavSubItem) =>
               subItem.url === pathname ||
               (pathname.startsWith(subItem.url) && subItem.url !== "/"),
@@ -115,7 +116,14 @@ export function Sidebar() {
               isCollapsed ? "w-full px-1" : "pr-3",
             )}
           >
-            {NAV_DATA.map((section) => (
+            {NAV_DATA.map((section) => {
+              const visibleItems = section.items.filter(isVisible);
+
+              if (!visibleItems.length) {
+                return null;
+              }
+
+              return (
               <div key={section.label} className="mb-6">
                 {!isCollapsed && (
                   <h2 className="mb-4 px-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-dark-5 dark:text-dark-6">
@@ -125,18 +133,21 @@ export function Sidebar() {
 
                 <nav role="navigation" aria-label={section.label}>
                   <ul className={cn("space-y-2", isCollapsed && "space-y-1")}>
-                    {section.items.map((item) => (
+                    {visibleItems.map((item) => {
+                      const visibleSubItems = item.items.filter(isVisible);
+
+                      return (
                       <li key={item.title}>
-                        {item.items.length ? (
+                        {visibleSubItems.length ? (
                           <div>
                             <MenuItem
                               isActive={
-                                item.items.some(
+                                visibleSubItems.some(
                                   ({ url }: { url: string }) =>
                                     url === pathname,
                                 ) ||
-                                (item.items.length > 0 &&
-                                  item.items.some(
+                                (visibleSubItems.length > 0 &&
+                                  visibleSubItems.some(
                                     ({ url }: { url: string }) =>
                                       pathname.startsWith(url) && url !== "/",
                                   ))
@@ -178,7 +189,7 @@ export function Sidebar() {
                                   className="ml-9 mr-0 space-y-1.5 pb-[15px] pr-0 pt-2"
                                   role="menu"
                                 >
-                                  {item.items.map((subItem: NavSubItem) => (
+                                  {visibleSubItems.map((subItem: NavSubItem) => (
                                     <li key={subItem.title} role="none">
                                       <MenuItem
                                         as="link"
@@ -232,11 +243,13 @@ export function Sidebar() {
                           })()
                         )}
                       </li>
-                    ))}
+                    );
+                    })}
                   </ul>
                 </nav>
               </div>
-            ))}
+            );
+            })}
           </div>
 
           {/* Toggle button at bottom for collapsed state */}