Thiết kế website giá rẻ

Question

I’m working on a project with next js

In the navigation component I’m facing an issue.
When the mouse enter is working the icons assigned to the navigation item blinks for 1 second. I have tried everything to my knowledge and still no progress.

Someone please help

'use client'

import React, { useState, ReactNode, memo  } from 'react'
import Label from './ui/Label'

interface NavItemProps {
    open: boolean;
    icon: ReactNode;
    children: ReactNode;
}

const NavItem = memo(({ open, icon, children }: NavItemProps) => (
    <div className='flex space-x-4 w-full hover:bg-gray-200 rounded-md p-3 cursor-pointer'>
        {icon}
        {open && <span>{children}</span>}
    </div>
));

NavItem.displayName = 'NavItem';

function disableDrawer() {
    const inputElement = document.getElementById('drawer-toggle') as HTMLInputElement
    if (inputElement) {
        inputElement.checked = false;
    }
}

const Navigation: React.FC = () => {
    const [open, setOpen] = useState<boolean>(false);

    return (
        <div>
            <div
                className={`fixed h-screen bg-gray-50 ${open ? 'w-56' : 'w-16'} transition-all hidden flex-col justify-between z-10 md:flex`}
                onMouseEnter={() => setOpen(true)}
                onMouseLeave={() => setOpen(false)}
            >
                <div className={`mt-5 m-2 flex-1`}>
                    <ul className='flex flex-col gap-2'>
                        <NavItem open={open} icon={
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='24' height='24' color="#000000" fill="none">
                                <path d="M20.5 15.8278C17.9985 21.756 9.86407 23.4835 5.20143 18.8641C0.629484 14.3347 2.04493 6.12883 8.05653 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                <path d="M17.6831 12.5C19.5708 12.5 20.5146 12.5 21.1241 11.655C21.1469 11.6234 21.1848 11.5667 21.2052 11.5336C21.7527 10.6471 21.4705 9.966 20.9063 8.60378C20.3946 7.36853 19.6447 6.24615 18.6993 5.30073C17.7538 4.35531 16.6315 3.60536 15.3962 3.0937C14.034 2.52946 13.3529 2.24733 12.4664 2.79477C12.4333 2.81523 12.3766 2.85309 12.345 2.87587C11.5 3.4854 11.5 4.42922 11.5 6.31686V8.42748C11.5 10.3473 11.5 11.3072 12.0964 11.9036C12.6928 12.5 13.6527 12.5 15.5725 12.5H17.6831Z" stroke="currentColor" stroke-width="1.5" />
                            </svg>

                        }>
                            <Label>Dashboard</Label>
                        </NavItem>
                        <NavItem open={open} icon={
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='24' height='24' color="#000000" fill="none">
                                <path d="M8 17L8 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M12 14L12 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M16 9L16 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M20 10L20 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M3 3V14C3 17.2998 3 18.9497 4.02513 19.9749C5.05025 21 6.70017 21 10 21H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                            </svg>
                        }>
                           <Label>Report</Label>
                        </NavItem>
                    </ul>
                </div>
                <div className='m-2'>
                    <ul className='flex flex-col gap-2'>
                        <NavItem open={open} icon={
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='24' height='24' color="#000000" fill="none">
                                <path d="M15 17.625C14.9264 19.4769 13.3831 21.0494 11.3156 20.9988C10.8346 20.987 10.2401 20.8194 9.05112 20.484C6.18961 19.6768 3.70555 18.2403 3.1095624.2815C3 14.723 3 14.0944 3 12.8373L3 11.1627C3 9.90561 3 9.27705 3.10956 8.71846C3.70555 5.67965 6.18961 4.24316 9.051124 3.51603C10.2401 3.18064 10.8346 3.01295 11.3156 3.00119C13.3831 2.95061 14.9264 4.52307 15 6.37501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                <path d="M21 12H10M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        }>
                            <Label>Logout</Label>
                        </NavItem>
                    </ul>
                </div>
            </div>
            <div>
                <div className="flex md:hidden ">
                    <input type="checkbox" id="drawer-toggle" className="relative sr-only hidden peer" />
                    <label htmlFor="drawer-toggle" className="relative p-2" >
                        <svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path clipRule="evenodd" fillRule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
                        </svg>
                    </label>
                    <div className="fixed top-0 left-0 z-20 w-64 h-full transition-all duration-500 transform -translate-x-full bg-white shadow-lg peer-checked:translate-x-0">
                        <div className="px-2 py-4 flex flex-col justify-between">
                            <button onClick={disableDrawer} className='absolute top-2 right-2'>X</button>
                            <div className={`mt-5 flex-1`}>
                                <ul className='flex flex-col gap-2'>
                                    <NavItem open={true} icon={
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='24' height='24' color="#000000" fill="none">
                                            <path d="M20.5 15.8278C17.9985 21.756 9.86407 23.4835 5.20143 18.8641C0.629484 14.3347 2.04493 6.12883 8.05653 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                            <path d="M17.6831 12.5C19.5708 12.5 20.5146 12.5 21.1241 11.655C21.1469 11.6234 21.1848 11.5667 21.2052 11.5336C21.7527 10.6471 21.4705 9.966 20.9063 8.60378C20.3946 7.36853 19.6447 6.24615 18.6993 5.30073C17.7538 4.35531 16.6315 3.60536 15.3962 3.0937C14.034 2.52946 13.3529 2.24733 12.4664 2.79477C12.4333 2.81523 12.3766 2.85309 12.345 2.87587C11.5 3.4854 11.5 4.42922 11.5 6.31686V8.42748C11.5 10.3473 11.5 11.3072 12.0964 11.9036C12.6928 12.5 13.6527 12.5 15.5725 12.5H17.6831Z" stroke="currentColor" stroke-width="1.5" />
                                        </svg>


                                    }>
                                        Dashboard
                                    </NavItem>
                                    <NavItem open={true} icon={
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='24' height='24' color="#000000" fill="none">
                                            <path d="M8 17L8 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M12 14L12 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M16 9L16 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M20 10L20 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M3 3V14C3 17.2998 3 18.9497 4.02513 19.9749C5.05025 21 6.70017 21 10 21H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                        </svg>
                                    }>
                                        Report
                                    </NavItem>
                                    <NavItem open={true} icon={
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width='24' height='24' color="#000000" fill="none">
                                            <path d="M15 17.625C14.9264 19.4769 13.3831 21.0494 11.3156 20.9988C10.8346 20.987 10.2401 20.8194 9.05112 20.484C6.18961 19.6768 3.70555 18.2403 3.1095624.2815C3 14.723 3 14.0944 3 12.8373L3 11.1627C3 9.90561 3 9.27705 3.10956 8.71846C3.70555 5.67965 6.18961 4.24316 9.051124 3.51603C10.2401 3.18064 10.8346 3.01295 11.3156 3.00119C13.3831 2.95061 14.9264 4.52307 15 6.37501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                            <path d="M21 12H10M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    }>
                                        Logout
                                    </NavItem>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    )
}

export default Navigation;

The svgs blinks for 1 second and on mouse leave there is no issue

I have tried using the lodash library still the error persists.

Thiết kế website giá rẻ

Danh mục

Blinking issue of icons in Nextjs