Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Made Header and Footer Responsive, Converted Header to Hamburger Menu (#46) #49

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: Made Header and Footer Responsive, Converted Header to Hamburger Menu (#46) #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce5da1f
Make header responsive with hamburger menu for smaller screens
priyansh87 Dec 20, 2024
ef87138
make footer responsive for smaller screens
priyansh87 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 48 additions & 15 deletions src/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,60 @@
import React from "react";
import "./Footer.css";
import { FaInstagram } from "react-icons/fa";
import { FaGithub } from "react-icons/fa";
import { FaDiscord } from "react-icons/fa";
import {Link} from 'react-router-dom';
import { FaInstagram, FaGithub, FaDiscord } from "react-icons/fa";
import { Link } from 'react-router-dom';

const Footer = () => {
const currentYear = new Date().getFullYear();

return (
<div className="footer">
<div className="copyright">
<h4>© {currentYear} JIIT Open-Source Developer Circle. All rights reserved.</h4>
</div>
<footer className="bg-black bg-opacity-80 text-white py-6 px-4">
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
<div className="mb-4 md:mb-0 text-center md:text-left">
<h4 className="text-sm">
© {currentYear} JIIT Open-Source Developer Circle. All rights reserved.
</h4>
</div>

<div className='header2'>
<a href="https://www.instagram.com/jodc128/"><FaInstagram className='icons links2'/></a>
<a href="https://github.com/JIITODC/website-24"><FaGithub className='icons links2' /></a>
<a href="https://discord.gg/xf8YDutB"><FaDiscord className='icons links2' /></a>
<Link to='/join' className='links1'><h3 className='links1'>Join the society</h3></Link>
<div className='flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6'>
<div className="flex space-x-4">
<a
href="https://www.instagram.com/jodc128/"
target="_blank"
rel="noopener noreferrer"
className="text-gray-300 hover:text-white transition-colors duration-300"
aria-label="Instagram"
>
<FaInstagram className='text-2xl' />
</a>
<a
href="https://github.com/JIITODC/website-24"
target="_blank"
rel="noopener noreferrer"
className="text-gray-300 hover:text-white transition-colors duration-300"
aria-label="GitHub"
>
<FaGithub className='text-2xl' />
</a>
<a
href="https://discord.gg/xf8YDutB"
target="_blank"
rel="noopener noreferrer"
className="text-gray-300 hover:text-white transition-colors duration-300"
aria-label="Discord"
>
<FaDiscord className='text-2xl' />
</a>
</div>
<Link
to='/join'
className='bg-white text-black px-4 py-2 rounded-md hover:bg-gray-200 transition-colors duration-300'
>
Join the society
</Link>
</div>
</div>
</div>
</footer>
);
};

export default Footer;

138 changes: 25 additions & 113 deletions src/components/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
.joinS {
font-size: 2rem;
font-weight: bold;
background-image: linear-gradient(-45deg, #ff0081, #ffd600, #ff6f00);
background-size: 300%;
background-clip: text;
color: transparent;
animation: gradientAnimation 5s ease-in-out infinite;
transition: transform 0.3s ease, text-shadow 0.3s ease;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
}

@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
Expand All @@ -22,112 +10,36 @@
}
}

.joinS:hover {
transform: scale(1.1);
text-shadow: 0 0 15px rgba(255, 255, 255, 1);
}

.header {
display: flex;
justify-content: space-between;
position: fixed;
width: 98.5vw;
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
z-index: 999;
padding: 0.5em;
}

.header1 {
display: flex;
gap: 1em;
padding-left: 1em;
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
}
.links1 {
color: rgb(216, 216, 216);
text-decoration: none;
cursor: pointer;
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
}
.links1:hover {
color: white;
}

.header2 {
display: flex;
align-items: center;
gap: 1em;
cursor: pointer;
padding-left: 2em;
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
}
.header2 > a {
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
}

.links2 {
color: rgb(216, 216, 216);
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
.join-society {
font-size: 1.5rem;
font-weight: bold;
background-image: linear-gradient(-45deg, #ff0081, #ffd600, #ff6f00);
background-size: 300%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: gradientAnimation 5s ease-in-out infinite;
transition: transform 0.3s ease, text-shadow 0.3s ease;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}

.links2:hover {
color: white;
.join-society:hover {
transform: scale(1.1);
text-shadow: 0 0 15px rgba(255, 255, 255, 1);
}

.icons {
font-size: 22px;
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
@media (max-width: 768px) {
.join-society {
font-size: 1.25rem;
}
}

@media (min-width: 320px) and (max-width: 450px) {
.header1 {
display: flex;
gap: 0.5em;
padding-top: 0.75em;
}
.links1 {
font-size: 0.9em;
}
.header {
width: 100%;
gap: 3em;
}
.joinS {
font-size: 0.8rem;
font-weight: bold;
width: 6em;
padding-top: 0.2em;
}
.header2 > a {
background-color: transparent;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out;
font-size: 0.8em;
}
.links2 {
font-size: 0.5em;
background-color: white;
@media (max-width: 768px) {
.join-society {
font-size: 1rem;
padding: 0.25rem 0.5rem;
}
}

137 changes: 99 additions & 38 deletions src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,106 @@
import React from "react";
import "./Header.css";
import { FaInstagram } from "react-icons/fa";
import { FaGithub } from "react-icons/fa";
import { FaDiscord } from "react-icons/fa";
import { Link } from "react-router-dom";
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { FaInstagram, FaGithub, FaDiscord, FaBars, FaTimes } from 'react-icons/fa';
import './Header.css'
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);

useEffect(() => {
const handleScroll = () => {
const isScrolled = window.scrollY > 10;
if (isScrolled !== scrolled) {
setScrolled(isScrolled);
}
};

document.addEventListener('scroll', handleScroll);
return () => {
document.removeEventListener('scroll', handleScroll);
};
}, [scrolled]);

const toggleMenu = () => {
setIsOpen(!isOpen);
};

function Header() {
return (
<div className="header">
<div className="header1">
<Link to="/" className="links1">
<h3 className="links1">Home</h3>
</Link>
<Link to="/events" className="links1">
<h3 className="links1">Events</h3>
</Link>
<Link
to="https://github.com/JIITODC/JODC-Workshops"
className="links1"
target="_blank"
>
<h3 className="links1">Resources</h3>
</Link>
<nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-black bg-opacity-80' : 'bg-transparent'}`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="-mr-2 flex md:hidden">
<button
onClick={toggleMenu}
className="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
>
<span className="sr-only">Open main menu</span>
{isOpen ? <FaTimes className="block h-6 w-6" /> : <FaBars className="block h-6 w-6" />}
</button>
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<Link to="/" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</Link>
<Link to="/events" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Events</Link>
<a href="https://github.com/JIITODC/JODC-Workshops" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Resources</a>
</div>
</div>
<div className="hidden md:block">
<div className="ml-4 flex items-center md:ml-6">
<a href="https://www.instagram.com/jodc128/" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
<FaInstagram className="inline-block text-xl" />
</a>
<a href="https://github.com/JIITODC/website-24" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
<FaGithub className="inline-block text-xl" />
</a>
<a href="https://discord.gg/xf8YDutB" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
<FaDiscord className="inline-block text-xl" />
</a>
<Link to="/join" className="join-society ml-4">Join the society</Link>
</div>
</div>
</div>
</div>

<div className="header2">
<a href="https://www.instagram.com/jodc128/">
<FaInstagram className="icons links2" />
</a>
<a href="https://github.com/JIITODC/website-24">
<FaGithub className="icons links2" />
</a>
<a href="https://discord.gg/xf8YDutB">
<FaDiscord className="icons links2" />
</a>
<Link to="/join" className="links1">
<h3 className="joinS">Join the society</h3>
</Link>
{/* Mobile menu, show/hide based on menu state */}
<div className={`md:hidden fixed inset-y-0 left-0 w-64 bg-black bg-opacity-90 transform ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out z-40`}> {/* Updated mobile menu */}
<div className="flex justify-end p-4">
<button
onClick={toggleMenu}
className="text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
>
<span className="sr-only">Close main menu</span>
<FaTimes className="h-6 w-6" />
</button>
</div>
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link to="/" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</Link>
<Link to="/events" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Events</Link>
<a href="https://github.com/JIITODC/JODC-Workshops" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Resources</a>
</div>
<div className="pt-4 pb-3 border-t border-gray-700">
<div className="flex items-center px-5">
<a href="https://www.instagram.com/jodc128/" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
<FaInstagram className="inline-block mr-2" /> Instagram
</a>
</div>
<div className="flex items-center px-5">
<a href="https://github.com/JIITODC/website-24" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
<FaGithub className="inline-block mr-2" /> GitHub
</a>
</div>
<div className="flex items-center px-5">
<a href="https://discord.gg/xf8YDutB" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
<FaDiscord className="inline-block mr-2" /> Discord
</a>
</div>
<div className="mt-3 px-2">
<Link to="/join" className="join-society block text-center">Join the society</Link>
</div>
</div>
</div>
</div>
</nav>
);
}
};

export default Navbar;

export default Header;