Skip to content

Commit 0c8f4cb

Browse files
MehmetBozkirMehmetBozkir
committed
add Navbar&Footer
1 parent 675ba4a commit 0c8f4cb

11 files changed

Lines changed: 272 additions & 13 deletions

File tree

‎app/Join/page.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from "react";
2+
import Navbar from "../../components/Navbar";
23

34
function page() {
4-
return <div>
5-
6-
page
7-
8-
9-
</div>;
5+
return (
6+
<>
7+
<Navbar />
8+
page
9+
</>
10+
);
1011
}
1112

1213
export default page;

‎app/JoinLogin/page.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React from 'react'
22
import { JLDemo } from "../../components/JLDemo";
3+
import Navbar from '../../components/Navbar';
34

45
function page() {
56
return (
6-
<div><JLDemo/></div>
7+
<>
8+
<Navbar/>
9+
<JLDemo/>
10+
</>
711
)
812
}
913

‎app/Menu/page.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { useState } from "react";
1515
import { IoSearch } from "react-icons/io5";
1616
import { BackgroundBeams } from "../../components/ui/background-beams";
1717
import { Demo } from "../../components/Demo"
18+
import Navbar from '../../components/Navbar'
1819

1920
function Page() {
2021
const { inc, dec, count, fishies, fetch } = useStore((state) => state);
@@ -26,6 +27,8 @@ function Page() {
2627
}, []);
2728

2829
return (
30+
<>
31+
<Navbar/>
2932
<div className="bg-neutral-950">
3033
<BackgroundBeams />
3134
<div className="flex justify-center">
@@ -99,6 +102,7 @@ function Page() {
99102

100103
<Demo />
101104
</div>
105+
</>
102106
);
103107
}
104108

‎app/Sign/page.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import React from "react";
2+
import Navbar from "../../components/Navbar";
23

34
function page() {
4-
return <div>sign</div>;
5+
return (
6+
<>
7+
<Navbar />
8+
sign
9+
</>
10+
);
511
}
612

713
export default page;

‎app/layout.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Inter } from "next/font/google";
22
import "./globals.css";
3+
import Footer from '../components/Footer'
4+
import Navbar from "../components/Navbar";
35

46
const inter = Inter({ subsets: ["latin"] });
57

@@ -12,6 +14,7 @@ export default function RootLayout({ children }) {
1214
return (
1315
<html lang="en">
1416
<body className={inter.className}>{children}</body>
17+
<Footer/>
1518
</html>
1619
);
1720
}

‎components/Drawer.jsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { FiAlignJustify } from "react-icons/fi";
5+
import { v4 as uuidv4 } from "uuid";
6+
import axios from "axios";
7+
import { useState, useEffect } from "react";
8+
import Link from "next/link";
9+
10+
function Drawer() {
11+
const [shopdata, setShopData] = useState([]);
12+
13+
useEffect(() => {
14+
const fetchData = async () => {
15+
try {
16+
const response = await axios.get(
17+
`https://fakestoreapi.com/products/categories`
18+
);
19+
setShopData(response.data);
20+
console.log(response);
21+
} catch (error) {
22+
console.log(error);
23+
}
24+
};
25+
setTimeout(fetchData, 0);
26+
}, []);
27+
28+
return (
29+
<div>
30+
<input id="my-drawer" type="checkbox" className="drawer-toggle" />
31+
<div className="drawer-content">
32+
<label htmlFor="my-drawer" className="btn drawer-button text-xl">
33+
<FiAlignJustify />
34+
</label>
35+
</div>
36+
<div className="drawer-side">
37+
<label
38+
htmlFor="my-drawer"
39+
aria-label="close sidebar"
40+
className="drawer-overlay"
41+
></label>
42+
<ul className="menu p-4 w-50 min-h-full bg-base-200 text-base-content">
43+
<div className="divide-y-4 p-5 text-center text-lg divide-primary">
44+
<h1>Categories</h1>
45+
<hr />
46+
</div>
47+
{shopdata.map((product) => (
48+
<div key={uuidv4()}>
49+
<Link href={`/Category/${product}`}>
50+
<div className="btn drawer-button">{product}</div>
51+
</Link>
52+
</div>
53+
))}
54+
</ul>
55+
</div>
56+
</div>
57+
);
58+
}
59+
60+
export default Drawer;

