From de0c94179463970cc39e6c77dab3d86df18d201e Mon Sep 17 00:00:00 2001 From: sezallagwal Date: Mon, 28 Oct 2024 15:29:56 +0530 Subject: [PATCH 1/2] fixed overlapping of search bar and user button --- frontend/src/Pages/Herosection.jsx | 331 ++++++++++++++++++----------- frontend/src/Pages/hamburger.jsx | 71 +++---- 2 files changed, 242 insertions(+), 160 deletions(-) diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx index 4108dd5..734c16f 100644 --- a/frontend/src/Pages/Herosection.jsx +++ b/frontend/src/Pages/Herosection.jsx @@ -1,134 +1,225 @@ -import React from 'react'; -import './Herosection.css'; -import logo from '../assets/stationsaarthi.svg'; -import navigationsvg from '../assets/svg/navigation.svg'; -import bookingsvg from '../assets/svg/bookings.svg'; -import stationsvg from '../assets/svg/station.svg'; -import noticationsvg from '../assets/svg/notification.svg'; -import mapsvg from '../assets/svg/3dmap.svg'; -import schedulesvg from '../assets/svg/schedule.svg'; -import searchsvg from '../assets/svg/search.svg'; -import { useNavigate } from 'react-router-dom'; -import HamburgerMenu from './hamburger'; -import contributorsvg from '../assets/svg/contributor.svg'; -import chatbotsvg from '../assets/svg/chatbot.svg'; -import Chatbot from '../components/chatbot'; -import Navbar from '../components/navbar'; -import Language from '../components/language'; +import React from "react"; +import "./Herosection.css"; +import logo from "../assets/stationsaarthi.svg"; +import navigationsvg from "../assets/svg/navigation.svg"; +import bookingsvg from "../assets/svg/bookings.svg"; +import stationsvg from "../assets/svg/station.svg"; +import noticationsvg from "../assets/svg/notification.svg"; +import mapsvg from "../assets/svg/3dmap.svg"; +import schedulesvg from "../assets/svg/schedule.svg"; +import searchsvg from "../assets/svg/search.svg"; +import { useNavigate } from "react-router-dom"; +import HamburgerMenu from "./hamburger"; +import contributorsvg from "../assets/svg/contributor.svg"; +import chatbotsvg from "../assets/svg/chatbot.svg"; +import Chatbot from "../components/chatbot"; +import Navbar from "../components/navbar"; +import Language from "../components/language"; import { FaUserAlt } from "react-icons/fa"; -import Popup from '../components/popup'; +import Popup from "../components/popup"; const Herosection = () => { - const navigate = useNavigate(); + const navigate = useNavigate(); - const LoginClick = () => { - navigate('/Login'); // Navigates to the login page - }; - const RegisterClick = () => { - navigate('/Register'); // Navigates to the login page - }; - const StationCLick = () => { - navigate('/Stations'); // Navigates to the login page - }; - const UserCLick = () => { - navigate('/user'); // Navigates to the login page - } - const NavigationCLick = () => { - navigate('/Navigation'); // Navigates to the login page - }; - const BookingCLick = () => { - navigate('/Booking'); // Navigates to the login page - }; - const MapCLick = () => { - navigate('/3DMap'); // Navigates to the login page - } - const ScheduleCLick = () => { - navigate('/Schedule'); // Navigates to the login page - } - const NotificationCLick = () => { - navigate('/Notification'); // Navigates to the login page - } - const ContributorCLick = () => { - navigate('/contributor'); // Navigates to the login page - } - + const LoginClick = () => { + navigate("/Login"); // Navigates to the login page + }; + const RegisterClick = () => { + navigate("/Register"); // Navigates to the login page + }; + const StationCLick = () => { + navigate("/Stations"); // Navigates to the login page + }; + const UserCLick = () => { + navigate("/user"); // Navigates to the login page + }; + const NavigationCLick = () => { + navigate("/Navigation"); // Navigates to the login page + }; + const BookingCLick = () => { + navigate("/Booking"); // Navigates to the login page + }; + const MapCLick = () => { + navigate("/3DMap"); // Navigates to the login page + }; + const ScheduleCLick = () => { + navigate("/Schedule"); // Navigates to the login page + }; + const NotificationCLick = () => { + navigate("/Notification"); // Navigates to the login page + }; + const ContributorCLick = () => { + navigate("/contributor"); // Navigates to the login page + }; - return ( - <> + return ( + <> +
+
+ +
-
-
-
- -
-
- -
- -

Namaste !! Yatree

-
- -
- -

Station Saarthi : Your Platform Guide

-
- {/* whitishbg +
+
+ +
+ +
+
+ +

+ Namaste !! Yatree{" "} +

+
+
+ +

+ Station Saarthi : Your Platform Guide +

+
+ {/* whitishbg */} -
-

- +
+

-
-
- +
+ -

Contributors

-
+ " + /> +

Contributors

+
+ +
+ + +
+
+ + +
+
+ + +
+
+ {" "} + +
-
- - -
-
- - -
-
- - -
-
- -
- -
+
+ + +
-
-
- - -

Saarthi

-
- - ); +
+ {" "} + +
+ +
+ + +

Saarthi

+
+ + ); }; -export default Herosection; \ No newline at end of file +export default Herosection; diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx index 82fb0f1..83d24a8 100644 --- a/frontend/src/Pages/hamburger.jsx +++ b/frontend/src/Pages/hamburger.jsx @@ -1,7 +1,7 @@ -import React, { useState, useEffect, useRef } from 'react'; -import styled, { keyframes } from 'styled-components'; -import { FaArrowLeft, FaSearch, FaTimes } from 'react-icons/fa'; -import { useNavigate } from 'react-router-dom'; +import React, { useState, useEffect, useRef } from "react"; +import styled, { keyframes } from "styled-components"; +import { FaArrowLeft, FaSearch, FaTimes } from "react-icons/fa"; +import { useNavigate } from "react-router-dom"; const fadeIn = keyframes` from { @@ -39,9 +39,8 @@ const HamburgerContainer = styled.div` } `; - const Menu = styled.div` - display: ${({ open }) => (open ? 'block' : 'none')}; + display: ${({ open }) => (open ? "block" : "none")}; background-color: white; position: absolute; top: 0; @@ -76,7 +75,8 @@ const HamburgerIcon = styled.div` `; const Bar1 = styled(MenuIconBar)` - transform: ${({ open }) => (open ? 'rotate(-45deg) translate(-5px, 5px)' : 'rotate(0)')}; + transform: ${({ open }) => + open ? "rotate(-45deg) translate(-5px, 5px)" : "rotate(0)"}; `; const Bar2 = styled(MenuIconBar)` @@ -84,7 +84,8 @@ const Bar2 = styled(MenuIconBar)` `; const Bar3 = styled(MenuIconBar)` - transform: ${({ open }) => (open ? 'rotate(45deg) translate(-5px, -5px)' : 'rotate(0)')}; + transform: ${({ open }) => + open ? "rotate(45deg) translate(-5px, -5px)" : "rotate(0)"}; `; const BackButton = styled(FaArrowLeft)` @@ -117,24 +118,21 @@ const ClearIcon = styled(FaTimes)` const SearchContainer = styled.div` display: flex; align-items: center; - justify-content:center !important; + justify-content: center !important; position: fixed; top: 10px; - right: 16px; - padding-block:6px; - padding-inline:10px; + right: 70px; + padding-block: 6px; + padding-inline: 10px; background-color: rgb(191 219 254); border-radius: 30px; - `; const SearchInput = styled.input` - - background-color: transparent; color: rgb(6 25 47); outline: none; - width: ${({ isFocused }) => (isFocused ? "200px" : "0px")}; + width: ${({ isFocused }) => (isFocused ? "200px" : "0px")}; transition: width 0.4s ease; opacity: ${({ show }) => (show ? 1 : 0)}; pointer-events: ${({ show }) => (show ? "auto" : "none")}; @@ -143,45 +141,42 @@ const SearchInput = styled.input` } `; -const Hamburger = () => { - +const Hamburger = () => { const navigate = useNavigate(); const HomeClick = () => { - navigate('/'); + navigate("/"); }; const SettingsClick = () => { - navigate('/Settings'); + navigate("/Settings"); }; const helpClick = () => { - navigate('/Help'); + navigate("/Help"); }; const aboutClick = () => { - navigate('/About'); + navigate("/About"); }; const Contactclick = () => { - navigate('/ContactUs'); + navigate("/ContactUs"); }; const privacyClick = () => { - navigate('/PrivacyPolicy'); // Navigate to Privacy and Policy page + navigate("/PrivacyPolicy"); // Navigate to Privacy and Policy page }; - - - const [open, setOpen] = useState(false); - const [showSearch, setShowSearch] = useState(false); - const [searchTerm, setSearchTerm] = useState(''); - const searchInputRef = useRef(null); + const [open, setOpen] = useState(false); + const [showSearch, setShowSearch] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const searchInputRef = useRef(null); const [isFocused, setIsFocused] = useState(false); const toggleMenu = () => { setOpen((prev) => !prev); - };.3 - + }; + 0.3; const handleBack = () => { setOpen(false); @@ -196,20 +191,19 @@ const Hamburger = () => { }; const clearSearch = () => { - setSearchTerm(''); + setSearchTerm(""); searchInputRef.current.focus(); }; const handleFocus = () => { setIsFocused(true); }; - + const handleBlur = (e) => { if (!searchInputRef.current.contains(e.relatedTarget)) { setIsFocused(false); } }; - // Focus input when search is toggled on useEffect(() => { @@ -220,8 +214,6 @@ const Hamburger = () => { return (
- - { ref={searchInputRef} value={searchTerm} onChange={handleSearchChange} - onFocus={handleFocus} + onFocus={handleFocus} onBlur={handleBlur} - /> {showSearch && searchTerm && } @@ -242,4 +233,4 @@ const Hamburger = () => { ); }; -export default Hamburger; \ No newline at end of file +export default Hamburger; From 400266fd0dfe3848f432483c768ff4bf9cfd5290 Mon Sep 17 00:00:00 2001 From: sezallagwal Date: Mon, 28 Oct 2024 15:31:59 +0530 Subject: [PATCH 2/2] add --- frontend/src/Pages/Herosection.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx index 734c16f..d674302 100644 --- a/frontend/src/Pages/Herosection.jsx +++ b/frontend/src/Pages/Herosection.jsx @@ -64,7 +64,7 @@ const Herosection = () => {