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 (
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
};
-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 && }
+
+
+
+
+
+ {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 .",