From dca6182b88f5a5b3264a982870c807816516b44b Mon Sep 17 00:00:00 2001 From: Hritika Sharan <117531823+hritika2409@users.noreply.github.com> Date: Thu, 3 Oct 2024 11:09:12 +0530 Subject: [PATCH 1/3] nv --- frontend/src/Pages/hamburger.jsx | 144 ++++++++++++++++++------------- 1 file changed, 85 insertions(+), 59 deletions(-) diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx index b719bb8..8ab0334 100644 --- a/frontend/src/Pages/hamburger.jsx +++ b/frontend/src/Pages/hamburger.jsx @@ -1,86 +1,112 @@ -// /c:/personal dg/github_repo/StationSaarthi/frontend/src/Pages/hamburger.jsx - import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const fadeIn = keyframes` - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } `; const fadeOut = keyframes` - from { - opacity: 1; - } - to { - opacity: 0; - } + from { + opacity: 1; + } + to { + opacity: 0; + } `; -const MenuIcon = styled.div` - width: 30px; - height: 3px; - background-color: white; - margin: 6px 20px; - transition: transform 0.4s, opacity 0.4s; +const MenuIconBar = styled.div` + width: 30px; + height: 3px; + background-color: white; + margin: 6px 0; + transition: transform 0.4s, opacity 0.4s; `; const HamburgerContainer = styled.div` - display: flex; - flex-direction: column; - cursor: pointer; + display: flex; + flex-direction: column; + cursor: pointer; + padding: 10px; + @media (max-width: 768px) { + padding: 5px; + } `; const Menu = styled.div` - display: ${({ open }) => (open ? 'block' : 'none')}; - background-color: white; - position: absolute; - height: 100vh; - width: 30vw; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); - animation: ${({ open }) => (open ? fadeIn : fadeOut)} 0.4s; - @media (max-width: 768px) { + display: ${({ open }) => (open ? 'block' : 'none')}; + background-color: white; + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 30vw; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + animation: ${({ open }) => (open ? fadeIn : fadeOut)} 0.4s ease forwards; + + @media (max-width: 768px) { width: 100vw; } `; const MenuItem = styled.a` - color: rgb(59 130 246); - padding: 22px 16px; - text-decoration: none; - display: block; - text-align: center; - &:hover { - background-color: rgb(59 130 246); - color:white; - } + color: rgb(59 130 246); + padding: 22px 16px; + text-decoration: none; + display: block; + text-align: center; + transition: background-color 0.3s, color 0.3s; + &:hover { + background-color: rgb(59 130 246); + color: white; + } +`; + +const HamburgerIcon = styled.div` + position: relative; + width: 30px; + height: 24px; +`; + +const Bar1 = styled(MenuIconBar)` + transform: ${({ open }) => (open ? 'rotate(-45deg) translate(-5px, 5px)' : 'rotate(0)')}; +`; + +const Bar2 = styled(MenuIconBar)` + opacity: ${({ open }) => (open ? 0 : 1)}; +`; + +const Bar3 = styled(MenuIconBar)` + transform: ${({ open }) => (open ? 'rotate(45deg) translate(-5px, -5px)' : 'rotate(0)')}; `; const Hamburger = () => { - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false); - const toggleMenu = () => { - setOpen(!open); - }; + const toggleMenu = () => { + setOpen((prev) => !prev); + }; - return ( -
- - - - - - - Home - Services - Contact - -
- ); + return ( +
+ + + + + + + + + Home + Services + Contact + +
+ ); }; -export default Hamburger; \ No newline at end of file +export default Hamburger; From 093602cfd2eac8aee54207b0cd5b22d4613438fa Mon Sep 17 00:00:00 2001 From: Hritika Sharan <117531823+hritika2409@users.noreply.github.com> Date: Thu, 3 Oct 2024 12:12:20 +0530 Subject: [PATCH 2/3] Update hamburger.jsx --- frontend/src/Pages/hamburger.jsx | 109 ++++++++++++++++++++++++++++++- 1 file changed, 107 insertions(+), 2 deletions(-) diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx index 8ab0334..23f701d 100644 --- a/frontend/src/Pages/hamburger.jsx +++ b/frontend/src/Pages/hamburger.jsx @@ -1,5 +1,6 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import styled, { keyframes } from 'styled-components'; +import { FaArrowLeft, FaSearch, FaTimes } from 'react-icons/fa'; const fadeIn = keyframes` from { @@ -47,7 +48,7 @@ const Menu = styled.div` width: 30vw; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); animation: ${({ open }) => (open ? fadeIn : fadeOut)} 0.4s ease forwards; - + @media (max-width: 768px) { width: 100vw; } @@ -84,13 +85,98 @@ const Bar3 = styled(MenuIconBar)` transform: ${({ open }) => (open ? 'rotate(45deg) translate(-5px, -5px)' : 'rotate(0)')}; `; +const BackButton = styled(FaArrowLeft)` + font-size: 24px; + cursor: pointer; + margin: 16px; +`; + +const SearchIcon = styled(FaSearch)` + font-size: 24px; + color: white; + cursor: pointer; + margin-right: 10px; + transition: color 0.3s; + &:hover { + color: rgb(37 99 235); + } +`; + +const ClearIcon = styled(FaTimes)` + font-size: 16px; + color: white; + cursor: pointer; + margin-left: 5px; + transition: color 0.3s; + &:hover { + color: rgb(255 0 0); + } +`; + +const SearchContainer = styled.div` + display: flex; + align-items: center; + position: fixed; + top: 10px; + right: 10px; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 25px; + padding: 5px 10px; + transition: width 0.4s ease; +`; + +const SearchInput = styled.input` + display: block; + padding: 8px; + margin-left: 10px; + border: 2px solid rgb(59 130 246); + border-radius: 5px; + width: ${({ show }) => (show ? '200px' : '0px')}; + transition: width 0.4s ease; + background-color: transparent; + color: white; + outline: none; + opacity: ${({ show }) => (show ? 1 : 0)}; + pointer-events: ${({ show }) => (show ? 'auto' : 'none')}; + &::placeholder { + color: #ccc; + } +`; + const Hamburger = () => { const [open, setOpen] = useState(false); + const [showSearch, setShowSearch] = useState(false); + const [searchTerm, setSearchTerm] = useState(''); + const searchInputRef = useRef(null); const toggleMenu = () => { setOpen((prev) => !prev); }; + const handleBack = () => { + setOpen(false); + }; + + const toggleSearch = () => { + setShowSearch((prev) => !prev); + }; + + const handleSearchChange = (e) => { + setSearchTerm(e.target.value); + }; + + const clearSearch = () => { + setSearchTerm(''); + searchInputRef.current.focus(); + }; + + // Focus input when search is toggled on + useEffect(() => { + if (showSearch && searchInputRef.current) { + searchInputRef.current.focus(); + } + }, [showSearch]); + return (
@@ -100,11 +186,30 @@ const Hamburger = () => { + + {open && } + + + ← + Home Services Contact + + + + + {showSearch && searchTerm && } +
); }; From 37e31ca01d55829c298446e075a8abfe69e7f217 Mon Sep 17 00:00:00 2001 From: Hritika Sharan <117531823+hritika2409@users.noreply.github.com> Date: Thu, 3 Oct 2024 12:15:41 +0530 Subject: [PATCH 3/3] Update package.json --- frontend/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/package.json b/frontend/package.json index bc2724b..5d7ba95 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { + "start": "react-scripts start", "dev": "vite", "build": "vite build", "lint": "eslint .",