Skip to content

Commit 0b43f52

Browse files
RagoTheDevRagoTheDev
committed
added login and responsiveness
1 parent 6201abd commit 0b43f52

File tree

7 files changed

+236
-79
lines changed

7 files changed

+236
-79
lines changed

‎src/Assets/Images/barmenu.png‎

4.65 KB
Loading

‎src/Assets/Images/icons8-close-30.png‎

258 Bytes
Loading

‎src/Components/Dashboard/Components/Cards/Cards.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,37 @@
2828
font-size: 40px;
2929
color: white;
3030
font-family: sans-serif;
31+
}
32+
33+
@media screen and (max-width: 1100px) {
34+
35+
.cards-container {
36+
display: grid;
37+
grid-template-columns: repeat(2, 1fr);
38+
gap: 1rem;
39+
}
40+
41+
.card {
42+
width: auto;
43+
height: 170px;
44+
}
45+
46+
.card:nth-child(3) {
47+
grid-column: span 2;
48+
margin-top: 10px;
49+
width: 50%;
50+
}
51+
52+
.card h2 {
53+
font-size: 18px;
54+
margin: 1.8rem 0 0 1rem;
55+
}
56+
57+
.card p {
58+
margin: 1rem 1.2rem 0 0;
59+
float: right;
60+
font-size: 35px;
61+
color: white;
62+
font-family: sans-serif;
63+
}
3164
}

‎src/Components/SideNav/SideNav.css‎

Lines changed: 114 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,149 @@
1-
.side-nav {
2-
width: 18rem;
3-
height: 90%;
4-
display: flex;
5-
flex-direction: column;
6-
background: rgb(103,23,205);
7-
background: linear-gradient(-10deg, rgba(103,23,205,1) 35%, rgba(40,113,250,1) 100%);
1+
.menu-btn {
2+
display: none;
3+
position: absolute;
4+
top: 20px;
5+
left: 20px;
6+
cursor: pointer;
7+
}
8+
9+
.menu-btn img {
10+
height: 2.8rem;
11+
}
12+
13+
.close-btn {
14+
display: none;
15+
cursor: pointer;
16+
}
17+
18+
.close-btn img {
19+
height: 1.8rem;
20+
margin: 1.8rem ;
821
}
922

1023
.sidebar--image {
11-
width: 100%;
1224
display: flex;
13-
flex-direction: column;
1425
align-items: center;
15-
margin-top: 4.5rem;
26+
justify-content: space-between;
27+
}
28+
.side-nav {
29+
width: 18rem;
30+
height: 95dvh;
31+
margin-top: 1rem;
32+
display: flex;
33+
flex-direction: column;
34+
background: rgb(103, 23, 205);
35+
background: linear-gradient(
36+
-10deg,
37+
rgba(103, 23, 205, 1) 35%,
38+
rgba(40, 113, 250, 1) 100%
39+
);
40+
transition: transform 0.3s ease-in-out;
41+
border-radius: 18px;
42+
}
43+
44+
.side-nav .show {
45+
width: 100dvw;
46+
height: 100dvh;
47+
backdrop-filter: blur(3px);
48+
}
49+
.sidebar--image {
50+
width: 100%;
51+
display: flex;
52+
flex-direction: column;
53+
align-items: center;
54+
margin-top: 3rem;
1655
}
1756

1857
.sidebar--image img {
19-
width: 200px;
58+
width: 200px;
2059
}
2160

2261
.sidebar--image h2 {
23-
color: white;
24-
font-family: poppins;
25-
margin-top: .5rem;
62+
color: white;
63+
font-family: poppins;
64+
margin-top: 0.5rem;
2665
}
2766

2867
.side-menu {
29-
width: 100%;
30-
margin-top: 3rem;
68+
width: 100%;
69+
margin-top: 2rem;
3170

32-
display: flex;
33-
flex-direction: column;
34-
align-items: center;
35-
justify-content: center;
36-
gap: 1.5rem;
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
justify-content: center;
75+
gap: 1.5rem;
3776
}
3877

3978
.menu-item {
40-
width: 98%;
79+
width: 98%;
4180

42-
display: flex;
43-
justify-content: center;
44-
border-radius: 10px;
45-
cursor: pointer;
81+
display: flex;
82+
justify-content: center;
83+
border-radius: 10px;
84+
cursor: pointer;
4685
}
4786

4887
.menu-item:hover {
49-
background: rgb(10, 112, 207);
88+
background: rgb(10, 112, 207);
5089
}
5190

5291
.menu-item h4 {
53-
color: white;
54-
font-family: sans-serif;
55-
font-weight: 500;
92+
color: white;
93+
font-family: sans-serif;
94+
font-weight: 500;
5695
}
5796

5897
.active {
59-
width: 90%;
60-
background: rgb(10, 112, 207);
61-
border-radius: 8px;
98+
width: 90%;
99+
background: rgb(10, 112, 207);
100+
border-radius: 8px;
62101
}
63102

64103
.inactive {
65-
width: 90%;
104+
width: 90%;
66105
}
67106

68107
.addpatient-container {
69-
width: 100%;
70-
margin-top: 4.5rem;
108+
width: 100%;
109+
margin-top: 1.7rem;
71110

72-
display: flex;
73-
justify-content: center;
74-
}
111+
display: flex;
112+
justify-content: center;
113+
}
114+
115+
@media (max-width: 1100px) {
116+
117+
.side-nav {
118+
transform: translateX(-100%); /* Initially Hidden */
119+
width: 250px;
120+
z-index: 101;
121+
}
122+
.side-nav.show {
123+
transform: translateX(0);
124+
}
125+
.close-btn {
126+
display: flex;
127+
justify-content: end;
128+
}
129+
.menu-btn {
130+
display: block;
131+
}
132+
133+
.overlay-bg {
134+
backdrop-filter: blur(3px);
135+
width: 100dvw;
136+
height: 100dvh;
137+
}
138+
139+
.overlay {
140+
position: fixed;
141+
top: 0;
142+
left: 0;
143+
width: 100%;
144+
height: 100%;
145+
z-index: 100;
146+
display: block;
147+
148+
}
149+
}

