Revert "fix: fixed the behavior of dropdown list when clicked outside…

… of its scope (rupali-codes#1838)" (rupali-codes#1963)

This reverts commit b1eec4b.

components/Backdrop/Backdrop.tsx

@@ -24,7 +24,6 @@ export const Backdrop: FC<{
 
   return createPortal(
     <div
-    data-custom='restrict-click-outside'
       className={`fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80
          ${className}
          ${status === 'preEnter' || status === 'entering' ? '' : 'opacity-0'}

components/Cards/Card.tsx

@@ -23,7 +23,7 @@ export const Card: FC<CardProps> = ({ data }) => {
   }, [])
 
   return (
-    <article data-custom='restrict-click-outside' className="z-10 h-full w-full rounded-3xl border border-dashed border-theme-secondary dark:border-theme-primary bg-[rgba(255,255,255,0.3)] shadow-md dark:bg-dark dark:text-text-primary dark:shadow-sm">
+    <article className="z-10 h-full w-full rounded-3xl border border-dashed border-theme-secondary dark:border-theme-primary bg-[rgba(255,255,255,0.3)] shadow-md dark:bg-dark dark:text-text-primary dark:shadow-sm">
       <div className="card-body">
         <header className="flex justify-between items-center gap-2">
           <h2
@@ -32,9 +32,7 @@ export const Card: FC<CardProps> = ({ data }) => {
           >
             {name}
           </h2>
-          <div
-            className="flex items-center gap-1"
-          >
+          <div className="flex items-center gap-1">
             <CopyToClipboard url={url} />
             <Share url={`${url}?ref=LinksHub`} title={name} />
           </div>

components/Header/Header.tsx

@@ -19,12 +19,12 @@ export const Header: FC = () => {
           <Logo className="text-3xl" />
         </Link>
       </div>
-      <div data-custom='restrict-click-outside' className="bg-light-primary relative h-full grow px-8 dark:bg-dark lg:dark:bg-dark-primary">
+      <div className="bg-light-primary relative h-full grow px-8 dark:bg-dark lg:dark:bg-dark-primary">
         <TopBar
           className="absolute left-8 hidden h-full md:flex"
           results={results}
         />
-        <div data-custom='restrict-click-outside' className="absolute right-8 flex h-full gap-4">
+        <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />
           <button

components/SideNavbar/SideNavbarCategory.tsx

@@ -3,18 +3,14 @@ import { FaAngleDown } from 'react-icons/fa'
 import { SideNavbarElement } from './SideNavbarElement'
 import type { ISidebar } from '../../types'
 import Link from 'next/link'
-import useOnClickOutside from 'hooks/useOnClickOutside'
-import { useRouter } from 'next/router'
-
 
 export const SideNavbarCategory: FC<{
   categoryData: ISidebar
   expand: boolean
-  listRef: React.MutableRefObject<HTMLUListElement | null>
-}> = ({ categoryData, expand, listRef }) => {
+}> = ({ categoryData, expand }) => {
   const [isOpen, setIsOpen] = useState(expand)
+
   const { category, subcategory } = categoryData
-  const router = useRouter();
   const sortedSubcategoryList = subcategory
     .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
     .map((subcategoryData, i) => (
@@ -31,16 +27,11 @@ export const SideNavbarCategory: FC<{
     setIsOpen(!isOpen)
   }
 
-  useOnClickOutside(listRef, () =>{
-    setIsOpen(false)
-    router.push('/')
-  })
-
   return (
     <li className="relative w-full transition-all ease-in-out text-theme-secondary dark:text-theme-primary dark:bg-opacity-5 hover:text-theme-secondary dark:hover:text-theme-primary rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary">
       <Link
         className="flex w-full cursor-pointer justify-between py-2"
-        onClick={() => handleToggle()}
+        onClick={handleToggle}
         aria-label="toggle category"
         href={`/${category}`}
       >

components/SideNavbar/SideNavbarCategoryList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, useRef } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import type { SubCategories } from '../../types'
 import { sidebarData } from 'database/data'
 import { SideNavbarCategory } from './SideNavbarCategory'
@@ -10,7 +10,6 @@ export const SideNavbarCategoryList: FC<{
   const categoriesList = getFilteredCategoryList(query)
   const router = useRouter()
   const [category, setCategory] = useState<string | undefined>('')
-  const listRef = useRef<HTMLUListElement | null>(null)
 
   useEffect(() => {
     const cat: string | undefined = router.query.category as string | undefined
@@ -29,13 +28,10 @@ export const SideNavbarCategoryList: FC<{
   }
 
   return (
-    <ul ref={listRef} className="mt-2 flex flex-col justify-center px-4 pb-24">
-      {/* Reset the open/close states of categories. This makes sure that
-      changes to the toggle state don't reflect when a new query is submitted */}
+    <ul className="mt-2 flex flex-col justify-center px-4 pb-24">
       <React.Fragment key={query}>
         {categoriesList.map((categoryData) => (
           <SideNavbarCategory
-            listRef={listRef}
             key={categoryData.category}
             categoryData={categoryData}
             expand={query.length > 0 || category === categoryData.category}

components/popup/popupInfo.tsx

@@ -27,7 +27,6 @@ export const PopupInfo: React.FC<{
       <Backdrop onClick={onClose} />
       {createPortal(
         <div
-          data-custom="restrict-click-outside"
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'

pages/[category]/index.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link'
 
 const CategoryPage = () => {
   const router = useRouter()
-  const { category } = router.query as { category: string }
+  const { category } = router.query as { category: string}
 
   const subcategories: SubCategories[] = []
   sidebarData.forEach((c) => {
@@ -34,10 +34,7 @@ const CategoryPage = () => {
                 resources!
               </p>
             </div>
-            <div
-              data-custom="restrict-click-outside"
-              className="flex flex-wrap gap-3 mt-6 justify-center items-start mx-auto lg:max-w-sm max-md:max-w-sm"
-            >
+            <div className="flex flex-wrap gap-3 mt-6 justify-center items-start mx-auto lg:max-w-sm max-md:max-w-sm">
               {subcategories.map((subcat, i) => (
                 <Link
                   key={i}
@@ -50,12 +47,9 @@ const CategoryPage = () => {
             </div>
           </>
         ) : (
-          <div className="text-center">
+          <div className='text-center'>
             <p className="text-theme-secondary dark:text-gray-text w-fit mx-auto text-center">
-              <span className="md:text-7xl text-xl uppercase font-bold ">
-                404|
-              </span>{' '}
-              No resources found.
+              <span className='md:text-7xl text-xl uppercase font-bold '>404|</span> No resources found.
             </p>
           </div>
         )}