Skip to content

Commit 4e0205d

Browse files
Luson045Luson045
committed
fixed z index of scroll to top and improved navbar responsiveness
1 parent 42d2113 commit 4e0205d

File tree

9 files changed

+327
-943
lines changed

9 files changed

+327
-943
lines changed

‎client/package-lock.json

+56-816
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/modules/OPD/Home.jsx

-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33
import { motion } from 'framer-motion';
44
import { Clipboard, PhoneCall, Hospital } from 'lucide-react';
5-
import Navbar from '../common/Navbar';
65
import StaticLineChart from './Chart';
76
import Review from './Review';
87
import TableComponent from './TableComponent';
@@ -76,8 +75,6 @@ function Home() {
7675

7776
<>
7877
<div className="min-h-screen bg-gradient-to-b from-blue-100 to-blue-50">
79-
<Navbar />
80-
8178
<header className="relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden">
8279
<div className="absolute inset-0">
8380
<svg className="absolute bottom-0 left-0 right-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

‎client/src/modules/OPD/HospitalPanal.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useContext, useEffect, useState } from 'react';
22
import axios from 'axios';
33
import { UserContext } from '../common/userContext';
4-
import Navbar from '../common/Navbar';
54
import '../../styles/HospitalPanal.css';
65

76
const HospitalAppointments = () => {

‎client/src/modules/OPD/Registration.jsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import axios from 'axios';
4-
import Navbar from '../common/Navbar';
54
import '../../styles/OPD.css';
65
// import pincodes from 'indian-pincodes';
76
import {pininfo} from 'indian_address';
@@ -145,7 +144,6 @@ function OPDRegistrationForm() {
145144

146145
return (
147146
<>
148-
<Navbar />
149147
<section className="form-container">
150148
<h2>OPD Registration</h2>
151149
<form onSubmit={handleSubmit} className="opd-registration-form">

‎client/src/modules/common/Footer.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const Footer = () => {
101101
</div>
102102

103103
{showScrollTop && (
104-
<button onClick={scrollToTop} className="fixed bottom-6 right-6 bg-blue-600 hover:bg-blue-500 text-white p-3 md:p-4 rounded-full">
104+
<button onClick={scrollToTop} className="fixed bottom-6 right-6 bg-blue-600 hover:bg-blue-500 text-white p-3 md:p-4 rounded-full z-[1000]">
105105
<FaArrowUp size={24} />
106106
</button>
107107
)}

‎client/src/modules/common/Navbar.jsx

+103-117
Large diffs are not rendered by default.

‎client/src/modules/common/Profile.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { useContext, useEffect, useState } from 'react';
22
import { UserContext } from './userContext';
3-
import Navbar from './Navbar';
43
import '../../styles/UserProfile.css';
54

65
const ProfilePage = () => {
7-
const { user, isAuthenticated, handleLogout } = useContext(UserContext);
6+
const {isAuthenticated } = useContext(UserContext);
87
const [userData, setUserData] = useState(null);
98

109
useEffect(() => {

‎client/src/modules/common/Sidebar.jsx

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import React, { useContext, useState } from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
import '../../styles/Navbar.css';
4+
import { UserContext } from './userContext';
5+
import { FaHome, FaHospital, FaUser, FaUserPlus, FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
6+
import { IoClose, IoMenu } from 'react-icons/io5';
7+
import { MdLogin, MdOutlineLocalHospital } from 'react-icons/md';
8+
import { AiOutlineInfoCircle } from 'react-icons/ai';
9+
10+
const Navbar = () => {
11+
const { user, isAuthenticated = true, handleLogout } = useContext(UserContext);
12+
const [isSidebarOpen, setSidebarOpen] = useState(false);
13+
14+
const toggleSidebar = () => {
15+
setSidebarOpen((prev) => !prev);
16+
};
17+
18+
return (
19+
<>
20+
{/* Logo positioned at the top left corner */}
21+
<div className="fixed top-0 left-0 z-[101] m-5">
22+
<NavLink to="/">
23+
<img className="h-12 md:h-16" alt="medi-connects logo" src="logo.png" />
24+
</NavLink>
25+
</div>
26+
27+
{/* Sidebar toggle button positioned at the right */}
28+
<div className="fixed top-5 right-5 z-[102] text-4xl">
29+
{isSidebarOpen ? (
30+
<IoClose className="cursor-pointer" onClick={toggleSidebar} /> // Close icon when sidebar is open
31+
) : (
32+
<IoMenu className="cursor-pointer" onClick={toggleSidebar} /> // Menu icon when sidebar is closed
33+
)}
34+
</div>
35+
36+
{/* Sidebar */}
37+
<div
38+
className={`fixed top-0 right-0 z-[100] h-full w-[75vw] sm:w-[60vw] md:w-[40vw] bg-[linear-gradient(90deg,_#667eea_0%,_#764ba2_100%)] text-white transform transition-transform duration-300 ${
39+
isSidebarOpen ? 'translate-x-0' : 'translate-x-full'
40+
}`}
41+
>
42+
{/* Sidebar content */}
43+
<div className="p-8 pt-20 space-y-8 text-lg font-medium">
44+
{/* Home link */}
45+
<NavLink
46+
className={({ isActive }) =>
47+
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-4 text-xl`
48+
}
49+
to="/"
50+
onClick={toggleSidebar} // Close sidebar after clicking the link
51+
>
52+
<FaHome size={24} /> <span>Home</span>
53+
</NavLink>
54+
55+
{/* About link */}
56+
<NavLink
57+
className={({ isActive }) =>
58+
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-4 text-xl`
59+
}
60+
to="/about"
61+
onClick={toggleSidebar}
62+
>
63+
<AiOutlineInfoCircle size={24} /> <span>About</span>
64+
</NavLink>
65+
66+
{/* Conditional rendering for authenticated users */}
67+
{isAuthenticated ? (
68+
<>
69+
<NavLink
70+
className={({ isActive }) =>
71+
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-4 text-xl`
72+
}
73+
to="/profile"
74+
onClick={toggleSidebar}
75+
>
76+
<FaUser size={24} /> <span>Profile</span>
77+
</NavLink>
78+
79+
{/* Hospitals link for 'user' role */}
80+
{user && user?.role === 'user' && (
81+
<NavLink
82+
className={({ isActive }) =>
83+
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-4 text-xl`
84+
}
85+
to="/hospitals"
86+
onClick={toggleSidebar}
87+
>
88+
<FaHospital size={24} /> <span>Hospitals</span>
89+
</NavLink>
90+
)}
91+
92+
{/* OPD Panel link for 'hospital' role */}
93+
{user && user?.role === 'hospital' && (
94+
<NavLink
95+
className={({ isActive }) =>
96+
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-4 text-xl`
97+
}
98+
to="/panel"
99+
onClick={toggleSidebar}
100+
>
101+
<MdOutlineLocalHospital size={24} /> <span>OPD Panel</span>
102+
</NavLink>
103+
)}
104+
</>
105+
) : (
106+
<NavLink
107+
className={({ isActive }) =>
108+
`${isActive ? 'border-b border-white ' : ''} flex items-center gap-4 text-xl`
109+
}
110+
to="/registerOPD"
111+
onClick={toggleSidebar}
112+
>
113+
<MdOutlineLocalHospital size={24} /> <span>Instant OPD</span>
114+
</NavLink>
115+
)}
116+
117+
{/* Authentication buttons */}
118+
{isAuthenticated ? (
119+
<button
120+
className="bg-white text-black px-5 py-2 rounded-lg font-bold w-full text-left text-lg"
121+
onClick={handleLogout}
122+
>
123+
Log Out
124+
</button>
125+
) : (
126+
<div className="flex flex-col gap-4">
127+
<NavLink
128+
className="bg-white text-black px-5 py-2 rounded-lg font-bold flex items-center gap-4 text-lg"
129+
to="/login"
130+
onClick={toggleSidebar}
131+
>
132+
<MdLogin size={24} /> <span>Login</span>
133+
</NavLink>
134+
<NavLink
135+
className="bg-white text-black px-5 py-2 rounded-lg font-bold flex items-center gap-4 text-lg"
136+
to="/register"
137+
onClick={toggleSidebar}
138+
>
139+
<FaUserPlus size={24} /> <span>Register</span>
140+
</NavLink>
141+
</div>
142+
)}
143+
</div>
144+
145+
{/* Footer */}
146+
<div className="absolute bottom-0 w-full bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white text-center">
147+
<div className="flex justify-center gap-6 mb-2">
148+
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
149+
<FaFacebook size={30} />
150+
</a>
151+
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
152+
<FaTwitter size={30} />
153+
</a>
154+
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
155+
<FaInstagram size={30} />
156+
</a>
157+
</div>
158+
<p className="text-sm">&copy; 2024 MediConnect. All rights reserved.</p>
159+
</div>
160+
</div>
161+
</>
162+
);
163+
};
164+
165+
export default Navbar;

‎client/src/styles/Home.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ body {
66
color: #333;
77
margin: 0;
88
padding: 0;
9-
background: linear-gradient(90deg, #fbd8e5, #fff);
9+
background: linear-gradient(to bottom, #dbeafe, #ebf5ff);
1010
}
1111
.bg-image-section {
1212
background-image: url('../../public/doctor.png');

0 commit comments

Comments
 (0)