Skip to content

Commit

Permalink
Merge pull request #28 from NepTechTribe/shreesha
Browse files Browse the repository at this point in the history 
Navbar for small devices Added
  • Loading branch information
@shree404
shree404 authored Oct 11, 2024
2 parents 721a0b7 + 576a2ff commit 7992956
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 82 deletions.
76 changes: 57 additions & 19 deletions src/Components/landingpage/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react';
import fullogo from '../../assets/LandingPage/logo.png';
import { Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import React, { useState, useEffect } from "react";
import fullogo from "../../assets/LandingPage/logo.png";
import { Link } from "react-router-dom";
import Container from "react-bootstrap/Container";
import { List } from "react-bootstrap-icons";
const Navbar = () => {
const [sticky, setSticky] = useState(false);
const [sticky, setSticky] = useState(false);


useEffect(() => {
const handleScroll = () => {
setSticky(window.scrollY > 25);
Expand All @@ -15,23 +15,61 @@ const Navbar = () => {
return () => window.removeEventListener("scroll", handleScroll);
}, []);


return (
<nav className={`Navbar ${sticky ? 'sticky' : ''}`}>
return (
<>
<nav className={`Navbar ${sticky ? "sticky" : ""}`}>
<Container>
<div className="Navbar-container">
<img src={fullogo} alt="NepTech Tribe Logo" className="Navbar-logo" />
<div className="Navbar-container">
<img
src={fullogo}
alt="NepTech Tribe Logo"
className="Navbar-logo"
/>
<ul className="Navbar-menu">
<li><Link to="/" className='link-default' >Home</Link></li>
<li><Link to="/about" className='link-default' >About Us</Link></li>
<li><Link to="/blog" className='link-default'>Blogs</Link> </li>
<li><Link to="/events" className='link-default'> Events</Link></li>
<li><Link to="/contact" className='link-default' >Contact Us</Link></li>
<li>
<Link to="/" className="link-default">
Home
</Link>
</li>
<li>
<Link to="/about" className="link-default">
About Us
</Link>
</li>
<li>
<Link to="/blog" className="link-default">
Blogs
</Link>{" "}
</li>
<li>
<Link to="/events" className="link-default">
{" "}
Events
</Link>
</li>
<li>
<Link to="/contact" className="link-default">
Contact Us
</Link>
</li>
</ul>
</div>
</div>
<div className="MobileNav-container">
<div>
<img
src={fullogo}
alt="NepTech Tribe Logo"
className="Navbar-logo"
/>
</div>
<div>
<List className="MobileNav-container__icon" />
</div>
</div>
</Container>
</nav>
);
</nav>
</>
);
};

export default Navbar;
49 changes: 20 additions & 29 deletions src/Styles/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,26 @@
text-decoration: inherit;
}

.MobileNav-container {
display: none;
}

@media screen and (max-width: 993px) {
.Navbar-container {
display: none;
}
.MobileNav-container {
padding: 1rem 0rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.MobileNav-container__icon {
height: 2rem;
width: 2rem;
}
}
.hero {
min-height: 100vh;
background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(/herobg.png);
Expand Down Expand Up @@ -430,35 +450,6 @@
margin-top: -5rem;
}

@media screen and (max-width: 576px) {
.ContactForm-form {
margin-bottom: 3rem;
}
.ContactForm-form-inputcontainer {
display: flex;
flex-direction: column;
gap: 2rem;
}
.ContactForm-form-input {
width: 100%;
}
}
@media screen and (min-width: 576px) and (max-width: 1023px) {
.ContactForm-details {
margin-top: 2rem;
padding: 1.5rem;
display: flex;
flex-direction: row;
gap: 2.5rem;
}
.ContactForm-details__section1 {
gap: 1rem;
}
.ContactForm-details__icon {
height: 2rem;
width: 2rem;
}
}
.Footer {
background-color: #e0e0f2;
margin-top: 4rem;
Expand Down
2 changes: 1 addition & 1 deletion src/Styles/App.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

66 changes: 33 additions & 33 deletions src/Styles/LandingPage/_Contact.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,37 +116,37 @@
}


@media screen and (max-width:576px) {
.ContactForm{
&-form{
margin-bottom: 3rem;
&-inputcontainer{
display: flex;
flex-direction: column;
gap: 2rem;
}
&-input{
width: 100%;
}
}
}
}
// @media screen and (max-width:576px) {
// .ContactForm{
// &-form{
// margin-bottom: 3rem;
// &-inputcontainer{
// display: flex;
// flex-direction: column;
// gap: 2rem;
// }
// &-input{
// width: 100%;
// }
// }
// }
// }

@media screen and (min-width:576px) and (max-width:1023px) {
.ContactForm{
&-details{
margin-top: 2rem;
padding: 1.5rem;
display: flex;
flex-direction: row;
gap: 2.5rem;
&__section1{
gap: 1rem;
}
&__icon{
height: 2rem;
width: 2rem;
}
}
}
}
// @media screen and (min-width:576px) and (max-width:1023px) {
// .ContactForm{
// &-details{
// margin-top: 2rem;
// padding: 1.5rem;
// display: flex;
// flex-direction: row;
// gap: 2.5rem;
// &__section1{
// gap: 1rem;
// }
// &__icon{
// height: 2rem;
// width: 2rem;
// }
// }
// }
// }
22 changes: 22 additions & 0 deletions src/Styles/LandingPage/_Navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,25 @@
font-size: inherit;
text-decoration: inherit;
}


.MobileNav-container{
display: none;
}

@media screen and (max-width:993px){
.Navbar-container{
display: none;
}
.MobileNav-container{
padding: 1rem 0rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
&__icon{
height: 2rem;
width: 2rem;
}
}
}

0 comments on commit 7992956

Please sign in to comment.