-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHeader.js
More file actions
114 lines (107 loc) · 3.49 KB
/
Header.js
File metadata and controls
114 lines (107 loc) · 3.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { useState } from "react";
import { Link } from "react-router-dom";
import headLogo from "../assets/head-logo.png";
import { useLocation } from "react-router-dom";
const Header = () => {
const location = useLocation();
const [isMenuVisible, setIsMenuVisible] = useState(false);
return (
<header className="bg-blue-500 flex justify-between items-center py-2 px-4 border-b border-blue-700">
{/* Logo and Title */}
<div className="flex items-center gap-4">
<Link to="/">
<img src={headLogo} alt="Logo" className="w-10 h-10" />
</Link>
{location.pathname === "/" ? (
<h1 className="text-white font-bold text-base md:text-lg">Tech Plus Coding</h1>
) : (
<Link
to="/"
className="text-white font-bold text-base md:text-lg hover:underline"
>
Home
</Link>
)}
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex gap-4 items-center">
{/* <input
type="text"
placeholder="Search eBooks..."
className="px-10 py-1 text-sm rounded border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
/> */}
<Link
to="/categories"
className="text-white font-medium text-sm md:text-base hover:underline"
>
{/* Categories
</Link>
<Link
to="/source"
className="text-white font-medium text-sm md:text-base hover:underline"
>
Source Code
</Link>
<Link
to="/ebook"
className="text-white font-medium text-sm md:text-base hover:underline" */}
E-Book
</Link>
<Link
to="/contact"
className="text-white font-medium text-sm md:text-base hover:underline"
>
Contact
</Link>
</nav>
{/* Mobile Menu Button */}
<button
onClick={() => setIsMenuVisible(!isMenuVisible)}
className="md:hidden text-white font-bold text-sm"
>
Menu
</button>
{/* Mobile Navigation */}
{isMenuVisible && (
<div className="absolute right-4 top-16 bg-blue-500 shadow-lg rounded-md z-50">
<nav className="flex flex-col gap-2 p-4">
<input
type="text"
placeholder="Search eBooks..."
className="px-2 py-1 text-sm rounded border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-400 mb-2"
/>
<Link
to="/categories"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
Categories
</Link>
<Link
to="/source"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
Source Code
</Link>
<Link
to="/ebook"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
E-Book
</Link>
<Link
to="/contact"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
Contact
</Link>
</nav>
</div>
)}
</header>
);
};
export default Header;