From d866582000c746a8d779504e1601e561ac8827bb Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Fri, 31 Jan 2025 20:15:09 +0530 Subject: [PATCH 1/3] Update TOCChapter.tsx Signed-off-by: Vivek Vishal --- src/custom/TOCChapter/TOCChapter.tsx | 82 ++++++++++++++++++---------- 1 file changed, 52 insertions(+), 30 deletions(-) diff --git a/src/custom/TOCChapter/TOCChapter.tsx b/src/custom/TOCChapter/TOCChapter.tsx index 125a73804..3031ff6f6 100644 --- a/src/custom/TOCChapter/TOCChapter.tsx +++ b/src/custom/TOCChapter/TOCChapter.tsx @@ -1,39 +1,61 @@ -import React from 'react'; +import React, { useState } from 'react'; import { TOCWrapper } from './style'; +import { IoMdClose } from '@react-icons/all-files/io/IoMdClose'; +import { IoIosArrowDropdownCircle } from '@react-icons/all-files/io/IoIosArrowDropdownCircle'; +import { Link } from "@mui/material/"; interface TOCProps { - availableChapters: string[]; - currentChapter: string | undefined | null; - onClick: (item: string, e: React.MouseEvent) => void; + availableChapters: string[]; + currentChapter: string | undefined | null; + onClick: (item: string, e: React.MouseEvent) => void; } const TOC: React.FC = ({ availableChapters, currentChapter, onClick }) => { - const reformatTOC = (data: string): string => { - const words = data.split('-'); - const formattedString = words - .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) - .join(' '); - return formattedString; - }; - return ( - -
-
    - {availableChapters.map((item) => ( -
  • { - onClick(item, e); - }} - > -

    {reformatTOC(item)}

    -
    • - ))} -
-
- - ); + const [expand, setExpand] = useState(false); + + const reformatTOC = (data: string): string => { + const words = data.split('-'); + const formattedString = words + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); + return formattedString; + }; + + return ( + +
+

{reformatTOC(currentChapter?.split(".mdx")[0] ?? '')}

+
+ {expand ? ( + setExpand(!expand)} + /> + ) : ( + setExpand(!expand)} + /> + )} +
+
+
+
    + {availableChapters.map((item) => ( +
  • { + onClick(item, e); + }} + > +

    {reformatTOC(item)}

    +
    • + ))} +
