From b8c401107bcbb1093a97b529361137263160c0b2 Mon Sep 17 00:00:00 2001 From: LidiaDomingos <72155007+LidiaDomingos@users.noreply.github.com> Date: Thu, 24 Oct 2024 10:50:04 -0300 Subject: [PATCH 1/2] feat: add an section scroll on home page --- .eslintrc | 3 +- package.json | 2 + pages/index.module.css | 30 +++++ pages/index.tsx | 294 +++++++++++++++++++++++++++++------------ 4 files changed, 240 insertions(+), 89 deletions(-) diff --git a/.eslintrc b/.eslintrc index b7ea4826..0cba787a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -58,7 +58,8 @@ "no-await-in-loop": "off", "@next/next/no-img-element": "off", "import/prefer-default-export": "warn", - "no-console": "off" + "no-console": "off", + "import/no-extraneous-dependencies":"warn" }, "settings": { "import/resolver": { diff --git a/package.json b/package.json index 0f993957..606baff0 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react": "^17.0.2", "react-devicons": "^2.11.0-rev.2", "react-dom": "^17.0.2", + "react-scroll": "^1.9.0", "rehype-highlight": "<5.0.0", "rehype-stringify": "<9.0.0", "remark-gfm": "<2.0.0", @@ -70,6 +71,7 @@ "@types/node-fetch": "^3.0.3", "@types/nprogress": "^0.2.0", "@types/react": "^17.0.45", + "@types/react-scroll": "^1.8.10", "@types/sanitize-html": "^2.6.2", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", diff --git a/pages/index.module.css b/pages/index.module.css index 7699b78a..46d678d5 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -115,3 +115,33 @@ :global(.dark) .socialButtons svg { fill: white; } + +.sideNav { + position: fixed; + top: 100px; + right: 20px; + background-color: #f8f8f8; + padding: 10px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.sideNav ul { + list-style: none; + padding: 0; +} + +.sideNav li { + margin-bottom: 10px; +} + +.sideNav a { + text-decoration: none; + color: #333; + font-weight: bold; + cursor: pointer; +} + +.sideNav a:hover { + color: #0070f3; +} diff --git a/pages/index.tsx b/pages/index.tsx index 1e8ba52f..bdd567c2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -34,6 +34,7 @@ import Head from "components/head"; import getRepositoryStars from "lib/stars"; import { Algorithm } from "lib/models"; import HomeLayout from "layouts/home"; +import { Link as ScrollLink, Element } from "react-scroll" import classes from "./index.module.css"; export default function Home({ @@ -46,33 +47,136 @@ export default function Home({ stars: { [key: string]: number }; }) { const t = useTranslation(); + const offsetValue = + typeof window !== "undefined" ? -window.innerHeight / 3 : 0; return ( <> <Head description={t("indexMetaDescription")} /> - <Section title={t("topAlgorithms")}> - <AlgorithmsList noCategories algorithms={topAlgorithms} /> - </Section> + <nav className={classes.sideNav}> + <ul> + <li> + <ScrollLink + to="topAlgorithms" + smooth + duration={100} + offset={offsetValue} + > + {t("topAlgorithms")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="algorithmExplanationTitle" + smooth + duration={100} + offset={offsetValue} + > + {t("algorithmExplanationTitle")} + </ScrollLink> + </li> + <li> + <ScrollLink to="aboutUs" smooth duration={100} offset={offsetValue}> + {t("aboutUsTitle")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="featuredAlgorithms" + smooth + duration={100} + offset={offsetValue} + > + {t("featuredAlgorithms")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="topCategories" + smooth + duration={100} + offset={offsetValue} + > + {t("topCategories")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="programmingLanguages" + smooth + duration={100} + offset={offsetValue} + > + {t("programmingLanguagesTitle")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="contribute" + smooth + duration={100} + offset={offsetValue} + > + {t("contributeTitle")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="donateTitle" + smooth + duration={100} + offset={offsetValue} + > + {t("donateTitle")} + </ScrollLink> + </li> + <li> + <ScrollLink + to="socialTitle" + smooth + duration={100} + offset={offsetValue} + > + {t("socialTitle")} + </ScrollLink> + </li> + </ul> + </nav> + + <Element name="topAlgorithms"> + <Section title={t("topAlgorithms")}> + <AlgorithmsList noCategories algorithms={topAlgorithms} /> + </Section> + </Element> + <div> <Section> <Card className={classes.card}> <CardContent> <div className={classes.twoCols}> <div> - <Typography id="about" variant="h5" className={classes.title}> - {t("algorithmExplanationTitle")} - </Typography> - <Typography>{t("algorithmExplanation")}</Typography> + <Element name="algorithmExplanationTitle"> + <Typography + id="about" + variant="h5" + className={classes.title} + > + {t("algorithmExplanationTitle")} + </Typography> + <Typography>{t("algorithmExplanation")}</Typography> + </Element> </div> <div /> <div> - <Typography - id="aboutUs" - variant="h5" - className={classes.title} - > - {t("aboutUsTitle")} - </Typography> + <Element name="aboutUsTitle"> + <Typography + id="aboutUs" + variant="h5" + className={classes.title} + > + {t("aboutUsTitle")} + </Typography> + </Element> <Typography>{t("aboutUs")}</Typography> </div> </div> @@ -80,55 +184,60 @@ export default function Home({ </Card> </Section> </div> - <Section title={t("featuredAlgorithms")}> - <AlgorithmsList noCategories algorithms={featuredAlgorithms} /> - </Section> - <Section title={t("topCategories")}> - <CategoriesList - categories={[ - { - name: t("categories:sorts"), - icon: <Sort />, - href: "/category/sorts", - }, - { - name: t("categories:searches"), - icon: <Search />, - href: "/category/searches", - }, - { - name: t("categories:dynamicprogramming"), - icon: <OfflineBolt />, - href: "/category/dynamicprogramming", - }, - { - name: t("categories:ciphers"), - icon: <EnhancedEncryption />, - href: "/category/ciphers", - }, - { - name: t("categories:datastructures"), - icon: <Storage />, - href: "/category/datastructures", - }, - { - name: t("categories:math"), - icon: <Functions />, - href: "/category/math", - }, - { - name: t("categories:digitalimageprocessing"), - icon: <InsertPhoto />, - href: "/category/digitalimageprocessing", - }, - { - name: t("categories:strings"), - icon: <FormatQuote />, - href: "/category/strings", - }, - ]} - /> - </Section> + <Element name="featuredAlgorithms"> + <Section title={t("featuredAlgorithms")}> + <AlgorithmsList noCategories algorithms={featuredAlgorithms} /> + </Section> + </Element> + + <Element name="topCategories"> + <Section title={t("topCategories")}> + <CategoriesList + categories={[ + { + name: t("categories:sorts"), + icon: <Sort />, + href: "/category/sorts", + }, + { + name: t("categories:searches"), + icon: <Search />, + href: "/category/searches", + }, + { + name: t("categories:dynamicprogramming"), + icon: <OfflineBolt />, + href: "/category/dynamicprogramming", + }, + { + name: t("categories:ciphers"), + icon: <EnhancedEncryption />, + href: "/category/ciphers", + }, + { + name: t("categories:datastructures"), + icon: <Storage />, + href: "/category/datastructures", + }, + { + name: t("categories:math"), + icon: <Functions />, + href: "/category/math", + }, + { + name: t("categories:digitalimageprocessing"), + icon: <InsertPhoto />, + href: "/category/digitalimageprocessing", + }, + { + name: t("categories:strings"), + icon: <FormatQuote />, + href: "/category/strings", + }, + ]} + /> + </Section> + </Element> <div> <Section> @@ -136,14 +245,16 @@ export default function Home({ <CardContent> <div className={classes.twoCols}> <div> - <Typography - id="programmingLanguages" - variant="h5" - className={classes.title} - > - {t("programmingLanguagesTitle")} - </Typography> - <Typography>{t("programmingLanguages")}</Typography> + <Element name="programmingLanguages"> + <Typography + id="programmingLanguages" + variant="h5" + className={classes.title} + > + {t("programmingLanguagesTitle")} + </Typography> + <Typography>{t("programmingLanguages")}</Typography> + </Element> <LanguagesList languages={Object.keys(Repositories).map( (langName: Language) => ({ @@ -157,13 +268,15 @@ export default function Home({ </div> <div /> <div> - <Typography - id="contribute" - variant="h5" - className={classes.title} - > - {t("contributeTitle")} - </Typography> + <Element name="contributeTitle"> + <Typography + id="contribute" + variant="h5" + className={classes.title} + > + {t("contributeTitle")} + </Typography> + </Element> <div className="MuiTypography-root MuiTypography-body1"> <Translation name="contribute" @@ -193,13 +306,15 @@ export default function Home({ <WeblatePlainIcon color="black" /> Weblate </Button> - <Typography - id="donate" - variant="h5" - className={classes.title} - > - {t("donateTitle")} - </Typography> + <Element name="donateTitle"> + <Typography + id="donate" + variant="h5" + className={classes.title} + > + {t("donateTitle")} + </Typography> + </Element> <div className="MuiTypography-root MuiTypography-body1"> <Translation name="donateText" @@ -234,10 +349,13 @@ export default function Home({ </CardContent> </Card> </Section> + <Section className={classes.social}> - <Typography variant="h4" className={classes.socialTitle}> - {t("socialTitle")} - </Typography> + <Element name="socialTitle"> + <Typography variant="h4" className={classes.socialTitle}> + {t("socialTitle")} + </Typography> + </Element> <div className={classes.socialButtons}> <Tooltip title={t("socialGithub")}> <Card> From e4592c603528c378cb8c735cb8fa843f2b16ddfa Mon Sep 17 00:00:00 2001 From: LidiaDomingos <72155007+LidiaDomingos@users.noreply.github.com> Date: Sat, 26 Oct 2024 19:26:20 -0300 Subject: [PATCH 2/2] update to better visualization --- pages/index.module.css | 30 ++++++++++++++++++++++++++---- pages/index.tsx | 18 +++++++++--------- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/pages/index.module.css b/pages/index.module.css index 46d678d5..eb0fb609 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -118,12 +118,21 @@ .sideNav { position: fixed; + display:flex; + flex-direction: column; top: 100px; - right: 20px; + right: 0; + width: 3%; background-color: #f8f8f8; - padding: 10px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: width 0.3s ease; + z-index: 1000; +} + +.sideNav:hover { + width: 180px; } .sideNav ul { @@ -132,14 +141,27 @@ } .sideNav li { - margin-bottom: 10px; + white-space: nowrap; + margin-bottom: 1px; } .sideNav a { + display: flex; text-decoration: none; color: #333; font-weight: bold; - cursor: pointer; + align-items: center; + padding: 5px; + font-size: 0.8rem; + cursor: pointer; +} + +.sideNav a span { + display: none; +} + +.sideNav:hover a span { + display: inline; } .sideNav a:hover { diff --git a/pages/index.tsx b/pages/index.tsx index bdd567c2..770cb4c0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -62,7 +62,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("topAlgorithms")} + <span>{t("topAlgorithms")}</span> </ScrollLink> </li> <li> @@ -72,12 +72,12 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("algorithmExplanationTitle")} + <span>{t("algorithmExplanationTitle")}</span> </ScrollLink> </li> <li> <ScrollLink to="aboutUs" smooth duration={100} offset={offsetValue}> - {t("aboutUsTitle")} + <span>{t("aboutUsTitle")}</span> </ScrollLink> </li> <li> @@ -87,7 +87,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("featuredAlgorithms")} + <span>{t("featuredAlgorithms")}</span> </ScrollLink> </li> <li> @@ -97,7 +97,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("topCategories")} + <span>{t("topCategories")}</span> </ScrollLink> </li> <li> @@ -107,7 +107,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("programmingLanguagesTitle")} + <span>{t("programmingLanguagesTitle")}</span> </ScrollLink> </li> <li> @@ -117,7 +117,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("contributeTitle")} + <span>{t("contributeTitle")}</span> </ScrollLink> </li> <li> @@ -127,7 +127,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("donateTitle")} + <span>{t("donateTitle")}</span> </ScrollLink> </li> <li> @@ -137,7 +137,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("socialTitle")} + <span>{t("socialTitle")}</span> </ScrollLink> </li> </ul>