Skip to content

Commit 7992956

Browse files
shree404shree404
authored
Merge pull request #28 from NepTechTribe/shreesha
Navbar for small devices Added
2 parents 721a0b7 + 576a2ff commit 7992956

File tree

5 files changed

+133
-82
lines changed

5 files changed

+133
-82
lines changed

‎src/Components/landingpage/Navbar.jsx‎

Lines changed: 57 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { useState, useEffect } from 'react';
2-
import fullogo from '../../assets/LandingPage/logo.png';
3-
import { Link } from 'react-router-dom';
4-
import Container from 'react-bootstrap/Container';
1+
import React, { useState, useEffect } from "react";
2+
import fullogo from "../../assets/LandingPage/logo.png";
3+
import { Link } from "react-router-dom";
4+
import Container from "react-bootstrap/Container";
5+
import { List } from "react-bootstrap-icons";
56
const Navbar = () => {
6-
const [sticky, setSticky] = useState(false);
7+
const [sticky, setSticky] = useState(false);
78

8-
99
useEffect(() => {
1010
const handleScroll = () => {
1111
setSticky(window.scrollY > 25);
@@ -15,23 +15,61 @@ const Navbar = () => {
1515
return () => window.removeEventListener("scroll", handleScroll);
1616
}, []);
1717

18-
19-
return (
20-
<nav className={`Navbar ${sticky ? 'sticky' : ''}`}>
18+
return (
19+
<>
20+
<nav className={`Navbar ${sticky ? "sticky" : ""}`}>
2121
<Container>
22-
<div className="Navbar-container">
23-
<img src={fullogo} alt="NepTech Tribe Logo" className="Navbar-logo" />
22+
<div className="Navbar-container">
23+
<img
24+
src={fullogo}
25+
alt="NepTech Tribe Logo"
26+
className="Navbar-logo"
27+
/>
2428
<ul className="Navbar-menu">
25-
<li><Link to="/" className='link-default' >Home</Link></li>
26-
<li><Link to="/about" className='link-default' >About Us</Link></li>
27-
<li><Link to="/blog" className='link-default'>Blogs</Link> </li>
28-
<li><Link to="/events" className='link-default'> Events</Link></li>
29-
<li><Link to="/contact" className='link-default' >Contact Us</Link></li>
29+
<li>
30+
<Link to="/" className="link-default">
31+
Home
32+
</Link>
33+
</li>
34+
<li>
35+
<Link to="/about" className="link-default">
36+
About Us
37+
</Link>
38+
</li>
39+
<li>
40+
<Link to="/blog" className="link-default">
41+
Blogs
42+
</Link>{" "}
43+
</li>
44+
<li>
45+
<Link to="/events" className="link-default">
46+
{" "}
47+
Events
48+
</Link>
49+
</li>
50+
<li>
51+
<Link to="/contact" className="link-default">
52+
Contact Us
53+
</Link>
54+
</li>
3055
</ul>
31-
</div>
56+
</div>
57+
<div className="MobileNav-container">
58+
<div>
59+
<img
60+
src={fullogo}
61+
alt="NepTech Tribe Logo"
62+
className="Navbar-logo"
63+
/>
64+
</div>
65+
<div>
66+
<List className="MobileNav-container__icon" />
67+
</div>
68+
</div>
3269
</Container>
33-
</nav>
34-
);
70+
</nav>
71+
</>
72+
);
3573
};
3674

3775
export default Navbar;

‎src/Styles/App.css‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,26 @@
4040
text-decoration: inherit;
4141
}
4242

43+
.MobileNav-container {
44+
display: none;
45+
}
46+
47+
@media screen and (max-width: 993px) {
48+
.Navbar-container {
49+
display: none;
50+
}
51+
.MobileNav-container {
52+
padding: 1rem 0rem;
53+
display: flex;
54+
flex-direction: row;
55+
justify-content: space-between;
56+
align-items: center;
57+
}
58+
.MobileNav-container__icon {
59+
height: 2rem;
60+
width: 2rem;
61+
}
62+
}
4363
.hero {
4464
min-height: 100vh;
4565
background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(/herobg.png);
@@ -430,35 +450,6 @@
430450
margin-top: -5rem;
431451
}
432452

433-
@media screen and (max-width: 576px) {
434-
.ContactForm-form {
435-
margin-bottom: 3rem;
436-
}
437-
.ContactForm-form-inputcontainer {
438-
display: flex;
439-
flex-direction: column;
440-
gap: 2rem;
441-
}
442-
.ContactForm-form-input {
443-
width: 100%;
444-
}
445-
}
446-
@media screen and (min-width: 576px) and (max-width: 1023px) {
447-
.ContactForm-details {
448-
margin-top: 2rem;
449-
padding: 1.5rem;
450-
display: flex;
451-
flex-direction: row;
452-
gap: 2.5rem;
453-
}
454-
.ContactForm-details__section1 {
455-
gap: 1rem;
456-
}
457-
.ContactForm-details__icon {
458-
height: 2rem;
459-
width: 2rem;
460-
}
461-
}
462453
.Footer {
463454
background-color: #e0e0f2;
464455
margin-top: 4rem;

‎src/Styles/App.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Styles/LandingPage/_Contact.scss‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -116,37 +116,37 @@
116116
}
117117

118118

119-
@media screen and (max-width:576px) {
120-
.ContactForm{
121-
&-form{
122-
margin-bottom: 3rem;
123-
&-inputcontainer{
124-
display: flex;
125-
flex-direction: column;
126-
gap: 2rem;
127-
}
128-
&-input{
129-
width: 100%;
130-
}
131-
}
132-
}
133-
}
119+
// @media screen and (max-width:576px) {
120+
// .ContactForm{
121+
// &-form{
122+
// margin-bottom: 3rem;
123+
// &-inputcontainer{
124+
// display: flex;
125+
// flex-direction: column;
126+
// gap: 2rem;
127+
// }
128+
// &-input{
129+
// width: 100%;
130+
// }
131+
// }
132+
// }
133+
// }
134134

135-
@media screen and (min-width:576px) and (max-width:1023px) {
136-
.ContactForm{
137-
&-details{
138-
margin-top: 2rem;
139-
padding: 1.5rem;
140-
display: flex;
141-
flex-direction: row;
142-
gap: 2.5rem;
143-
&__section1{
144-
gap: 1rem;
145-
}
146-
&__icon{
147-
height: 2rem;
148-
width: 2rem;
149-
}
150-
}
151-
}
152-
}
135+
// @media screen and (min-width:576px) and (max-width:1023px) {
136+
// .ContactForm{
137+
// &-details{
138+
// margin-top: 2rem;
139+
// padding: 1.5rem;
140+
// display: flex;
141+
// flex-direction: row;
142+
// gap: 2.5rem;
143+
// &__section1{
144+
// gap: 1rem;
145+
// }
146+
// &__icon{
147+
// height: 2rem;
148+
// width: 2rem;
149+
// }
150+
// }
151+
// }
152+
// }

‎src/Styles/LandingPage/_Navbar.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,25 @@
3737
font-size: inherit;
3838
text-decoration: inherit;
3939
}
40+
41+
42+
.MobileNav-container{
43+
display: none;
44+
}
45+
46+
@media screen and (max-width:993px){
47+
.Navbar-container{
48+
display: none;
49+
}
50+
.MobileNav-container{
51+
padding: 1rem 0rem;
52+
display: flex;
53+
flex-direction: row;
54+
justify-content: space-between;
55+
align-items: center;
56+
&__icon{
57+
height: 2rem;
58+
width: 2rem;
59+
}
60+
}
61+
}

0 commit comments

Comments
 (0)