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 ( <> -
- -
+ + + +
+ +
+ +
- - {t("algorithmExplanationTitle")} - - {t("algorithmExplanation")} + + + {t("algorithmExplanationTitle")} + + {t("algorithmExplanation")} +
- - {t("aboutUsTitle")} - + + + {t("aboutUsTitle")} + + {t("aboutUs")}
@@ -80,55 +184,60 @@ export default function Home({
-
- -
-
- , - href: "/category/sorts", - }, - { - name: t("categories:searches"), - icon: , - href: "/category/searches", - }, - { - name: t("categories:dynamicprogramming"), - icon: , - href: "/category/dynamicprogramming", - }, - { - name: t("categories:ciphers"), - icon: , - href: "/category/ciphers", - }, - { - name: t("categories:datastructures"), - icon: , - href: "/category/datastructures", - }, - { - name: t("categories:math"), - icon: , - href: "/category/math", - }, - { - name: t("categories:digitalimageprocessing"), - icon: , - href: "/category/digitalimageprocessing", - }, - { - name: t("categories:strings"), - icon: , - href: "/category/strings", - }, - ]} - /> -
+ +
+ +
+ + + +
+ , + href: "/category/sorts", + }, + { + name: t("categories:searches"), + icon: , + href: "/category/searches", + }, + { + name: t("categories:dynamicprogramming"), + icon: , + href: "/category/dynamicprogramming", + }, + { + name: t("categories:ciphers"), + icon: , + href: "/category/ciphers", + }, + { + name: t("categories:datastructures"), + icon: , + href: "/category/datastructures", + }, + { + name: t("categories:math"), + icon: , + href: "/category/math", + }, + { + name: t("categories:digitalimageprocessing"), + icon: , + href: "/category/digitalimageprocessing", + }, + { + name: t("categories:strings"), + icon: , + href: "/category/strings", + }, + ]} + /> +
+
@@ -136,14 +245,16 @@ export default function Home({
- - {t("programmingLanguagesTitle")} - - {t("programmingLanguages")} + + + {t("programmingLanguagesTitle")} + + {t("programmingLanguages")} + ({ @@ -157,13 +268,15 @@ export default function Home({
- - {t("contributeTitle")} - + + + {t("contributeTitle")} + +
Weblate - + + +
+
- - {t("socialTitle")} - + + + {t("socialTitle")} + +
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")} + {t("topAlgorithms")}
  • @@ -72,12 +72,12 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("algorithmExplanationTitle")} + {t("algorithmExplanationTitle")}
  • - {t("aboutUsTitle")} + {t("aboutUsTitle")}
  • @@ -87,7 +87,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("featuredAlgorithms")} + {t("featuredAlgorithms")}
  • @@ -97,7 +97,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("topCategories")} + {t("topCategories")}
  • @@ -107,7 +107,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("programmingLanguagesTitle")} + {t("programmingLanguagesTitle")}
  • @@ -117,7 +117,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("contributeTitle")} + {t("contributeTitle")}
  • @@ -127,7 +127,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("donateTitle")} + {t("donateTitle")}
  • @@ -137,7 +137,7 @@ export default function Home({ duration={100} offset={offsetValue} > - {t("socialTitle")} + {t("socialTitle")}