Add fixes

Author: MathyouMB

src/components/resources/Sidebar/Sidebar.model.ts

@@ -1,17 +1,10 @@
 export interface SidebarItem {
-  title: string;
-  path?: string;
-  children?: SidebarItem[];
-}
-
-export interface SidebarItemGroup {
   title: string;
   path?: string;
   icon?: string;
   color?: string;
   children?: SidebarItem[];
 }
-
 export interface SidebarItemProps {
   item: SidebarItem;
   depth: number;

src/components/resources/Sidebar/Sidebar.style.scss

@@ -57,7 +57,7 @@
 }
 
 .sidebar-content {
-  max-height: 0; 
+  max-height: 0;
   overflow: hidden;
   transition: max-height 2s ease-in-out;
 }

src/components/resources/Sidebar/SidebarItem.tsx

@@ -1,16 +1,12 @@
 import "./Sidebar.style.scss";
 import { useState, useEffect } from "react";
 import { CircleIcon } from "../../core";
-import type { SidebarItemProps } from "./Sidebar.model";
-
-interface RecursiveSidebarItemProps extends SidebarItemProps {
-  children?: RecursiveSidebarItemProps[];
-}
+import type { SidebarItem, SidebarItemProps } from "./Sidebar.model";
 
 export default function SidebarItem(props: SidebarItemProps) {
   const [open, setOpen] = useState<boolean>(false);
 
-  const checkActivePath = (item: RecursiveSidebarItemProps) => {
+  const checkActivePath = (item: SidebarItem) => {
     if (props.item.path && window.location.pathname.includes(props.item.path)) {
       setOpen(true);
     } else if (item.children) {
@@ -35,9 +31,9 @@ export default function SidebarItem(props: SidebarItemProps) {
             <a href={props.item.path || "#"} className="sidebar-item plain">
               <div className="sidebar-title-container">
                 <CircleIcon
-                  icon={props.item.icon}
+                  icon={props.item.icon || ""}
                   size="size-small"
-                  colorSet={`${props.item.colorSet}-card`}
+                  colorSet={`${props.item.color || ""}-card`}
                 />
                 <span>{props.item.title}</span>
               </div>
@@ -57,14 +53,14 @@ export default function SidebarItem(props: SidebarItemProps) {
           {/* if you have children, display a dropdown arrow */}
           {props.item.children ? (
             <button className="menu-down" onClick={() => setOpen(!open)}>
-              <i className={`fa fa-chevron-${open ? "up" : "down"}`} />               
+              <i className={`fa fa-chevron-${open ? "up" : "down"}`} />
             </button>
           ) : null}
         </div>
       </div>
 
       {/* if you have children, display children */}
-      {props.item.children && (
+      {props.item.children ? (
         <div className={`sidebar-content ${open ? "open" : null}`}>
           {props.item.children.map((child, index) => (
             <SidebarItem
@@ -75,7 +71,7 @@ export default function SidebarItem(props: SidebarItemProps) {
             />
           ))}
         </div>
-      )}
+      ): null}
     </>
   );
 }

src/components/resources/Sidebar/data/SidebarData.json

@@ -2,7 +2,7 @@
   {
     "title": "Student Life",
     "icon": "fa fa-home",
-    "colorSet": "red",
+    "color": "red",
     "path": "/student-life",
     "children": [
       {
@@ -52,7 +52,7 @@
   {
     "title": "Academics",
     "icon": "fa fa-graduation-cap",
-    "colorSet": "green",
+    "color": "green",
     "path": "/academics",
     "children": [
       {
@@ -80,7 +80,7 @@
   {
     "title": "Careers",
     "icon": "fa fa-briefcase",
-    "colorSet": "blue",
+    "color": "blue",
     "path": "/careers",
     "children": [
       {
@@ -252,7 +252,7 @@
   {
     "title": "Self Learning",
     "icon": "fa fa-seedling",
-    "colorSet": "orange",
+    "color": "orange",
     "path": "/self-learning",
     "children": [
       {
@@ -264,7 +264,7 @@
   {
     "title": "Courses",
     "icon": "fa fa-book",
-    "colorSet": "purple",
+    "color": "purple",
     "path": "/courses",
     "children": [
       {
@@ -318,7 +318,7 @@
   {
     "title": "FAQs",
     "icon": "fa fa-lightbulb",
-    "colorSet": "yellow",
+    "color": "yellow",
     "path": "/faqs"
   }
 ]