Dev_zxc Posts - Answer Overflow

Dev_zxc

Posts Comments

KPCKevin Powell - Community

•Created by Dev_zxc on 2/18/2024 in #os-and-tools

Reinstall/Format a pc

6 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 10/12/2023 in #front-end

can you have an if else statement inside this ```style={{ }}```

2 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 10/6/2023 in #front-end

How do you reset a state on certain breakpoint?

Im trying to set the navMenu to false when i reached sm:(640px above) im wondering if where can i put a code that when sm:(reset NavMenu to false)

export default function Home() {
  const [navMenu, setNavMenu] = useState(false);

  const handleNavMenu = () => {
    setNavMenu(!navMenu)

  }
  
  return (
    <header className='fixed flex top-0 right py-2 px-2 w-full'>
      <nav className='flex w-full justify-between'>
        <div className='p-5'>
          <h2>RRSDL</h2>
        </div>

        <div onClick={handleNavMenu} className='sm:hidden p-5 cursor-pointer'>
          {navMenu ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
        </div>

        <ul className={navMenu ?
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-[100%] sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`
          
        :
        
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-0 sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`}>
          <li className='p-5'><Link href="/">Home</Link></li>
          <li className='p-5'><Link href="/about">About</Link></li>
          <li className='p-5'><Link href="/projects">projects</Link></li>
          <li className='p-5'><Link href="/contacts">Contact</Link></li>
        </ul>
      </nav>
    </header>
  )
}

export default function Home() {
  const [navMenu, setNavMenu] = useState(false);

  const handleNavMenu = () => {
    setNavMenu(!navMenu)

  }
  
  return (
    <header className='fixed flex top-0 right py-2 px-2 w-full'>
      <nav className='flex w-full justify-between'>
        <div className='p-5'>
          <h2>RRSDL</h2>
        </div>

        <div onClick={handleNavMenu} className='sm:hidden p-5 cursor-pointer'>
          {navMenu ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
        </div>

        <ul className={navMenu ?
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-[100%] sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`
          
        :
        
        `sm:flex w-full z-[-1] sm:z-auto sm:justify-end 
        absolute sm:static bg-black/5 sm:bg-transparent top-0 sm:top-auto 
        left-0 sm:left-auto py-20 sm:py-0 h-screen sm:h-auto ease-in sm:ease-linear duration-300 sm:duration-0`}>
          <li className='p-5'><Link href="/">Home</Link></li>
          <li className='p-5'><Link href="/about">About</Link></li>
          <li className='p-5'><Link href="/projects">projects</Link></li>
          <li className='p-5'><Link href="/contacts">Contact</Link></li>
        </ul>
      </nav>
    </header>
  )
}

4 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 10/6/2023 in #front-end

defaut Value of width in certain div

can anyone tell me what is the default width of a certain div? because i want to use

w-full

w-full

className on my <ul> below 640px and set it to default above 640px, im using tailwind btw

2 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 10/4/2023 in #front-end

Best Practice NavBar?

Is this a good practice when creating a responsive navBar? Im creating another nav inside a nav for mobile screens.

<div>
  <nav>
    {/* Logo */}
    <img/>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  
  {/* Mobile Nav burger menu */}
  <div className="burgerMenu"></div>

  {/* Mobile Nav */}
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>

  </nav>
</div>

<div>
  <nav>
    {/* Logo */}
    <img/>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  
  {/* Mobile Nav burger menu */}
  <div className="burgerMenu"></div>

  {/* Mobile Nav */}
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>

  </nav>
</div>

12 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 10/4/2023 in #front-end

UseState() and useEffect()

why countdown example in useState() doesnt need useEffect()? but when it comes to like changing a textcolor you need both useState() and useEffect()?

8 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 10/3/2023 in #front-end

web page lines in nextJS

6 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 8/10/2023 in #front-end

Vuetify grid

2 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 4/15/2023 in #front-end

modifying Array and outputting the modified version

12 replies

KPCKevin Powell - Community

•Created by Dev_zxc on 4/8/2023 in #front-end

I am trying to learn react, but the new react is now recommending to use next.js

Is watching and learning react that teaches the old way "create-react-app" now irrelevant? i mean the new docs now recommends to use next.js. Im currently watching a web developer course 2023 at udemy but the way it teaches the react is using the npx create-react-app. I am now worried that i might be unable to use what im going to learn, or am i just worrying too much?

9 replies

Gaming

Programming