Responsive intro page with nextjs/tailwind

Community feedback

• 

  P

  ClaudiuManuel•30

  @ClaudiuManuelPosted about 1 year ago

  Hello,

  First and foremost good job! You nailed it!

  One thing I might change is that whenever a user clicks one of the dropdowns I'd actually close all the other ones that were opened before. It's kinda weird to have 2 dropdowns opened at the same time. Moreover, your dropdown section modifies its width when I hover over a longer value (ex reminders or our team).

  Hope this helps!

  1

  ---

  

  Stephen Johnston•320

  @sjohnston82Posted about 1 year ago

  @ClaudiuManuel Thanks for the input! Sometimes when I'm all wrapped up in making it look as close to the design as possible I forget to think about simple things like closing menus! I went back and fixed the things you suggested, and added some functions for closing menus when a user clicks outside the menu as well as when a user clicks on one of the menu options.

  2

  

  Ogiji Max•140

  @MaxiTeddyPosted about 1 year ago

  @sjohnston82 Perfecto, great work

  1
• 

  Ogiji Max•140

  @MaxiTeddyPosted about 1 year ago

  I don't know what else you did except coding this...This looks amazing, nice work. But your dropdown on the desktop version isn't showing any words except the icons, likewise in the mobile version

  1

  ---

  

  Stephen Johnston•320

  @sjohnston82Posted about 1 year ago

  @MaxiTeddy Weird, when I view the site on my PC, everything appears as normal, but when I view it on my phone, it does appear that all text using the 'almost-black' tailwind class isn't showing up unless its highlighted. I'll look into it, thanks for the heads up!

  1

  

  Stephen Johnston•320

  @sjohnston82Posted about 1 year ago

  It should be fixed now, I guess I just didn't explicitly put a text color on those and it defaulted to white.

  0
• 

  Ifeanyi Aladi•250

  @ShyneADLPosted about 1 year ago

  This is beautiful man, it really looks like you put your heart into it, I appreciate programmers that make their work clean and as close to perfect as possible.

  Just one question though, I checked your design on mobile, and I have to ask how did you implement that animation on the menu button as it transforms to the close button? Did you use framer? Or is it from a NextJs animation library?

  1

  ---

  

  Stephen Johnston•320

  @sjohnston82Posted about 1 year ago

  @ShyneADL Thank you! I appreciate it!

  As for the mobile menu closing animation, it's all done just with tailwind.

  Basically, the menu is three spans, and when clicked, one transforms 45 degrees, the middle goes to opacity-0, and the other one transforms -45 degrees. It looks pretty weird so you need to translate them so that cross right over eachother.

  Here's the code I used for it:

  const burgerBar =
      "h-[2px] bg-almost-black w-8 transition ease transform duration-300";
    return (
      <div
        className=" flex flex-col mr-2  gap-[6px] items-center z-50  justify-center  p-2 cursor-pointer"
        onClick={() => setNavOpen(!navOpen)}
      >
        <span
          className={cn(`${burgerBar}`, {
            "rotate-45 translate-y-[9px] w-8": navOpen,
          })}
        ></span>
        <span
          className={cn(`${burgerBar}`, {
            "opacity-0": navOpen,
          })}
        ></span>
        <span
          className={cn(`${burgerBar}`, {
            "-rotate-45 -translate-y-[7px] w-8": navOpen,
          })}
        ></span>
      </div>
  

  2
• 

  Ifeanyi Aladi•250

  @ShyneADLPosted about 1 year ago

  I appreciate this so much man!

  I'll use this to improve my design asap.

  0