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..eb0fb609 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -115,3 +115,55 @@ :global(.dark) .socialButtons svg { fill: white; } + +.sideNav { + position: fixed; + display:flex; + flex-direction: column; + top: 100px; + right: 0; + width: 3%; + background-color: #f8f8f8; + 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 { + list-style: none; + padding: 0; +} + +.sideNav li { + white-space: nowrap; + margin-bottom: 1px; +} + +.sideNav a { + display: flex; + text-decoration: none; + color: #333; + font-weight: bold; + 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 { + color: #0070f3; +} diff --git a/pages/index.tsx b/pages/index.tsx index 1e8ba52f..770cb4c0 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")} + +