‎components/Footer.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import { FiGithub } from "react-icons/fi";
3+
import { CiLinkedin } from "react-icons/ci";
4+
import { FaMedium } from "react-icons/fa6";
5+
6+
function Footer() {
7+
return (
8+
<footer className="footer items-center p-2 bg-neutral text-neutral-content">
9+
<aside className="items-center grid-flow-col">
10+
<svg
11+
width="36"
12+
height="36"
13+
viewBox="0 0 24 24"
14+
xmlns="http://www.w3.org/2000/svg"
15+
fillRule="evenodd"
16+
clipRule="evenodd"
17+
className="fill-current"
18+
>
19+
<path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
20+
</svg>
21+
<p>Copyright © 2024 - All right reserved</p>
22+
</aside>
23+
<nav className="grid-flow-col gap-4 md:place-self-center md:justify-self-end mt-4">
24+
<a
25+
href="https://www.linkedin.com/in/mehmet-salih-bozk%C4%B1r/"
26+
target="blank"
27+
>
28+
<svg
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="44"
31+
height="44"
32+
viewBox="0 0 24 24"
33+
className="fill-current"
34+
>
35+
<CiLinkedin />
36+
</svg>
37+
</a>
38+
<a href="https://medium.com/@mehmetsalihbozkir" target="blank">
39+
<svg
40+
xmlns="http://www.w3.org/2000/svg"
41+
width="44"
42+
height="44"
43+
viewBox="0 0 24 24"
44+
className="fill-current"
45+
>
46+
<FaMedium />
47+
</svg>
48+
</a>
49+
<a href="https://github.com/MehmetBozkir" target="_blank">
50+
<svg
51+
xmlns="http://www.w3.org/2000/svg"
52+
width="44"
53+
height="44"
54+
viewBox="0 0 24 24"
55+
className="fill-current"
56+
>
57+
<FiGithub />
58+
</svg>
59+
</a>
60+
</nav>
61+
</footer>
62+
);
63+
}
64+
65+
export default Footer;

‎components/Navbar.jsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import Drawer from "./Drawer";
4+
import { FaHome } from "react-icons/fa";
5+
6+
function Navbar() {
7+
return (
8+
<div className="navbar bg-current border-b-4">
9+
<div className="flex-1">
10+
<button>
11+
<div className="indicator ml-8">
12+
<Link
13+
href={"/"}
14+
className="badge indicator-item text-black text-2xl ml-24"
15+
>
16+
{" "}
17+
<FaHome />
18+
</Link>
19+
</div>
20+
</button>
21+
</div>
22+
<div className="flex items-center gap-3 mr-80"></div>
23+
<div className="flex-none">
24+
<div className="dropdown dropdown-end">
25+
<div
26+
tabIndex={0}
27+
role="button"
28+
className="btn btn-ghost text-white btn-circle"
29+
>
30+
<div className="indicator">
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
className="h-5 w-5"
34+
fill="none"
35+
viewBox="0 0 24 24"
36+
stroke="currentColor"
37+
>
38+
<path
39+
strokeLinecap="round"
40+
strokeLinejoin="round"
41+
strokeWidth="2"
42+
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
43+
/>
44+
</svg>
45+
<span className="badge badge-sm indicator-item text-white bg-red-600">
46+
8
47+
</span>
48+
</div>
49+
</div>
50+
<div
51+
tabIndex={0}
52+
className="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow"
53+
>
54+
<div className="card-body">
55+
<span className="font-bold text-lg ">8 Items</span>
56+
<span className="text-info">Subtotal: $999</span>
57+
<div className="card-actions">
58+
<Link href="/Card" className="btn btn-primary btn-block">
59+
View cart
60+
</Link>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
);
68+
}
69+
70+
export default Navbar;

‎package-lock.json‎

Lines changed: 45 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@types/node": "20.11.25",
3131
"@types/react": "18.2.64",
3232
"autoprefixer": "^10.0.1",
33+
"daisyui": "^4.7.3",
3334
"eslint": "^8",
3435
"eslint-config-next": "14.1.3",
3536
"postcss": "^8",

0 commit comments

Comments
 (0)