Rizwan Khan
Posted on 22 October 2020
Its a reactjs reusable header component with dropdown and search options
import React from 'react'; import './style.css'; import flipkartLogo from '../../images/logo/flipkart.png'; import goldenStar from '../../images/logo/golden-star.png'; import { IoIosArrowDown, IoIosCart, IoIosSearch } from 'react-icons/io'; /** * @author * @function Header **/ const DropdownMenu = (props) => { return ( <div className="headerDropdownContainer"> {props.menu} <div className="dropdown"> <div className="upArrow"></div> {props.firstMenu} <ul className="headerDropdownMenu"> { props.menus && props.menus.map((item, index) => <li key={index}><a href={item.href}>{item.label}</a></li> ) } </ul> </div> </div> ); } const Header = (props) => { return ( <div className="header"> <div className="subHeader"> <div className="logo"> <a href=""> <img src={flipkartLogo} className="logoimage" alt="" /> </a> <a style={{ marginTop: '-10px' }}> <span className="exploreText">Explore</span> <span className="plusText">Plus</span> <img src={goldenStar} className="goldenStar" alt="" /> </a> </div> <div style={{ padding: '0 10px' }}> <div className="searchInputContainer"> <input className="searchInput" placeholder={'search for products, brands and more'} /> <div className="searchIconContainer"> <IoIosSearch style={{ color: '#2874f0' }} /> </div> </div> </div> <div className="rightMenu"> <DropdownMenu menu={ <a className="loginButton"> Login </a> } menus={[ { label: 'My Profile', href: '', icon: null }, { label: 'Flipkart Plus Zone', href: '', icon: null }, { label: 'Orders', href: '', icon: null }, { label: 'Wishlist', href: '', icon: null }, { label: 'Rewards', href: '', icon: null }, { label: 'Gift Cards', href: '', icon: null }, ]} firstMenu={ <div className="firstmenu"> <span>New Customer?</span> <a style={{ color: '#2874f0' }}>Sign Up</a> </div> } /> <DropdownMenu menu={ <a className="more"> <span>More</span> <IoIosArrowDown /> </a> } menus={[ { label: 'Notification Preference', href: '', icon: null }, { label: 'Sell on flipkart', href: '', icon: null }, { label: '24x7 Customer Care', href: '', icon: null }, { label: 'Advertise', href: '', icon: null }, { label: 'Download App', href: '', icon: null } ]} /> <div> <a className="cart"> <IoIosCart /> <span style={{ margin: '0 10px' }}>Cart</span> </a> </div> </div> </div> </div> ) } export default Header
.header{ width: 100%; height: 56px; background: #2874f0; } .subHeader{ max-width: 1100px; width: 100%; height: 100%; display: flex; margin: 0 auto; align-items: center; } .logo{ width: 137px; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; } .logo .logoimage{ width: 75px; } .exploreText{ font-size: 10px; font-style: italic; } .plusText{ font-size: 10px; margin: 0 2px; text-transform: capitalize; font-style: italic; color: yellow; } .logo .goldenStar{ width: 10px; height: 10px; } .searchInputContainer { width: 560px; position: relative; background: #fff; height: 36px; border-radius: 1px; overflow: hidden; display: flex; } .searchInput { width: 518px; border: 0; height: 36px; outline: none; box-sizing: border-box; padding: 0 10px; } .searchIconContainer { display: flex; flex: 1; justify-content: center; align-items: center; } .rightMenu{ display: flex; flex: 1; justify-content: flex-end; align-items: center; } .loginButton { display: block; width: 100px; height: 30px; background: #fff; text-align: center; line-height: 30px; color: #2874f0; font-weight: 500; font-size: 16px; cursor: pointer; } .more { font-weight: bold; color: #fff; display: flex; align-items: center; margin: 0 20px; cursor: pointer; } .cart { font-weight: bold; color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 20px } .headerDropdownContainer{ position: relative; display: inline-block; } .firstmenu{ padding: 15px 20px; border-bottom: 1px solid #eee; font-size: 12px; font-weight: 500; display: flex; justify-content: space-between; } .dropdown{ right: 50%; position: absolute; width: 240px; background: #fff; transform: translateX(50%); box-shadow: 0 4px 16px 0 rgba(0,0,0,.2); border-radius: 2px; z-index: 1; margin-top: 12px; display: none; } .headerDropdownContainer:hover .dropdown{ display: block; } .upArrow{ width: 0; height: 0; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; top: -10px; left: 50%; transform: translateX(-50%); } .headerDropdownMenu{ margin: 0; padding: 0; } .headerDropdownMenu li{ list-style: none; } .headerDropdownMenu li a{ display: block; padding: 15px 20px; box-sizing: border-box; font-size: 14px; border-bottom: 1px solid #eee; color: #212121; text-decoration: none; } .headerDropdownMenu li a:hover{ background-color: #f0f0f0; cursor: pointer; }
0
535
0
India
Coding is an art and I love art
0 Comments