Part 6: Using the Next.js Link component. — Under the components folder, create MyLink.js import Link from 'next/link' import React from 'react' const MyLink = (props) => { let { href, children, active, ...rest } = props return ( <Link href={href}> <button {...rest} className={`${active && 'bg-blue-500'} w-full rounded-md p-2`} href="/account-settings" > {children} </button> </Link> ) } export default…

Part 5: Using the <Layout> component. — To demonstrate navigating to different pages by using the <Link> component it is better to use the <Layout> component. Create a components folder and under the folder, create Layout.js.

Part 4: Create a custom button to control the opening and closing of the menu — In this article, we are going to create our own button to control the opening and closing of the menu. First, we need to add React Recoil. yarn add recoil At the _app.js, import RecoilRoot from Recoil, then use the <RecoilRoot> component to wrap the <Component>. import { RecoilRoot }…

Part 3: Add Transition to the menu. — In this part, we are going to add the Transition to the Menu. To tell an element to render its children directly with no wrapper element, use as={React.Fragment}. Import the Transition from React Headless UI and also import Fragment from React. import { Menu, Transition } from '@headlessui/react' import { Fragment…

Part 2: Add style to make it look like a menu — adding Tailwind CSS and JSON. — In the previous article, the menu does not like a normal menu. In this article, we will add the style and JSON to pretend fetching data from the database to generate the menu. First, add the class to the menu items: <Menu.Items className="focus:outline-none absolute origin-top-left w-56 divide-y divide-gray-100…

Part 1: Install Next.js, Headless UI, and Tailwind CSS — In these few articles, we will create a dropdown menu by using Next.js and Headless UI. First, we need to create the project and install the necessary packages. Create the project by typing: npx create-next-app learn-headless-menu Install Headless UI: yarn add @headlessui/react Install Tailwind CSS: npm install -D tailwindcss postcss…

In this video, we are going to create a simple web3 login that can login with metamask. You will get unlimited access to all source code in the YouTube channel and free Udemy courses by joining the channel. Metamask Authentication with Moralis, Next.js and TailwindCSS Part 1 Create Login component Metamask Authentication with Moralis, Next.js and TailwindCSS Part 2 Install react moralis Metamask Authentication with Moralis, Next.js and TailwindCSS Part 3 Login with Metamask

Part 4: How to log out and display a welcome message if the user has already logged in with metamask. — You will get unlimited access to all source code in the YouTube channel and free Udemy courses by joining the channel. At the index.js, import the useMoralis import { useMoralis } from 'react-moralis' Call the hook inside the app. const { isAuthenticated, logout } = useMoralis() If the “isAuthenticated”…