fix navigation

acm-ucr · Nov 16, 2023 · af60ec1 · af60ec1
1 parent 47bc932
commit af60ec1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -7,7 +7,7 @@ import Upcoming from "@/components/static/upcoming/Upcoming";
 
 const Home = () => {
   return (
-    <>
+    <div className="w-full">
       <Release release={RELEASES.STATIC.UPCOMING}>
         <Upcoming />
       </Release>
@@ -20,7 +20,7 @@ const Home = () => {
       <Release release={RELEASES.STATIC.POSTLIVE}>
         <Postlive />
       </Release>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/dynamic/Navigation.jsx b/src/components/dynamic/Navigation.jsx
@@ -12,8 +12,7 @@ import { BiSolidDownArrow } from "react-icons/bi";
 const Navigation = () => {
   const [expand, setExpand] = useState(false);
   const pathName = usePathname();
-  const tabs = TABS[pathName.split("/")[1]];
-  const [dropdown, setDropdown] = useState(Object.keys(tabs)[0]);
+  const [tabs, setTabs] = useState(TABS[pathName.split("/")[1]]);
 
   return (
     <>
@@ -50,23 +49,28 @@ const Navigation = () => {
           </div>
           <div className="w-full flex flex-col items-center h-full">
             {Object.entries(tabs)
-              .filter(([title]) => title !== " ")
+              .filter(([title]) => title !== " " && title !== "dropdown")
               .map(([title, subTabs], index) => (
                 <div key={index} className="w-full">
                   <p
                     className={`text-white text-xl font-poppin font-bold w-full px-2 mb-0 flex items-center justify-between hover:cursor-pointer ${subTabs.mt}`}
-                    onClick={() => setDropdown(title === dropdown ? "" : title)}
+                    onClick={() =>
+                      setTabs({
+                        ...tabs,
+                        [title]: { ...subTabs, expand: !subTabs.expand },
+                      })
+                    }
                   >
                     {title}
-                    {subTabs.expand && (
+                    {tabs.dropdown && (
                       <BiSolidDownArrow
                         className={`text-sm duration-300 ${
-                          dropdown === title && "rotate-180"
+                          subTabs.expand && "rotate-180"
                         }`}
                       />
                     )}
                   </p>
-                  {(dropdown === title || !subTabs.expand) &&
+                  {(subTabs.expand || !tabs.dropdown) &&
                     subTabs.tabs.map((tab, index) => (
                       <Link
                         key={index}

diff --git a/src/data/dynamic/Navigation.js b/src/data/dynamic/Navigation.js
@@ -23,6 +23,7 @@ const iconStyle = "mr-2";
 
 export const TABS = {
   admin: {
+    dropdown: true,
     Dashboards: {
       expand: true,
       mt: "mt-0",
@@ -75,6 +76,7 @@ export const TABS = {
       ],
     },
     Services: {
+      dropdown: false,
       expand: true,
       mt: "mt-3",
       tabs: [