Navbarを作成 (#9)

* navbarを作成 * レイアウトを調整 * worksを修正 * worksページを作成 * navbarを作成 * 見た目を修正
piny940 · Jul 2, 2023 · 4c95526 · 4c95526
1 parent 21a8ab4
commit 4c95526
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 6 deletions.
diff --git a/src/components/Portfolio/WorkItem.tsx b/src/components/Portfolio/WorkItem.tsx
@@ -6,7 +6,8 @@ import { useTheme } from '@/context/ThemeProvider'
 import Image from 'next/image'
 
 const WorkItemDiv = styled.div`
-  min-width: 300px;
+  min-width: 200px;
+  max-width: 100%;
 `
 
 export type WorkItemProps = {

diff --git a/src/containers/Profile.tsx b/src/containers/Profile.tsx
@@ -17,6 +17,7 @@ const ProfileDiv = styled.div`
     rgb(45, 219, 208) 100%
   );
   border-image-slice: 1;
+  max-width: 90%;
 `
 
 export type ProfilesProps = {

diff --git a/src/containers/Works.tsx b/src/containers/Works.tsx
@@ -7,11 +7,11 @@ export type WorksProps = {
 
 export const Works: React.FC<WorksProps> = ({ className = '' }) => {
   return (
-    <div className={'d-flex flex-column align-items-center p-5 ' + className}>
+    <div className={'d-flex flex-column align-items-center py-5 ' + className}>
       <h1 className="text-center title-underline">Works</h1>
-      <div className="row row-cols-lg-2 w-75 mt-4">
+      <div className="row row-cols-md-2 row-cols-xl-3 w-75 mt-4">
         {worksData.map((work) => (
-          <div className="col p-3 my-3" key={work.title}>
+          <div className="col-md p-3 my-3" key={work.title}>
             <WorkItem work={work} />
           </div>
         ))}

diff --git a/src/data/works.ts b/src/data/works.ts
@@ -8,7 +8,7 @@ export const worksData: WorkType[] = [
     github: 'https://github.com/piny940/song-list',
   },
   {
-    title: 'Kokosuki Stamp',
+    title: 'スタンプ作成補助',
     description:
       'Youtubeのコメント欄でタイムスタンプを作成するのを補助する拡張機能',
     link: 'https://chrome.google.com/webstore/detail/kokosuki-stamp/pnbpecefaimbeadmmombelidgkkgfeeg?hl=ja',

diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
@@ -1,3 +1,4 @@
+import { MaterialIcon } from '@/components/Common/MaterialIcon'
 import { ThemeToggler } from '@/components/Common/ThemeToggler'
 import { useTheme } from '@/context/ThemeProvider'
 import { TestID } from '@/resources/TestID'
@@ -27,7 +28,53 @@ export const Navbar: React.FC = () => {
         >
           <div>Piny940</div>
         </Link>
-        <ThemeToggler theme={theme} toggleTheme={toggleTheme()} />
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbar-collapse-target"
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div
+          className="collapse navbar-collapse ms-4"
+          id="navbar-collapse-target"
+        >
+          <ul className="navbar-nav w-100">
+            <li className="nav-item">
+              <Link className="nav-link active" href="/skills">
+                Skills
+              </Link>
+            </li>{' '}
+            <li className="nav-item">
+              <Link className="nav-link active" href="/works">
+                Works
+              </Link>
+            </li>
+            <li className="nav-item d-lg-none">
+              <a
+                type="button"
+                onClick={toggleTheme()}
+                className="nav-link d-flex align-items-center"
+              >
+                {theme === 'light' ? (
+                  <>
+                    <MaterialIcon className="me-1" name="light_mode" />
+                    ライトモード
+                  </>
+                ) : (
+                  <>
+                    <MaterialIcon className="me-1" name="dark_mode" />
+                    ダークモード
+                  </>
+                )}
+              </a>
+            </li>
+          </ul>
+          <div className="nav-item d-none d-lg-block">
+            <ThemeToggler theme={theme} toggleTheme={toggleTheme()} />
+          </div>
+        </div>
       </div>
     </nav>
   )

diff --git a/src/pages/skills.tsx b/src/pages/skills.tsx
@@ -0,0 +1,9 @@
+const Skills: React.FC = () => {
+  return (
+    <div className="">
+      <h1>Skills</h1>
+    </div>
+  )
+}
+
+export default Skills
diff --git a/src/pages/works.tsx b/src/pages/works.tsx
@@ -0,0 +1,9 @@
+const Works: React.FC = () => {
+  return (
+    <div className="">
+      <h1>Works</h1>
+    </div>
+  )
+}
+
+export default Works