‎src/Components/SideNav/SideNav.jsx‎

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
1-
import React from 'react'
1+
import { useState } from "react";
2+
import { NavLink } from "react-router-dom";
23
import './SideNav.css'
3-
import profilepic from '../../Assets/Images/profilepic.png'
4-
import { NavLink } from 'react-router-dom'
4+
import profilepic from "../../Assets/Images/profilepic.png";
5+
import close from "../../Assets/Images/icons8-close-30.png";
6+
import menu from "../../Assets/Images/barmenu.png";
57
import AddPatient from './components/AddPatient'
68

7-
function SideNav() {
9+
10+
export default function SideNav() {
11+
const [isOpen, setIsOpen] = useState(false);
12+
813
return (
914
<>
10-
<div className="side-nav">
11-
<div className='sidebar--image'>
12-
<img src={profilepic} alt='profile-pic' />
13-
<h2>Dr Maxi Gamma</h2>
14-
</div>
15-
<div className="side-menu">
16-
<NavLink to='/dashboard' className={({ isActive }) => (isActive ? "active" : "inactive")}>
17-
<div className='menu-item'>
18-
<h4>Dashboard</h4>
19-
</div>
20-
</NavLink>
21-
<NavLink to='/appointments' className={({ isActive }) => (isActive ? "active" : "inactive")}>
22-
<div className='menu-item'>
23-
<h4>Appointents</h4>
24-
</div>
25-
</NavLink>
26-
<NavLink to='/patients' className={({ isActive }) => (isActive ? "active" : "inactive")}>
27-
<div className='menu-item'>
28-
<h4>Patients</h4>
29-
</div>
30-
</NavLink>
15+
{/* Mobile Menu Button (Only Visible on Small Screens) */}
16+
<div className="menu-btn" onClick={() => setIsOpen(true)}>
17+
<img src={menu} alt="Open Menu" />
3118
</div>
32-
<div className="addpatient-container">
33-
<AddPatient />
19+
20+
21+
{/* Sidebar (Common for Both Desktop & Mobile) */}
22+
<div className={`side-nav ${isOpen ? "show" : ""}`}>
23+
<div className="close-btn" onClick={() => setIsOpen(false)}>
24+
<img src={close} alt="Close" />
25+
</div>
26+
<div className="sidebar--image">
27+
<img src={profilepic} alt="profile-pic" className="profile-pic" />
28+
<h2>Dr Maxi Gamma</h2>
29+
</div>
30+
31+
<div className="side-menu">
32+
<NavLink to='/dashboard' className={({ isActive }) => (isActive ? "active" : "inactive")}>
33+
<div className='menu-item'>
34+
<h4>Dashboard</h4>
35+
</div>
36+
</NavLink>
37+
<NavLink to='/appointments' className={({ isActive }) => (isActive ? "active" : "inactive")}>
38+
<div className='menu-item'>
39+
<h4>Appointents</h4>
40+
</div>
41+
</NavLink>
42+
<NavLink to='/patients' className={({ isActive }) => (isActive ? "active" : "inactive")}>
43+
<div className='menu-item'>
44+
<h4>Patients</h4>
45+
</div>
46+
</NavLink>
47+
</div>
48+
<div className="addpatient-container">
49+
<AddPatient />
50+
</div>
3451
</div>
35-
</div>
52+
53+
54+
{isOpen && <div className="overlay" onClick={() => setIsOpen(false)}></div>}
55+
3656
</>
37-
)
57+
);
3858
}
39-
40-
export default SideNav

0 commit comments

Comments
 (0)