navbarのリンクが各セクションに飛ぶようにする

piny940 · Sep 27, 2023 · 1e4af16 · 1e4af16
1 parent a1ffc69
commit 1e4af16
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 91 deletions.
diff --git a/src/containers/Project.tsx b/src/containers/Project.tsx
diff --git a/src/containers/Projects.tsx b/src/containers/Projects.tsx
@@ -9,7 +9,10 @@ export const ProjectsIndex: React.FC<ProjectsIndexProps> = ({
   className = '',
 }) => {
   return (
-    <div className={'d-flex flex-column align-items-center py-5 ' + className}>
+    <div
+      id="projects"
+      className={'d-flex flex-column align-items-center py-5 ' + className}
+    >
       <h1 className="text-center title-underline">Projects</h1>
       <p className="mt-4">それぞれQiita記事へのリンクになっています</p>
       <div className="row row-cols-md-2 row-cols-xl-3 w-75">

diff --git a/src/containers/Skills.tsx b/src/containers/Skills.tsx
@@ -7,7 +7,10 @@ export type SkillsProps = {
 
 export const Skills: React.FC<SkillsProps> = ({ className = '' }) => {
   return (
-    <div className={'d-flex flex-column align-items-center p-5 ' + className}>
+    <div
+      id="skills"
+      className={'d-flex flex-column align-items-center p-5 ' + className}
+    >
       <h1 className="text-center title-underline">Skills</h1>
       <div className="row row-cols-md-2 w-75 mt-4">
         {skillsData.map((skill) => (

diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
@@ -42,12 +42,12 @@ export const Navbar: React.FC = () => {
         >
           <ul className="navbar-nav w-100">
             <li className="nav-item">
-              <Link className="nav-link active" href="/skills">
+              <Link className="nav-link active" href="/#skills">
                 Skills
               </Link>
             </li>{' '}
             <li className="nav-item">
-              <Link className="nav-link active" href="/projects">
+              <Link className="nav-link active" href="/#projects">
                 Projects
               </Link>
             </li>