-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(menu): adds collapsable drop-downs (#11)
* refactor(sidebars): refactors sidebars to be more modular and easier to work with * feat(toc): adds collapsable chapters
- Loading branch information
1 parent
cb297f6
commit 2f330e4
Showing
10 changed files
with
342 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
src/components/docs/sidebars/content-sidebar-left/chapter.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React, { useState } from "react" | ||
| import { Link } from "gatsby" | ||
| import Chevron from "../../../../images/icons/chevron.svg" | ||
|
|
||
| function renderPages(pages, currentPathBeingViewed) { | ||
| let renderedPages = [] | ||
| let isCurrentPathInChapter = false | ||
|
|
||
| for (let i = 0; i < pages.length; i++) { | ||
| const page = pages[i] | ||
| if (page.path === currentPathBeingViewed) { | ||
| isCurrentPathInChapter = true | ||
| } | ||
|
|
||
| renderedPages.push( | ||
| <li | ||
| key={page.path} | ||
| className={ | ||
| (currentPathBeingViewed === page.path ? "active " : "") + "page" | ||
| } | ||
| > | ||
| <Link to={page.path}>{page.title}</Link> | ||
| </li> | ||
| ) | ||
| } | ||
| return { renderedPages, isCurrentPathInChapter } | ||
| } | ||
|
|
||
| const ChapterMenuItem = ({ | ||
| chapter: { title, pages, collapsable }, | ||
| currentPathBeingViewed, | ||
| }) => { | ||
| const { renderedPages, isCurrentPathInChapter } = renderPages( | ||
| pages, | ||
| currentPathBeingViewed | ||
| ) | ||
| const [isCollapsableMenuOpen, setIsCollapsableMenuOpen] = useState( | ||
| isCurrentPathInChapter | ||
| ) | ||
|
|
||
| return ( | ||
| <ul className="chapter" key={title}> | ||
| <li | ||
| className={`title${collapsable ? " cursor-pointer" : ""}`} | ||
| onClick={() => { | ||
| setIsCollapsableMenuOpen(!isCollapsableMenuOpen) | ||
| }} | ||
| > | ||
| {title} | ||
| {collapsable && ( | ||
| <Chevron | ||
| className="collapsable-menu-chevron" | ||
| height="12" | ||
| width="12" | ||
| style={isCollapsableMenuOpen ? { rotate: "90deg" } : null} | ||
| /> | ||
| )} | ||
| </li> | ||
| {(!collapsable || isCollapsableMenuOpen) && renderedPages} | ||
| </ul> | ||
| ) | ||
| } | ||
|
|
||
| export default ChapterMenuItem |
90 changes: 90 additions & 0 deletions
90
src/components/docs/sidebars/content-sidebar-left/content-menu.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from "react" | ||
| import { Link } from "gatsby" | ||
| import CloseIcon from "../../../../images/icons/close.svg" | ||
| import Chevron from "../../../../images/icons/chevron.svg" | ||
| import ChapterMenuItem from "./chapter" | ||
|
|
||
| const ContentsMenu = ({ | ||
| isMobileMenuOpen, | ||
| closeMobileMenu, | ||
| CurrentIconImported, | ||
| currentTitle, | ||
| currentChapters, | ||
| currentPathBeingViewed, | ||
| setIsModuleSelectorMousedOver, | ||
| }) => { | ||
| return ( | ||
| <div | ||
| id="contents-sidebar-left" | ||
| className={ | ||
| (isMobileMenuOpen ? "" : "invisible ") + | ||
| "xl:visible z-30 contents-sidebar fixed bg-coolGray-50 min-h-screen border-r border-coolGray-100 border-solid w-full xl:w-320" | ||
| } | ||
| > | ||
| <div id="mobile-menu-button" className="absolute inset-0"> | ||
| <div | ||
| className="xl:hidden pointer-cursor my-4 mx-4" | ||
| onClick={closeMobileMenu} | ||
| > | ||
| <CloseIcon | ||
| width="24" | ||
| height="24" | ||
| className="fill-current text-coolGray-500 inline-block" | ||
| /> | ||
| <span className="ml-2">Close</span> | ||
| </div> | ||
| <div | ||
| id="module-selector" | ||
| className="h-28" | ||
| role="link" | ||
| tabIndex={0} | ||
| onMouseEnter={() => { | ||
| if (!isMobileMenuOpen) setIsModuleSelectorMousedOver(true) | ||
| }} | ||
| onMouseLeave={() => { | ||
| if (!isMobileMenuOpen) setIsModuleSelectorMousedOver(false) | ||
| }} | ||
| onClick={() => { | ||
| setIsModuleSelectorMousedOver(true) | ||
| }} | ||
| > | ||
| <div className="flex w-full items-center justify-center bg-coolGray-100 hover:bg-coolGray-200 h-28 px-4 cursor-pointer border-b border-coolGray-200"> | ||
| <div className="w-full flex items-center justify-center"> | ||
| <CurrentIconImported | ||
| className="mr-2" | ||
| width="40px" | ||
| height="40px" | ||
| /> | ||
| <span | ||
| className="font-semibold text-coolGray-700 whitespace-nowrap" | ||
| style={{ fontSize: "18px" }} | ||
| > | ||
| {currentTitle} | ||
| </span> | ||
| <Chevron | ||
| className="ml-2 fill-current text-coolGray-500" | ||
| width="16px" | ||
| height="16px" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="absolute inset-x-0"> | ||
| <div className="h-screen overflow-y-scroll"> | ||
| <div className="my-2 mx-3 pb-60"> | ||
| {currentChapters.map(e => ( | ||
| <ChapterMenuItem | ||
| key={e.title} | ||
| chapter={e} | ||
| currentPathBeingViewed={currentPathBeingViewed} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ContentsMenu |
Oops, something went wrong.
2f330e4There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://university.stjude.cloud as production
🚀 Deployed on https://601f22365610f99f664b199d--stjudecloud-university.netlify.app