Improve sidebar functionality

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

@@ -3,7 +3,7 @@
   width: 260px;
   flex-shrink: 0;
   height: 100vh;
-  overflow: auto;
+  overflow-y: auto;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
@@ -57,12 +57,13 @@
 }
 
 .sidebar-content {
-  height: 0;
+  max-height: 0;
   overflow: hidden;
+  transition: max-height 2s ease-in-out;
 }
 
 .sidebar-content.open {
-  height: auto;
+  max-height: 10000px; /* random value, just needs to be higher than the maximum possible height of a submenu */
 }
 
 .sidebar-item.plain {

src/components/resources/Sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ export default function Sidebar() {
   return (
     <div className="sidebar">
       {items.map((item, index) => (
-        <SidebarItem key={index} item={item} depth={0} color={item.colorSet} />
+        <SidebarItem key={index} item={item} depth={0} color={item.color} />
       ))}
     </div>
   );

src/components/resources/Sidebar/SidebarItem.tsx

@@ -1,11 +1,25 @@
 import "./Sidebar.style.scss";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { CircleIcon } from "../../core";
-import type { SidebarItemProps } from "./Sidebar.model";
+import type { SidebarItem, SidebarItemProps } from "./Sidebar.model";
 
 export default function SidebarItem(props: SidebarItemProps) {
   const [open, setOpen] = useState<boolean>(false);
 
+  const checkActivePath = (item: SidebarItem) => {
+    if (props.item.path && window.location.pathname.includes(props.item.path)) {
+      setOpen(true);
+    } else if (item.children) {
+      for (const childItem of item.children) {
+        checkActivePath(childItem);
+      }
+    }
+  };
+
+  useEffect(() => {
+    checkActivePath(props.item);
+  }, [props.item]);
+
   return (
     <>
       <div
@@ -17,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>

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": [
       {
@@ -107,7 +107,7 @@
       },
       {
         "title": "Carleton Co-op",
-        "path": "/careers",
+        "path": "/careers/coop",
         "children": [
           {
             "title": "Co-op Pros and Cons",
@@ -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"
   }
 ]

src/content/resources/faq/free-vs-breadth-electives.md

@@ -14,7 +14,7 @@ sources:
     link: https://carleton.ca/scs/current-students/undergraduate-students/help-selecting-courses/electives-and-prohibited-courses-2/
 ---
 
-**TDLR**: Breadth Electives **cannot** be under **COMP, MATH, or STAT**. After you furfill your breadth elective requirement, courses that would have counted towards your breadth requirement begin to count as free electives.
+**TDLR**: Breadth Electives **cannot** be under **COMP, MATH, or STAT**. After you fulfill your breadth elective requirement, courses that would have counted towards your breadth requirement begin to count as free electives.
 
 --