fireship-io / 229-multi-level-dropdown Goto Github PK

The forth menu item in the dropdown is always unclickable and unhoverable in the front icon face and it is available when mouse is hovered in the back or clicked. Please take a look into it.

Regards

When using this code with typescript ans react i get the following errors:

1. Property 'firstChild' does not exist on type 'never'.

2. Type 'null' is not assignable to type 'string | number | (string & {}) | undefined'.

Hi,

The drop down menu does not gets closed when clicked outside of menu. This could be taken as an enhancement.

--
Thanks

for some reason, 1st menu comes then elements come and it doesn't follow transform 110% to 0% works for only initial two only.
Thank You

I started the code without any edits and I get some lines on the dropdown.

Can anyone explain the {open && props.children} here? I am having trouble understand its positioning and effect. It is on line 45 of the App.js file for reference

function NavItem(props) {
  const [open, setOpen] = useState(false);

  return (
    <li className="nav-item">
      <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
        {props.icon}
      </a>

      {open && props.children} // <- THIS CODE HERE
    </li>
  );
}

Thank you!

The menu is rerendering so frequently that the user is not even able to click on it.

The problem is that you are defining a component inside another component and label this technique as "component composition" but this is not, this is component composition

This demo is worth a thousand words..

Btw this project is really awesome, thanks :)

Height is not set when dropdown opens. This causes snapping on first click in the dropdown.

Hi,
I have no idea what happened but when I click on the drop down button, a blank page appears for me. I have no idea why this happens. I haven't made any changes to the code. Please help

The > icons in the menu fail to display correctly in any recent browser.

DropdownItems rightIcon is not visible

Navbar includes multiple NavItems, they could include multiple dropdowns - it all works very well thank you. If I have one drop-down great. However, if I have a second drop-down menu it does not close the first when I open a new one which then appears underneath the first drop-down which is not the desired action. So it is both nonfunctional and looks bad.

An answer to this question could help people to work out how to resolve the other issue which could then be resolved with 'react-onclickoutside' maybe

the dropdown opacity increases when it is overlaying other components below the navbar and all its transitions and hover effect doesn't work .
it looks fine when it doesn't overlay the elements below but the hover effect and transition effects still doesn't work .

everything still works when there are simple Html elements like h1 .

Hope this Issue gets cleared soon

I'm not sure this is an issue, but when I try to code along with the tutorial on youtube. I ran into this problem.
Classes added to my element look like this: "menu-primary enter enter-active" instead of "menu-primary-enter-active".
So I have to change my css to this in order to make it works:

.menu-primary.enter {
  position: absolute;
  transform: translateX(-110%);
}

.menu-primary.enter.enter-active {
  transform: translateX(0%);
  transition: all var(--speed) ease;
}

.menu-primary.exit {
  position: absolute;
}

.menu-primary.exit.exit-active {
  transform: translateX(-110%);
  transition: all var(--speed) ease;
}

.menu-secondary.enter {
  transform: translateX(110%);
}

.menu-secondary.enter.enter-active {
  transform: translateX(0%);
  transition: all var(--speed) ease;
}

.menu-secondary.exit.exit-active {
  transform: translateX(110%);
  transition: all var(--speed) ease;
}

I have checked the version of react-transition-group and it is the same with this repo (4.3.0). Can anyone explain why this happened? Thank you

This was an excellent tutorial, and I managed to get the drop down working, but I'm trying to get some ideas on how to have multiple drop downs on a single page. Currently if i open one dropdown all dropdowns on the page open up. I'm not sure if i need to go down the rabbit hole of setting state for which menu is open, or do i just created a separate DropDownMenu for each menu i need, or if i'm just missing some minor thing from the tutorial. Any leads would be appreciated.

Hello dear freind , this menu is very beautiful and practical, can you put it as a usable component that developed in Vue JS ?
Thankful

when I click on dropdown its goes top of my page. I cant find solution can u help me?