+
+ + ); }; export default TOC; From cb7188e25862c0467003bcea13f9cc6b8849d79f Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Fri, 31 Jan 2025 20:16:17 +0530 Subject: [PATCH 2/3] Update style.tsx Signed-off-by: Vivek Vishal --- src/custom/TOCChapter/style.tsx | 198 ++++++++++++++++++++------------ 1 file changed, 126 insertions(+), 72 deletions(-) diff --git a/src/custom/TOCChapter/style.tsx b/src/custom/TOCChapter/style.tsx index 40f3ae95b..c315991af 100644 --- a/src/custom/TOCChapter/style.tsx +++ b/src/custom/TOCChapter/style.tsx @@ -1,80 +1,134 @@ import { styled } from '@mui/material'; export const TOCWrapper = styled('div')(({ theme }) => ({ - '.chapter-back': { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - '& a': { - display: 'inline-flex', - '& svg': { - alignSelf: 'center', - fontSize: '1.5rem', - color: theme.palette.grey[600], - width: '100%', - maxWidth: '1.5rem' - }, - '& h4': { - fontWeight: 500, - textTransform: 'capitalize', - fontSize: '1.25rem' - }, - '&:hover': { - '& svg, & h4': { - color: theme.palette.text.primary - } - } + '.chapter-back': { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + '& svg': { + alignSelf: 'center', + fontSize: '1.5rem', + color: theme.palette.grey[600], + width: '100%', + maxWidth: '1.5rem', + }, + '& h4': { + fontWeight: 500, + textTransform: 'capitalize', + fontSize: '1.25rem', + display: "none" + }, + '&:hover': { + '& svg, & h4': { + color: theme.palette.text.primary, + }, + }, + '.toc-toggle-btn': { + display: 'none', + }, + '.toc-menu-icon': { + width: '1.5rem', + height: '1.5rem', + cursor: 'pointer', + fill: "rgb(60, 73, 79)", + transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)', + }, }, - '.toc-toggle-btn': { - display: 'none' + '.toc-list': { + '& ul': { + position: 'relative', + paddingInlineStart: '2.65rem', + MozPaddingStart: '2.65rem', + '&::after': { + position: 'absolute', + inset: '1rem auto 1rem 1.7rem', + width: 'auto', + height: 'auto', + borderLeft: `1px solid rgba(177, 182, 184, 0.25)`, + content: '""', + zIndex: 0, + }, + '& li': { + width: 'fit-content', + margin: '1rem 0', + '&::marker': { + color: 'rgba(177, 182, 184, 0.75)', + }, + '& p': { + margin: 0, + fontSize: '1rem', + '& a': { + color: + theme.palette.mode === 'light' + ? 'rgb(0 0 0 / 0.65)' + : 'rgb(255 255 255 / 0.65)', + transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)', + }, + }, + '&:hover': { + '&::marker, & p, & a': { + color: theme.palette.background.brand?.default, + }, + }, + }, + '.active-link': { + '&::marker, & p, & a': { + color: theme.palette.background.brand?.default, + }, + }, + }, }, - '.toc-menu-icon': { - width: '1.5rem', - height: '1.5rem', - cursor: 'pointer', - fill: theme.palette.secondary.main, - transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)' - } - }, - '.toc-list': { - '& ul': { - position: 'relative', - paddingInlineStart: '2.65rem', - MozPaddingStart: '2.65rem', - '&::after': { - position: 'absolute', - inset: '1rem auto 1rem 1.7rem', - width: 'auto', - height: 'auto', - borderLeft: `1px solid rgba(177, 182, 184, 0.25)`, - content: '""', - zIndex: 0 - }, - '& li': { - width: 'fit-content', - margin: '1rem 0', - '&::marker': { - color: 'rgba(177, 182, 184, 0.75)' + '@media (max-width: 992px)': { + '.toc-list': { + '& ul': { + '&::after': { + inset: '1rem auto 1rem 1.7rem', + }, + }, }, - '& p': { - margin: 0, - fontSize: '1rem', - '& a': { - color: theme.palette.mode === 'light' ? 'rgb(0 0 0 / 0.65)' : 'rgb(255 255 255 / 0.65)', - transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)' - } + }, + '@media (max-width: 767px)': { + position: 'initial', + '.toc-list': { + '& ul': { + display: 'flex', + flexWrap: 'wrap', + margin: '1.5rem 0', + flexDirection: 'column', + paddingInlineStart: '0rem', + '&::after': { + display: 'none', + }, + '& li': { + listStyleType: 'none', + margin: '0.5rem', + display: 'none', + }, + }, + '.toc-ul': { + opacity: 0, + height: 0, + transition: 'none', + paddingLeft: '1rem', + }, + '.toc-ul-open': { + height: 'auto', + opacity: 1, + transition: 'all 0.4s', + }, + '.toc-ul-open li': { + display: 'inline-block', + }, }, - '&:hover': { - '&::marker, & p, & a': { - color: theme.palette.background.brand?.default - } - } - }, - '.active-link': { - '&::marker, & p, & a': { - color: theme.palette.background.brand?.default - } - } - } - } + '.chapter-back': { + '& h4': { + margin: '0 1rem', + display: "block", + }, + '.toc-toggle-btn': { + display: 'flex', + }, + }, + }, })); + From 4da01948db4232087cbb55d7770c08d78b40468c Mon Sep 17 00:00:00 2001 From: Vivek Vishal Date: Fri, 31 Jan 2025 20:21:47 +0530 Subject: [PATCH 3/3] Update src/custom/TOCChapter/TOCChapter.tsx Signed-off-by: Vivek Vishal --- src/custom/TOCChapter/TOCChapter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/custom/TOCChapter/TOCChapter.tsx b/src/custom/TOCChapter/TOCChapter.tsx index 3031ff6f6..abdf4d476 100644 --- a/src/custom/TOCChapter/TOCChapter.tsx +++ b/src/custom/TOCChapter/TOCChapter.tsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import { TOCWrapper } from './style'; import { IoMdClose } from '@react-icons/all-files/io/IoMdClose'; import { IoIosArrowDropdownCircle } from '@react-icons/all-files/io/IoIosArrowDropdownCircle'; -import { Link } from "@mui/material/"; interface TOCProps { availableChapters: string[];