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>