Drop down menu when click on the icon- ReactJS

Question

I have a Navbar and i am using the condition that if userstatus is true(i.e user is signedin) then it will show the user-icon otherwise signin, i am looking to achieve that when i click in the user-icon or singin, it will show the drop down menu where i will later use it for logout button. i am struggling to find how will i achieve this, i can see at https://react-bootstrap.github.io/components/dropdowns/ that i can implement but here i want to use my own icon(glyphicon glyphicon-user) rather the rectangle box.

I am looking to achieve the below but instead of Dropdown button i am looking to use the user-icon

any suggestion/pointers please.

-Snippet of code

 <li>
             <a className="active" href="/signin">
               {userstatus ? (
                 <a
                   className=" signin-icon glyphicon glyphicon-user    
   "
                 ></a>
               ) : (
                 <a>SIGNIN</a>
               )}
             </a>
             
</li>

Aly Abd El Rahman · Accepted Answer · 2020-08-09 18:35:31Z

2

First solution which i don't recommend is to over ride the bootstrap css which will be alot and hustle you don't need starting from resting all the css and !important alot of css

second choice is to use your own dropdown which i find it lot easier than doing all this previous solution hustle .

incase you are using react hooks for ex :

const [isDropdownOpend , setDropdownOpen ] = useState(false);
const [list , setList] = useState([1,2,3])
const toggleDropDown = () => setDropdownOpend = !isDropdownOpend
const DropDownlist = () =>  useMemo(() =>list.map(el=><div>el</div>)
return (
<>
<button class="signin-icon glyphicon glyphicon-user  " onClick={toggleDropDown}>
{isDropdownOpend  ?DropDownlist():false}
</>
)

answered Aug 9, 2020 at 18:35

Aly Abd El Rahman

2811 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Umair_007 Over a year ago

Thanks Aly, could you please explain this bit const DropDownlist = () => useMemo(() =>list.map(el=><div>el</div>) as i am struggling to understand how it is working here. and why we need two arrow functions in this code line.

Umair_007 Over a year ago

as i understand the first arrow function const DropDownlist = () => is a call back when ever user click and the last arrow function is () =>list.map(el=><div>el</div>) is the .map function is iterating in each element of list but whats the reason of the middle arrow function () => useMemo(...), also the code is not working(drop down is not showing ) not sure if it is still missing something in it.

Aly Abd El Rahman Over a year ago

for the first call back yes you are right you can remove the extra call back ()=> , and for the error you have please give me more details about it

Umair_007 Over a year ago

I have implemented the above code, but useMemo( it is saying that it is not define, not user how you are using it here

Aly Abd El Rahman Over a year ago

just import it ` import { useMemo } from 'react' `

Monzoor Tamal · Accepted Answer · 2020-08-09 18:32:15Z

0

Add these class here

<Dropdown.Toggle variant="light" className="bg-white border-0 p-0" variant="success" id="dropdown-basic">
    <ADD YOUR ICON HERE>
  </Dropdown.Toggle>

css

.dropdown-toggle:after {
   border: 0;
}

answered Aug 9, 2020 at 18:32

Monzoor Tamal

8106 silver badges16 bronze badges

Comments

Jaya Shankar B · Accepted Answer · 2020-08-09 18:46:56Z

0

based on the above link you mentioned you can change here:

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    {* you icon code here *} (//in my case I used <FaBeer /> )
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

and change the actions like you wanted inside Dropdown.Menu tag

answered Aug 9, 2020 at 18:46

Jaya Shankar B

1332 silver badges9 bronze badges

Comments

hackhan · Accepted Answer · 2020-08-09 20:13:46Z

0

There are various ways to achieve this. A little bit of googling will reveal a lot of those ways. However, you can do this with pure css by using a div and having menu items and menu button inside it. Menu items will remain hidden as long as the parent div isn't hovered.

.dropdown {
  width: 100px;
  background: purple;
}
.dropdown .item {
  display: none;
}

.dropdown:hover .item{
  display: block;
}

<div class="dropdown">
<button>
Button
</button>
<div class="item">
<p>
item 1
</p>
</div>
</div>

answered Aug 9, 2020 at 20:13

hackhan

5223 silver badges7 bronze badges

Collectives™ on Stack Overflow

Drop down menu when click on the icon- ReactJS

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related