Skip to content

Commit 60a288c

Browse files
author
Blessing U
committed
chore: Made the side nav responsive
1 parent 08c0a82 commit 60a288c

2 files changed

Lines changed: 215 additions & 45 deletions

File tree

‎dekstop_frontend/src/Components/SideNav/SideNav.jsx‎

Lines changed: 109 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
/* eslint-disable jsx-a11y/no-static-element-interactions */
2+
/* eslint-disable jsx-a11y/click-events-have-key-events */
13
/* eslint-disable react/button-has-type */
24
import React, { useState, useContext } from 'react';
35
import { RiArrowDownSLine, RiAddCircleLine } from 'react-icons/ri';
6+
import { FaBars, FaTimes } from 'react-icons/fa';
47
import { Link } from 'react-router-dom';
58
import logo from './assets/logo.svg';
69
import Group from './assets/Group.svg';
@@ -13,57 +16,120 @@ function Sidenav() {
1316
const [isOpen, setIsOpen] = useState(false);
1417
const toggling = () => setIsOpen(!isOpen);
1518

19+
const [click, setClick] = useState(false);
20+
21+
const handleClick = () => setClick(!click);
22+
1623
return (
1724
<div>
1825
<section className={styles.main}>
19-
<div className={styles.sidenav}>
20-
<Link to="/">
21-
<img src={logo} alt="" className={styles.logo} />
22-
</Link>
23-
<div style={{ display: 'flex', flexDirection: 'column' }}>
24-
<div className={styles.nav}>
25-
<img src={Group} alt="" className={styles.navItem} />
26+
<div className={styles.hamburger} onClick={handleClick}>
27+
{click ? (
28+
<FaTimes size={25} style={{ color: '#000000' }} />
29+
) : (
30+
<FaBars size={25} style={{ color: '#000000' }} />
31+
)}
32+
</div>
33+
34+
{click ? (
35+
<div className={styles.sidenav}>
36+
<Link to="/">
37+
<img src={logo} alt="" className={styles.logo} />
38+
</Link>
39+
<div style={{ display: 'flex', flexDirection: 'column' }}>
40+
<div className={styles.nav}>
41+
<img src={Group} alt="" className={styles.navItem} />
2642

27-
<p className={styles.navItem}> Servers List</p>
43+
<p className={styles.navItem}> Servers List</p>
2844

29-
<div>
30-
<RiArrowDownSLine
31-
style={{ cursor: 'pointer' }}
32-
onClick={toggling}
33-
/>
45+
<div>
46+
<RiArrowDownSLine
47+
style={{ cursor: 'pointer' }}
48+
onClick={toggling}
49+
/>
50+
</div>
3451
</div>
35-
</div>
3652

37-
{isOpen && (
38-
<div>
39-
<ul className={styles.dropDown}>
40-
{servers.map((server) => (
41-
<Link
42-
key={server.id}
43-
to={`/server/${server.id}`}
44-
style={{ textDecoration: 'none' }}
45-
>
46-
<li className={styles.listItem}>{server.name}</li>
47-
</Link>
48-
))}
49-
</ul>
53+
{isOpen && (
54+
<div>
55+
<ul className={styles.dropDown}>
56+
{servers.map((server) => (
57+
<Link
58+
key={server.id}
59+
to={`/server/${server.id}`}
60+
style={{ textDecoration: 'none' }}
61+
>
62+
<li className={styles.listItem}>{server.name}</li>
63+
</Link>
64+
))}
65+
</ul>
66+
</div>
67+
)}
68+
</div>{' '}
69+
<Link
70+
to="/add-server"
71+
style={{ color: 'white', textDecoration: 'none' }}
72+
>
73+
<button className={styles.btn}>
74+
Add Server
75+
<RiAddCircleLine style={{ marginLeft: '20px' }} />
76+
</button>
77+
</Link>
78+
<Link to="/settings" style={{ textDecoration: 'none' }}>
79+
{' '}
80+
<p className={styles.settings}>Settings</p>{' '}
81+
</Link>
82+
</div>
83+
) : (
84+
<div className={styles.sidenav2}>
85+
<Link to="/">
86+
<img src={logo} alt="" className={styles.logo2} />
87+
</Link>
88+
<div style={{ display: 'flex', flexDirection: 'column' }}>
89+
<div className={styles.nav2}>
90+
<img src={Group} alt="" className={styles.navItem2} />
91+
92+
<p className={styles.navItem2}> Servers List</p>
93+
94+
<div>
95+
<RiArrowDownSLine
96+
style={{ cursor: 'pointer' }}
97+
onClick={toggling}
98+
/>
99+
</div>
50100
</div>
51-
)}
52-
</div>{' '}
53-
<Link
54-
to="/add-server"
55-
style={{ color: 'white', textDecoration: 'none' }}
56-
>
57-
<button className={styles.btn}>
58-
Add Server
59-
<RiAddCircleLine style={{ marginLeft: '20px' }} />
60-
</button>
61-
</Link>
62-
<Link to="/settings" style={{ textDecoration: 'none' }}>
63-
{' '}
64-
<p className={styles.settings}>Settings</p>{' '}
65-
</Link>
66-
</div>
101+
102+
{isOpen && (
103+
<div>
104+
<ul className={styles.dropDown2}>
105+
{servers.map((server) => (
106+
<Link
107+
key={server.id}
108+
to={`/server/${server.id}`}
109+
style={{ textDecoration: 'none' }}
110+
>
111+
<li className={styles.listItem2}>{server.name}</li>
112+
</Link>
113+
))}
114+
</ul>
115+
</div>
116+
)}
117+
</div>{' '}
118+
<Link
119+
to="/add-server"
120+
style={{ color: 'white', textDecoration: 'none' }}
121+
>
122+
<button className={styles.btn2}>
123+
Add Server
124+
<RiAddCircleLine style={{ marginLeft: '20px' }} />
125+
</button>
126+
</Link>
127+
<Link to="/settings" style={{ textDecoration: 'none' }}>
128+
{' '}
129+
<p className={styles.settings2}>Settings</p>{' '}
130+
</Link>
131+
</div>
132+
)}
67133
</section>
68134
</div>
69135
);

‎dekstop_frontend/src/Components/SideNav/SideNav.module.css‎

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,30 @@
11
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
22

33
@media (max-width: 767px) {
4-
.sidenav {
4+
.sidenav2 {
5+
display: none;
6+
}
7+
}
8+
@media (min-width: 767px) {
9+
.hamburger {
510
display: none !important;
611
}
12+
.sidenav2 {
13+
height: 1034px;
14+
width: 228px;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: flex-start;
18+
background-color: rgba(237, 237, 237, 0.48);
19+
border-radius: 5px;
20+
padding-top: 50px;
21+
position: fixed;
22+
}
23+
}
24+
25+
.hamburger {
26+
padding: 10px;
27+
cursor: pointer;
728
}
829

930
body,
@@ -24,7 +45,7 @@ section.main div.sidenav {
2445
display: flex;
2546
flex-direction: column;
2647
align-items: flex-start;
27-
background-color: rgba(237, 237, 237, 0.48);
48+
background-color: rgba(237, 237, 237);
2849
border-radius: 5px;
2950
padding-top: 50px;
3051
position: fixed;
@@ -35,13 +56,25 @@ section.main div.sidenav img.logo {
3556
width: 150px;
3657
}
3758

59+
section.main div.sidenav2 img.logo2 {
60+
margin-left: 30px;
61+
width: 150px;
62+
}
63+
3864
section.main div.sidenav div.nav {
3965
display: flex;
4066
justify-content: center;
4167
align-items: center;
4268
padding-top: 20px;
4369
}
4470

71+
section.main div.sidenav2 div.nav2 {
72+
display: flex;
73+
justify-content: center;
74+
align-items: center;
75+
padding-top: 20px;
76+
}
77+
4578
section.main div.sidenav div.nav .navItem {
4679
padding-right: 20px;
4780
font-weight: 600;
@@ -50,10 +83,22 @@ section.main div.sidenav div.nav .navItem {
5083
color: #202020;
5184
}
5285

86+
section.main div.sidenav2 div.nav2 .navItem2 {
87+
padding-right: 20px;
88+
font-weight: 600;
89+
font-size: 16px;
90+
line-height: 21.86px;
91+
color: #202020;
92+
}
93+
5394
section.main div.sidenav div.nav img {
5495
margin-left: 30px;
5596
}
5697

98+
section.main div.sidenav2 div.nav2 img {
99+
margin-left: 30px;
100+
}
101+
57102
.listItem {
58103
padding: 10px;
59104
cursor: pointer;
@@ -62,17 +107,35 @@ section.main div.sidenav div.nav img {
62107
line-height: 21.86px;
63108
color: rgba(32, 32, 32, 0.64);
64109
}
110+
.listItem2 {
111+
padding: 10px;
112+
cursor: pointer;
113+
font-weight: 500;
114+
font-size: 16px;
115+
line-height: 21.86px;
116+
color: rgba(32, 32, 32, 0.64);
117+
}
65118

66119
.listItem:hover {
67120
background-color: #ededed;
68121
color: #102a63;
69122
}
70123

124+
.listItem2:hover {
125+
background-color: #ededed;
126+
color: #102a63;
127+
}
128+
71129
.dropDown {
72130
margin-top: 0;
73131
padding-top: 0;
74132
}
75133

134+
.dropDown2 {
135+
margin-top: 0;
136+
padding-top: 0;
137+
}
138+
76139
section.main div.sidenav button.btn {
77140
background-color: #102a63;
78141
color: white;
@@ -89,6 +152,22 @@ section.main div.sidenav button.btn {
89152
margin-left: 20px;
90153
}
91154

155+
section.main div.sidenav2 button.btn2 {
156+
background-color: #102a63;
157+
color: white;
158+
border-radius: 5px;
159+
border: 2px;
160+
cursor: pointer;
161+
display: flex;
162+
align-items: center;
163+
padding: 10px 35px;
164+
/* margin-top: 20px; */
165+
font-weight: 500;
166+
font-size: 14px;
167+
line-height: 16px;
168+
margin-left: 20px;
169+
}
170+
92171
.btn a {
93172
color: #fff !important;
94173
font-family: 'Manrope';
@@ -97,10 +176,23 @@ section.main div.sidenav button.btn {
97176
font-size: 14px;
98177
line-height: 16px;
99178
}
179+
180+
.btn2 a {
181+
color: #fff !important;
182+
font-family: 'Manrope';
183+
font-style: normal;
184+
font-weight: 600;
185+
font-size: 14px;
186+
line-height: 16px;
187+
}
100188
.btn svg {
101189
color: #fff !important;
102190
}
103191

192+
.btn2 svg {
193+
color: #fff !important;
194+
}
195+
104196
section.main div.sidenav p.settings {
105197
font-size: 16px;
106198
color: #202020;
@@ -109,6 +201,18 @@ section.main div.sidenav p.settings {
109201
margin-left: 70px;
110202
}
111203

204+
section.main div.sidenav2 p.settings2 {
205+
font-size: 16px;
206+
color: #202020;
207+
font-weight: 600;
208+
line-height: 21.86px;
209+
margin-left: 70px;
210+
}
211+
112212
.listItem {
113213
list-style: none;
114214
}
215+
216+
.listItem2 {
217+
list-style: none;
218+
}

0 commit comments

Comments
 (0)