feat: remove react-anchor-navigation

README.md

@@ -8,7 +8,6 @@ This repository contains the TypeScript codebase of a website for "Jardinieresma
 
 - **Achieved scalable architecture:** by TypeScript + React 
 - **Obtains contents always up-to-date:** Assembled with Facebook API & Flickr API. 
-- **Simple Navigation:**  Smooth, user-friendly interface using by react-anchor-navigation.
 - **Appeal to the eye:** Enhance visuals with react-image-gallery and styled-component. 
 
 ## Demo

package.json

@@ -15,7 +15,6 @@
     "firebase-tools": "^13.4.1",
     "flickr-sdk": "^7.0.0-beta.7",
     "react": "^18.2.0",
-    "react-anchor-navigation": "^0.2.7",
     "react-dom": "^18.2.0",
     "react-image-gallery": "^1.3.0",
     "react-router-dom": "^6.14.0",

src/App.tsx

@@ -1,21 +1,17 @@
 import { Route, Routes } from "react-router-dom";
-import { AnchorProvider } from "react-anchor-navigation";
 
 import BasicLayout from "./route/basic-layout/basic-layout";
 import Home from "./route/home/home.route";
 import Gallery from "./component/gallery/gallery.component";
 
 function App() {
   return (
-    <AnchorProvider>
-      <div>{/* TypeScriptの型解決のためのdiv */}</div>
-      <Routes>
-        <Route path="/" element={<BasicLayout />}>
-          <Route index element={<Home />} />
-          <Route path="gallery" element={<Gallery />} />
-        </Route>
-      </Routes>
-    </AnchorProvider>
+    <Routes>
+      <Route path="/" element={<BasicLayout />}>
+        <Route index element={<Home />} />
+        <Route path="gallery" element={<Gallery />} />
+      </Route>
+    </Routes>
   );
 }
 

src/component/main/main.component.tsx

@@ -1,5 +1,4 @@
 import { Fragment } from "react";
-// import { AnchorSection } from "react-anchor-navigation";
 
 import ArticlesPreview from "../../route/articles-preview/articles-preview.component";
 import ContentHeader from "../content-header/content-header.compoment";
@@ -15,15 +14,11 @@ const Main = () => {
   return (
     <Fragment>
       <div className="main-container">
-        {/* <AnchorSection id="accueil" /> */}
         <ContentHeader />
         <div className="contents-container">
-          {/* <AnchorSection id="propos" /> */}
           <ContentIntroduction />
           <MainVisual />
-          {/* <AnchorSection id="infos" /> */}
           <ArticlesPreview />
-          {/* <AnchorSection id="contact" /> */}
           <ContentContact />
         </div>
       </div>

src/component/nav/nav.component.tsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
 
-// import { AnchorLink } from "react-anchor-navigation";
-
 import { Navigation, Logo } from "./nav.styles";
 
 const Nav = () => {
@@ -19,26 +17,11 @@ const Nav = () => {
   return (
     <Navigation className={`${isNavshrunk ? "shrink" : ""}`}>
       <div className="logo-container">
-        {/* <AnchorLink href="#accueil">
-          <Logo className={`${isNavshrunk ? "shrink" : ""}`}></Logo>
-        </AnchorLink> */}
         <Link to="/">
           <Logo className={`${isNavshrunk ? "shrink" : ""}`}></Logo>
         </Link>
       </div>
       <ul className="menu">
-        {/* <li>
-          <AnchorLink href="#accueil">Accueil</AnchorLink>
-        </li>
-        <li>
-          <AnchorLink href="#propos">A&nbsp;propos</AnchorLink>
-        </li>
-        <li>
-          <AnchorLink href="#infos">Infos</AnchorLink>
-        </li>
-        <li>
-          <AnchorLink href="#contact">Contact</AnchorLink>
-        </li> */}
         <li>
           <Link to="/">Accueil</Link>
         </li>