Add navigation & search in tAcademy

components/CustomComboBox.js

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+
+function CustomComboBox({ topics, selectedTopic, onChange }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleItemClick = (link) => {
+    onChange(link)
+    setIsOpen(false)
+  }
+
+  const renderNestedList = (items) => {
+    return items.map((item) => (
+      <li
+        key={item.link}
+        onClick={() => handleItemClick(item.link)}
+        className={`m-2 cursor-pointer p-2 hover:bg-gray-100 ${
+          selectedTopic === item.link ? 'bg-gray-200 font-bold' : ''
+        } truncate`}
+      >
+        {item.title}
+      </li>
+    ))
+  }
+
+  const selectedTitle =
+    topics.find((topic) => topic.link === selectedTopic)?.title || 'Select a topic'
+
+  return (
+    <div className="relative">
+      <div
+        className="h-10 w-full cursor-pointer truncate rounded border border-gray-300 p-2"
+        onClick={() => setIsOpen(!isOpen)}
+        title={selectedTitle}
+      >
+        {selectedTitle}
+      </div>
+      {isOpen && (
+        <div className="absolute left-0 z-10 mt-1 max-h-60 w-full overflow-auto border border-gray-300 bg-white">
+          <ul className="list-none">
+            {topics.length > 0 ? (
+              renderNestedList(topics)
+            ) : (
+              <li className="p-2 text-gray-500">No topics found</li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CustomComboBox

components/DropdownSearch.js

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react'
+
+function DropdownSearch({
+  options,
+  value,
+  onChange,
+  placeholder,
+  searchQuery,
+  setSearchQuery,
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef(null)
+
+  const handleInputChange = (e) => {
+    setSearchQuery(e.target.value)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <div className="relative w-full" ref={dropdownRef}>
+      <input
+        type="text"
+        value={searchQuery}
+        onChange={handleInputChange}
+        onFocus={() => setIsOpen(true)}
+        placeholder={placeholder}
+        className="w-full rounded border border-gray-300 p-3"
+      />
+      {isOpen && (
+        <div className="absolute z-10 mt-1 max-h-44 w-full overflow-auto rounded border border-gray-300 bg-white shadow-lg">
+          {options.length > 0 ? (
+            options.map((option, index) => (
+              <div
+                key={`${option.link}-${index}`}
+                onClick={() => {
+                  onChange(option.link)
+                  setIsOpen(false)
+                }}
+                className={`cursor-pointer px-4 py-2 hover:bg-gray-100 ${
+                  value === option.link ? 'bg-gray-200' : ''
+                }`}
+              >
+                {`${'\u00A0'.repeat((option.depth || 0) * 4)}${option.title}`}
+              </div>
+            ))
+          ) : (
+            <div className="px-4 py-2 text-gray-500">There are no matches</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DropdownSearch

components/ModalInSideBar.js

@@ -8,6 +8,7 @@ function ModalInSideBar({
   buttonTitle,
   collapsed,
   contentClassName = 'p-4',
+  width = '30rem',
 }) {
   return (
     <>
@@ -23,7 +24,10 @@ function ModalInSideBar({
 
       {isOpen && (
         <div
-          className="absolute right-0 top-0 z-10 ml-4 flex h-[calc(100vh-40px)] min-h-full w-full cursor-default flex-col overflow-auto rounded-none border-th-secondary-300 bg-th-secondary-10 pb-3 shadow-md sm:overflow-visible sm:rounded-xl sm:border sm:pb-7 md:left-full md:h-min md:max-h-full md:overflow-hidden md:rounded-xl lg:ml-0 lg:w-[30rem] lg:rounded-none"
+          className={`absolute right-0 top-0 z-10 ml-4 flex h-[calc(100vh-40px)] min-h-full w-full cursor-default flex-col overflow-auto rounded-none border-th-secondary-300 bg-th-secondary-10 pb-3 shadow-md sm:overflow-visible sm:rounded-xl sm:border sm:pb-7 md:left-full md:h-min md:max-h-full md:overflow-hidden md:rounded-xl lg:ml-0 lg:rounded-none`}
+          style={{
+            width: window.matchMedia('(min-width: 1024px)').matches ? width : '100%',
+          }}
           onClick={(e) => e.stopPropagation()}
         >
           <div className="sticky top-0 flex items-center justify-center bg-th-secondary-400 py-4 sm:rounded-t-xl lg:rounded-t-none lg:px-7">

components/Panel/UI/TAContent.js

@@ -13,7 +13,7 @@ function TAContent({ item, setHref, config, goBack }) {
 
   return (
     <div
-      className={`absolute bottom-0 left-0 right-0 top-0 z-10 bg-th-secondary-10 pr-2 ${
+      className={`absolute bottom-0 left-0 right-0 top-0 z-10 bg-th-secondary-10 pr-2 pt-32 ${
         item ? '' : 'hidden'
       }`}
     >