Kindly wait a moment, post will be visible in just 5 seconds.
Rizwan Khan
Posted on 10 September 2020
index.js
import React, { useEffect } from 'react'; import { getAllCategory } from '../../actions'; import { useDispatch, useSelector } from 'react-redux'; import './style.css'; /** * @author * @function MenuHeader **/ const MenuHeader = (props) => { const dispatch = useDispatch(); const category = useSelector(state => state.category); const renderCategories = (categories) => { let myCategories = []; for (let category of categories) { myCategories.push( <li key={category.name}> {category.parentId ? <a href={`${category.slug}`}>{category.name}</a> : <span>{category.name}</span> } {category.children.length > 0 ? (<ul>{renderCategories(category.children)}</ul>) : null} </li> ); } return myCategories; } useEffect(() => { dispatch(getAllCategory()); }, []); return ( <div className="menuHeader"> <ul> { category.categories.length > 0 ? renderCategories(category.categories) : null } </ul> </div> ) } export default MenuHeader
style.css
.menuHeader{ height: 40px; width: 100%; background: #fff; border-bottom: 1px solid #ececec; box-shadow: 0 2px 2px -2px #333; } .menuHeader ul{ padding: 0; margin: 0; list-style: none; } .menuHeader > ul{ margin: 0 50px; display: flex; position: relative; } .menuHeader > ul > li > span{ line-height: 40px; display: block; margin: 0 20px; cursor: pointer; font-size: 14px; font-weight: bold; font-family: sans-serif; color: #333; } .menuHeader > ul > li > span:hover{ color: #2874f0; } .menuHeader > ul > li > ul{ position: absolute; left: 0; padding: 0 20px; background: #fff; right: 0; display: none; border: 1px solid #eee; box-shadow: 0 2px 2px -2px #333; } .menuHeader > ul > li:hover ul{ display: block; } .menuHeader > ul > li > ul > li{ float: left; min-width: 200px; } .menuHeader > ul > li > ul > li > a{ text-decoration: none; font-weight: bold; color: #333; margin: 10px 0; display: block; } .menuHeader > ul > li > ul > li a{ text-decoration: none; color: #707070; display: block; margin: 5px 0; font-size: 12px; }
0
444
India
Coding is an art and I love art
Learn trending tech & full-stack development. Book now
0 Comments