From 15f634d335169c50cc590243e259ea7bfae2ca9e Mon Sep 17 00:00:00 2001 From: AJaccP Date: Wed, 12 Jul 2023 00:52:43 +0530 Subject: [PATCH 1/4] Improve sidebar functionality --- .../resources/Sidebar/Sidebar.style.scss | 7 ++--- .../resources/Sidebar/SidebarItem.tsx | 26 ++++++++++++++++--- .../resources/Sidebar/data/SidebarData.json | 2 +- .../faq/free-vs-breadth-electives.md | 2 +- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/resources/Sidebar/Sidebar.style.scss b/src/components/resources/Sidebar/Sidebar.style.scss index 2b6dc1c..1631bd2 100644 --- a/src/components/resources/Sidebar/Sidebar.style.scss +++ b/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 { diff --git a/src/components/resources/Sidebar/SidebarItem.tsx b/src/components/resources/Sidebar/SidebarItem.tsx index 707e6ac..44d1c06 100644 --- a/src/components/resources/Sidebar/SidebarItem.tsx +++ b/src/components/resources/Sidebar/SidebarItem.tsx @@ -1,11 +1,29 @@ import "./Sidebar.style.scss"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { CircleIcon } from "../../core"; import type { SidebarItemProps } from "./Sidebar.model"; +interface RecursiveSidebarItemProps extends SidebarItemProps { + children?: RecursiveSidebarItemProps[]; +} + export default function SidebarItem(props: SidebarItemProps) { const [open, setOpen] = useState(false); + const checkActivePath = (item: RecursiveSidebarItemProps) => { + 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 ( <>
setOpen(!open)}> - + ) : null}
{/* if you have children, display children */} - {props.item.children ? ( + {props.item.children && (
{props.item.children.map((child, index) => ( ))}
- ) : null} + )} ); } diff --git a/src/components/resources/Sidebar/data/SidebarData.json b/src/components/resources/Sidebar/data/SidebarData.json index aa898e4..ba93191 100644 --- a/src/components/resources/Sidebar/data/SidebarData.json +++ b/src/components/resources/Sidebar/data/SidebarData.json @@ -107,7 +107,7 @@ }, { "title": "Carleton Co-op", - "path": "/careers", + "path": "/careers/coop", "children": [ { "title": "Co-op Pros and Cons", diff --git a/src/content/resources/faq/free-vs-breadth-electives.md b/src/content/resources/faq/free-vs-breadth-electives.md index 61fd164..6545998 100644 --- a/src/content/resources/faq/free-vs-breadth-electives.md +++ b/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. -- From 53826fd65f51b579b7001c4b65a674fec8cdb109 Mon Sep 17 00:00:00 2001 From: Matthew M-B Date: Sat, 15 Jul 2023 10:07:26 -0400 Subject: [PATCH 2/4] Add fixes --- .../resources/Sidebar/Sidebar.model.ts | 7 ------- .../resources/Sidebar/Sidebar.style.scss | 2 +- .../resources/Sidebar/SidebarItem.tsx | 18 +++++++----------- .../resources/Sidebar/data/SidebarData.json | 12 ++++++------ 4 files changed, 14 insertions(+), 25 deletions(-) diff --git a/src/components/resources/Sidebar/Sidebar.model.ts b/src/components/resources/Sidebar/Sidebar.model.ts index 15e349b..1ae10b3 100644 --- a/src/components/resources/Sidebar/Sidebar.model.ts +++ b/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; diff --git a/src/components/resources/Sidebar/Sidebar.style.scss b/src/components/resources/Sidebar/Sidebar.style.scss index 1631bd2..8e1dd57 100644 --- a/src/components/resources/Sidebar/Sidebar.style.scss +++ b/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; } diff --git a/src/components/resources/Sidebar/SidebarItem.tsx b/src/components/resources/Sidebar/SidebarItem.tsx index 44d1c06..9b2a4d1 100644 --- a/src/components/resources/Sidebar/SidebarItem.tsx +++ b/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(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) {
{props.item.title}
@@ -57,14 +53,14 @@ export default function SidebarItem(props: SidebarItemProps) { {/* if you have children, display a dropdown arrow */} {props.item.children ? ( ) : null} {/* if you have children, display children */} - {props.item.children && ( + {props.item.children ? (
{props.item.children.map((child, index) => ( ))}
- )} + ): null} ); } diff --git a/src/components/resources/Sidebar/data/SidebarData.json b/src/components/resources/Sidebar/data/SidebarData.json index ba93191..867a210 100644 --- a/src/components/resources/Sidebar/data/SidebarData.json +++ b/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" } ] From c3c7e5c7b02d44da1beb19a0ea61d5863d9f7d96 Mon Sep 17 00:00:00 2001 From: Matthew M-B Date: Sat, 15 Jul 2023 10:09:18 -0400 Subject: [PATCH 3/4] Update formatting --- src/components/resources/Sidebar/SidebarItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/resources/Sidebar/SidebarItem.tsx b/src/components/resources/Sidebar/SidebarItem.tsx index 9b2a4d1..3e96a8b 100644 --- a/src/components/resources/Sidebar/SidebarItem.tsx +++ b/src/components/resources/Sidebar/SidebarItem.tsx @@ -71,7 +71,7 @@ export default function SidebarItem(props: SidebarItemProps) { /> ))} - ): null} + ) : null} ); } From bc68e382cf8dc17e267e90cd777a6fe263fb9146 Mon Sep 17 00:00:00 2001 From: Matthew M-B Date: Sat, 15 Jul 2023 10:14:55 -0400 Subject: [PATCH 4/4] Fix typescript issue --- src/components/resources/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/resources/Sidebar/Sidebar.tsx b/src/components/resources/Sidebar/Sidebar.tsx index 0cfaede..b31e477 100644 --- a/src/components/resources/Sidebar/Sidebar.tsx +++ b/src/components/resources/Sidebar/Sidebar.tsx @@ -6,7 +6,7 @@ export default function Sidebar() { return (
{items.map((item, index) => ( - + ))}
);