This article is a great resource for anyone interested in building a chatbot using GPT-3's API and Next.js. The step-by-step approach makes it easy to follow along and the examples provided are very helpful. Great work on this informative post, Awa!

In this article, I am going to walk you through building a chatbot in Next.js using OpenAI's GPT-3 API.

How to build a GPT-3 powered chatbot in Next.js

GPT-3

ChatGPT

OpenAI

Chatbots

Chakra UI

Next.js

Before we begin, make sure you have the following prerequisites:

1. A Next.js application. If you don't have one, you can create a new Next.js app using the following command:

```npx create-next-app my-app```

2. Chakra UI configured on the Next.js application. You can follow this link to set it up: [Next.js Chakra installation guide](https://chakra-ui.com/getting-started/nextjs-guide)

3. Configure a Chakra UI theme for the application. You can do that by creating a `theme.js` file in the `src` folder and pasting the following code:

```ts
// src/theme.ts
import { extendTheme, theme } from "@chakra-ui/react";

const colors = {
  "main-bg": "#0E1012",

  "white-text": "#E8E8EA",
  "subtle-text": "#9B9B9B",

  "column-bg": "#16181D",
  "column-header-bg": "#1A1D23",

  "card-bg": "#242731",
  "card-border": "#2D313E"
};

const fonts = {
  heading: "Poppins",
  body: "Poppins",
};

export default extendTheme({
  ...theme,
  colors,
  fonts,
});
```
Make sure you update `_app.js` accordingly.

Having addressed the prerequisites, let's move on to designing the page in the `pages/index.js` file.
But before that, you need to install `react-beautiful-dnd` by running the command:
```yarn add react-beautiful-dnd```

## Setting up the context
The first step in using `react-beautiful-dnd` is to wrap the elements that will handle the drag and drop in a `DragDropContext` component. This component provides the context that the `Draggable` and `Droppable` components will use to interact with each other. Here's an example of how to set up the `DragDropContext`:
```tsx
// pages/index.js
import { DragDropContext } from 'react-beautiful-dnd';

function Home() {
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      {/* Your columns go here */}
    </DragDropContext>
  );
}
```
You need to pass an `onDragEnd` callback function that will be called when a drag-and-drop event is completed. In this callback function, you can update the state of your application with the new order of the items.
```ts
function onDragEnd(result) {
  // Update the state of your application with the new order of the items
  // after a drag-and-drop event
}
```

## Creating a droppable area
The next step is to create a droppable area where items can be dropped. This is done using the Droppable component. The Droppable component takes a `droppableId` prop that is used to identify the droppable area. 

Inside our `pages/index.js`, we are going to update the component by adding code for the droppable area:

```tsx
// pages/index.js
import { useState } from 'react';
import { Flex, Heading, Text } from "@chakra-ui/react";
import { Droppable } from 'react-beautiful-dnd';

function Home() {
const [state, setState] = useState(initialData);

function onDragEnd(result) {
  // Update the state of your application with the new order of the items
  // after a drag-and-drop event
}

 return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Flex
        flexDir="column"
        bg="main-bg"
        minH="100vh"
        w="full"
        color="white-text"
        pb="2rem"
      >
        <Flex py="4rem" flexDir="column" align="center">
          <Heading fontSize="3xl" fontWeight={600}>
            React Beautiful Drag and Drop
          </Heading>
          <Text fontSize="20px" fontWeight={600} color="subtle-text">
            react-beautiful-dnd
          </Text>
        </Flex>

        <Flex justify="space-between" px="4rem">
          {state.columnOrder.map((columnId) => {
            const column = state.columns[columnId];
            const tasks = column.taskIds.map((taskId) => state.tasks[taskId]);

            return <Droppable droppableId={column.id}>
                {(droppableProvided, droppableSnapshot) => (
                     {/* Your droppable code here */}
                )}
            </Droppable >
          })}
        </Flex>
      </Flex>
    </DragDropContext>
  );
}

const initialData = {
  tasks: {},
  columns: {
    "column-1": {},
    "column-2": {},
    "column-3": {},
  },
  // Facilitate reordering of the columns
  columnOrder: ["column-1", "column-2", "column-3"],
};
```

## Creating draggable items
The final step is to make the items in the list draggable. This is done using the `Draggable` component. The Draggable component takes a `draggableId` prop that is used to identify the item and an `index` prop that is used to specify the item's position in the list. 

To do this, we are going to create a `Column` component to render the `TODO`, `IN-PROGRESS`, and the `COMPLETED` columns respectively. 
```tsx
// src/components/Column.js
import { Flex, Text } from "@chakra-ui/react";
import React from "react";
import { Draggable, Droppable } from "react-beautiful-dnd";

const Column = ({ column, tasks }) => {
  return (
    <Flex rounded="3px" bg="column-bg" w="400px" h="620px" flexDir="column">
      <Flex
        align="center"
        h="60px"
        bg="column-header-bg"
        rounded="3px 3px 0 0"
        px="1.5rem"
        mb="1.5rem"
      >
        <Text fontSize="17px" fontWeight={600} color="subtle-text">
          {column.title}
        </Text>
      </Flex>

      <Droppable droppableId={column.id}>
        {(droppableProvided, droppableSnapshot) => (
          <Flex
            px="1.5rem"
            flex={1}
            flexDir="column"
            ref={droppableProvided.innerRef}
            {...droppableProvided.droppableProps}
          >
            {tasks.map((task, index) => (
              <Draggable key={task.id} draggableId={`${task.id}`} index={index}>
                {(draggableProvided, draggableSnapshot) => (
                  <Flex
                    mb="1rem"
                    h="72px"
                    bg="card-bg"
                    rounded="3px"
                    p="1.5rem"
                    outline="2px solid"
                    outlineColor={
                      draggableSnapshot.isDragging
                        ? "card-border"
                        : "transparent"
                    }
                    boxShadow={
                      draggableSnapshot.isDragging
                        ? "0 5px 10px rgba(0, 0, 0, 0.6)"
                        : "unset"
                    }
                    ref={draggableProvided.innerRef}
                    {...draggableProvided.draggableProps}
                    {...draggableProvided.dragHandleProps}
                  >
                    <Text>{task.content}</Text>
                  </Flex>
                )}
              </Draggable>
            ))}
          </Flex>
        )}
      </Droppable>
    </Flex>
  );
};

export default Column;
```
In the above code, we're using the map function to loop through the tasks and creating a Draggable component for each task. We're also using the `key` and `index` props to identify the item and its position in the list.

To wrap up, at the end your `pages/index.js` should have the following code:
```tsx
// pages/index.js
import { Flex, Heading, Text } from "@chakra-ui/react";
import dynamic from "next/dynamic";
import React, { useState } from "react";
import { DragDropContext } from "react-beautiful-dnd";

const Column = dynamic(() => import("../src/Column"), { ssr: false });

const reorderColumnList = (sourceCol, startIndex, endIndex) => {
  const newTaskIds = Array.from(sourceCol.taskIds);
  const [removed] = newTaskIds.splice(startIndex, 1);
  newTaskIds.splice(endIndex, 0, removed);

  const newColumn = {
    ...sourceCol,
    taskIds: newTaskIds,
  };

  return newColumn;
};

export default function Home() {
  const [state, setState] = useState(initialData);

  const onDragEnd = (result) => {
    const { destination, source } = result;

    // If user tries to drop in an unknown destination
    if (!destination) return;

    // if the user drags and drops back in the same position
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    // If the user drops within the same column but in a different positoin
    const sourceCol = state.columns[source.droppableId];
    const destinationCol = state.columns[destination.droppableId];

    if (sourceCol.id === destinationCol.id) {
      const newColumn = reorderColumnList(
        sourceCol,
        source.index,
        destination.index
      );

      const newState = {
        ...state,
        columns: {
          ...state.columns,
          [newColumn.id]: newColumn,
        },
      };
      setState(newState);
      return;
    }

    // If the user moves from one column to another
    const startTaskIds = Array.from(sourceCol.taskIds);
    const [removed] = startTaskIds.splice(source.index, 1);
    const newStartCol = {
      ...sourceCol,
      taskIds: startTaskIds,
    };

    const endTaskIds = Array.from(destinationCol.taskIds);
    endTaskIds.splice(destination.index, 0, removed);
    const newEndCol = {
      ...destinationCol,
      taskIds: endTaskIds,
    };

    const newState = {
      ...state,
      columns: {
        ...state.columns,
        [newStartCol.id]: newStartCol,
        [newEndCol.id]: newEndCol,
      },
    };

    setState(newState);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Flex
        flexDir="column"
        bg="main-bg"
        minH="100vh"
        w="full"
        color="white-text"
        pb="2rem"
      >
        <Flex py="4rem" flexDir="column" align="center">
          <Heading fontSize="3xl" fontWeight={600}>
            React Beautiful Drag and Drop
          </Heading>
          <Text fontSize="20px" fontWeight={600} color="subtle-text">
            react-beautiful-dnd
          </Text>
        </Flex>

        <Flex justify="space-between" px="4rem">
          {state.columnOrder.map((columnId) => {
            const column = state.columns[columnId];
            const tasks = column.taskIds.map((taskId) => state.tasks[taskId]);

            return <Column key={column.id} column={column} tasks={tasks} />;
          })}
        </Flex>
      </Flex>
    </DragDropContext>
  );
}

const initialData = {
  tasks: {
    1: { id: 1, content: "Configure Next.js application" },
    2: { id: 2, content: "Configure Next.js and tailwind " },
    3: { id: 3, content: "Create sidebar navigation menu" },
    4: { id: 4, content: "Create page footer" },
    5: { id: 5, content: "Create page navigation menu" },
    6: { id: 6, content: "Create page layout" },
  },
  columns: {
    "column-1": {
      id: "column-1",
      title: "TO-DO",
      taskIds: [1, 2, 3, 4, 5, 6],
    },
    "column-2": {
      id: "column-2",
      title: "IN-PROGRESS",
      taskIds: [],
    },
    "column-3": {
      id: "column-3",
      title: "COMPLETED",
      taskIds: [],
    },
  },
  // Facilitate reordering of the columns
  columnOrder: ["column-1", "column-2", "column-3"],
};
```

You can now run the command below to test the app. 

```yarn dev```

You should have something similar to the screenshot below.
![Multi-list drag and drop](https://user-images.githubusercontent.com/98325878/213882144-e382caf0-85ba-4dcb-9f94-ee41ee083edb.png)

## Conclusion
`react-beautiful-dnd` is a powerful and easy-to-use library for implementing drag-and-drop functionality in a React application. By following the steps outlined in this article, you can quickly add drag-and-drop functionality to a list of items in your application.

If you found this tutorial helpful and want to stay up-to-date with the latest web development trends and techniques, be sure to subscribe to our newsletter or our channel at [FullStack Matery](https://www.youtube.com/@fullstackmastery). We will notify you of new articles, tech updates, and early access to exclusive content. Don't miss out on the opportunity to grow as a developer and stay ahead of the curve!

Lastly, let me know what you think about the article by leaving a comment below.

Thanks!

In this article, we will be building a Multi-List Drag and Drop To-Do App using React-beautiful-dnd in Next.js/Chakra UI.

Build a Multi-List Drag and Drop To-Do App Using React-beautiful-dnd

JavaScript

React.js

Styled-components

Is the callback working after the deployment? am getting 404 not found. In local its working fine.

[Auth.js](https://authjs.dev/) (formerly [**NextAuth**](https://next-auth.js.org/)) is a popular library that makes it easy to add third-party authentication (e.g Google login, GitHub login, etc.) to your Next.js application.

In this tutorial, we will learn how to implement Google login using nextAuth.

Before we begin, make sure you have the following prerequisites:
- A Next.js application. If you don't have one, you can create a new Next.js app using the following command:
```
npx create-next-app my-app
```
- A Google account. If you don't have one, you can sign up for a new account at [https://accounts.google.com](https://accounts.google.com).

Now, let's get started.

## Configuring NextAuth.js

**Step 1: Install `next-auth`**

Navigate to your Next.js project directory in your terminal and run the following command:
```
npm install next-auth
```

**Step 2: Setup a Google Oauth client**

To use Google login with nextAuth, you need to set up a Google OAuth client on the google cloud console. To do this, follow these steps:

1. Go to the [Google Cloud Console](https://console.cloud.google.com).
2. Click the project drop-down and select or create the project that you want to use for this tutorial.
3. Click the hamburger menu and select **APIs & Services** > **Credentials**.
4. On the Credentials page, click **Create credentials** > **OAuth client ID**.
5. Select Web application as the application type.
6. In the Authorized JavaScript origins field, enter the URL of your Next.js application. For example, if your app is running on localhost, you would enter `http://localhost:3000`.
7. In the Authorized redirect URIs field, enter the URL of your Next.js application with `/api/auth/callback/google` appended to it. For example, if your app is running on localhost, you would enter `http://localhost:3000/api/auth/callback/google`.
8. Click **Create**.
9. On the OAuth client page, make a note of the client ID and client secret. You will need these later.

**Step 3: Add a next.js serverless function to handle Google login**

We need to add a serverless function to handle the Google Oauth process. So we're going to create a `pages/api/auth/[...nextauth].js` file in the project directory with the following code:

```tsx
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
})
```
In this code, we are using the Google provider provided by the `next-auth` package to handle the Google login process.

We are also using environment variables to store the Google client ID and client secret obtained in **Step 2**.

And behind the scenes, the necessary Google OAuth's API routes are created within `pages/api/auth/*` to handle all auth API requests to: `/api/auth/callback`, `/api/auth/signIn`, `/api/auth/signOut`, etc.

**Step 4: Set up environment variables**

To set up the environment variables, create a new file called `.env.local` in the root directory and paste the following code in it:
```
# .env.local
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

```
Replace `your-google-client-id` and `your-google-client-secret` with the client ID and client secret obtained in **Step 2**.

Step 5: Wrap the `_app.tsx` component with `SessionProvider`
To use the `useSession` hook, you must first wrap your application with the `<SessionProvider />` component at the top level to expose the session context.

```tsx
import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
```
The `<SessionProvider />` component also ensures that the session is kept up to date and synchronized across browser tabs and windows.

**Step 5: Add a login button to your Next.js app**

Now that the serverless function is set up, you can add a login button to your Next.js app. To do this, add the following code to your app:

```tsx
// GoogleSignInButton.tsx
import React from "react";
import { useSession, signIn, signOut } from "next-auth/react";
import { useRouter } from "next/router";

export default function LoginButton() {
  const { data: session, status } = useSession();
  const router = useRouter();

  if (status === 'authenticated') {
    return (
      <button
        className="font-medium text-lg border-none"
        onClick={() => signOut()}
      >
        Sign out
      </button>
    );
  }
  return (
    <button
      className="font-medium text-lg border-none"
      onClick={() => signIn("google", { callbackUrl: router.asPath })}
    >
      Sign in with Google
    </button>
  );
}
```

This code adds a login button that redirects the user to the `/api/auth/signin` route when clicked.

**Step 7: Protect Next.js API routes**

To protect Next.js API routes when using next-auth for login, `getSession` function can be used, provided the API call is made from the client side and not the server side.

For server-side calls, it is recommended to use `unstable_getServerSession` instead. Check out [getSession](https://authjs.dev/reference/utilities#getsession) and [unstable_getServerSession](https://next-auth.js.org/configuration/nextjs#unstable_getserversession) to know more about these functions.

The `getSession` function returns a session object from which we can determine whether the user is logged in or not.

```tsx
import { getSession } from "next-auth/react"
import { NextApiRequest, NextApiResponse } from "next";

export default async function createPost(req: NextApiRequest, res: NextApiResponse) {
  const session = await getSession({ req })

  if (session) {
    return res.send({
      title: "New post title",
      content: "The content"
    })
  } else {
    return res.send({ error: "Unauthorized access!" })
  }
}
```

**Step 6: Test the login flow**

Now that everything is set up, you can test the login flow. Start your Next.js app and click the login button. You should be redirected to the Google authorization page and back to your app after you've chosen the email you want to log in with.
This is how it will look:
![google oauth](https://user-images.githubusercontent.com/29434750/210908047-8789590a-5258-43cd-bf7b-ac6cbb38c20a.png)

You are redirected to the screenshot below after clicking "Sign in with Google"
![google login](https://user-images.githubusercontent.com/29434750/210908180-2dc12b63-db37-419c-a4e3-e04b41da76a6.png)

## Conclusion
In conclusion, adding a Google login to your Next.js app with nextAuth is a total breeze! With just a few simple steps, you'll be able to give your users the option to log in with their Google account and keep your routes safe from unauthorized users.

If you found this tutorial helpful and want to stay up-to-date with the latest web development trends and techniques, be sure to subscribe to our newsletter. We will notify you of new articles, tech updates, and early access to exclusive content. Don't miss out on the opportunity to grow as a developer and stay ahead of the curve!

Thanks!

---
.

**Further reading**
- [NextAuth.js tutorial from the documentation](https://authjs.dev/getting-started/oauth-tutorial)
- [NextAuth.js for next.js client-side authentication](https://blog.logrocket.com/nextauth-js-for-next-js-client-side-authentication/)

In this article, we're going to leverage NextAuth.js (Auth.js) to implement google login and protected routes.

How to implement Google login and protected routes using NextAuth

Tailwind CSS

In this article, I'm going to show you how to check if your application is opened in an active tab.

We are going to leverage the `focus` and `blur` events. Focus event fires when an element receives focus, and in this case, it's fired when the user switches to the tab that has the website.

`blur` on the other hand, is the opposite of `focus` in that, it only gets fired when the user changes the tab or opens a different tab.

We will use a state variable to indicate that the tab has focus, or that it's the active tab.

Go to your `App.js` component and add the following code snippet
```js
import {useEffect, useState} from 'react';

export default function App() {
  const [tabHasFocus, setTabHasFocus] = useState(true);

  useEffect(() => {
    const handleFocus = () => {
      setTabHasFocus(true);
    };

    const handleBlur = () => {
      setTabHasFocus(false);
    };

    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

    // Clean up
    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return (
    <div>
      {tabHasFocus ? (
        <h2>Tab is active</h2>
      ) : (
        <h2>Tab is in-active</h2>
      )}
    </div>
  );
}
```
- `handleFocus` is called when the user switches to the tab that has your website, as a result, the `tabHasFocus` state is updated to `true`.
- `handleBlur` is called when they switch tabs or minimize the browser. Similarly, the `tabHasFocus` gets updated to `false`.

## Conclusion
Finally, this helps us determine whether our application is in the active tab or not.

If this was helpful, don't forget to subscribe to my newsletter to stay up to date with latest content.

Thanks!

How to know if your application is open in the open/focused or close/inactive browser tab using React.js Hooks.

Check if your application is open in an active browser tab

This article covers how to implement buffering in a custom react video player, including playback rate, seeking, and pause/play features.

Implement buffering in React – A complete guide

In order to build a website with a good user experience, there are a lot of things to consider, one of which is how responsive your site will be. Your site can be responsive and still have a bad user experience. But how do you solve this?
In this article, we will go through building a responsive hamburger navigation menu from scratch in Reactjs, using styled-component for styling. To do this, there are a few things to handle.
## Setup Create app
In your terminal, run the following scripts. Then open `http://localhost:3000` to see your app.
```
npx create-react-app responsive-nabar
cd responsive-nabar
npm start
```
- Running `npx create-react-app responsive-nabar` creates a new react application in the `responsive-navbar` directory.
- `cd responsive-nabar` changes directory into the `responsive-nabar` directory, which is where the new react application was created.
- Lastly, `npm start` gets our react server running
While your app is running, install styled components using the following scripts.
```ts
npm install styled-components
```
Go to your root directory and clear out the create react app files we won't be needing. Your directory structure should look exactly like this
![directory-structure](https://user-images.githubusercontent.com/98325878/183677064-29901c77-2924-47f8-a048-7f87eeae1706.png)

Open your index.html and add the following code directly below the <title> tag.
```html
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
</style>
```

This sets the box-sizing property on all elements to `border-box`, and ensures that no element on any of the pages has default padding and/or margin applied to it.

Update your App.js file with the following code

```js
// App.jsx
import React from 'react';
function App() {
    return (
      <div className="App">
         App    
      </div>
  );
}
export default App;
```

Your RightNav.jsx, Burger.jsx, and Navbar.jsx files should have the respective codes below

```js
// App.jsx
import React from 'react';
import Navbar from './Nav/Navbar';

function App() {
  return (
    <div className="App">
      <Navbar />
      App
    </div>
  );
}

export default App;
```

```js
// RightNave.jsx
import React from 'react';

const RightNav = () => {
  return (
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </ul>
  )
}

export default RightNav
```

```js
// Burger.jsx
import React, { useState } from 'react';
import styled from 'styled-components';
import RightNav from './RightNav';

const Burger = () => {
  const [open, setOpen] = useState(false)
  
  return (
    <React.Fragment>
      <div>
        <div />
        <div />
        <div />
      </div>
      <RightNav open={open}/>
    </React.Fragment>
  )
};

export default Burger;
```

```js
// Navbar.jsx
import React from 'react';
import Burger from './Burger';

const Nav = styled.nav`
  // css goes here
`;
 
const Navbar = () => {
  return (
    <Nav>
      <div className="logo">
        Nav Bar
      </div>
      <Burger />
    </Nav>
  )
}

export default Navbar
```

After this, your app should look as shown below with no styling yet.
![eg](https://user-images.githubusercontent.com/98325878/183678005-911ffe83-c69e-4401-92ec-6c65147bc25d.png)


### Let's style our navigation menu.
Given that we already install styled-components, our RightNav.jsx, Burger.jsx, and Navbar.jsx components will finally look as follows.

```js
import React, { useState } from 'react';
import styled from 'styled-components';
import RightNav from './RightNav';

const StyledBurger = styled.div`
  width: 2rem;
  height: 2rem;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 20;
  display: none;

  @media (max-width: 768px) {
    display: flex;
    justify-content: space-around;
    flex-flow: column nowrap;
  }

  div {
    width: 2rem;
    height: 0.25rem;
    background-color: ${({ open }) => open ? '#ccc' : '#333'};
    border-radius: 10px;
    transform-origin: 1px;
    transition: all 0.3s linear;

    &:nth-child(1) {
      transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
    }

    &:nth-child(2) {
      transform: ${({ open }) => open ? 'translateX(100%)' : 'translateX(0)'};
      opacity: ${({ open }) => open ? 0 : 1};
    }

    &:nth-child(3) {
      transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
    }
  }
`;

const Burger = () => {
  const [open, setOpen] = useState(false)
  
  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>
      <RightNav open={open}/>
    </>
  )
}

export default Burger
```

```js
import React from 'react';
import styled from 'styled-components';
import Burger from './Burger';

const Nav = styled.nav`
  width: 100%;
  height: 55px;
  border-bottom: 2px solid #f1f1f1;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;

  .logo {
    padding: 15px 0;
  }
`

const Navbar = () => {
  return (
    <Nav>
      <div className="logo">
        Nav Bar
      </div>
      <Burger />
    </Nav>
  )
}

export default Navbar
```

```js
import React from 'react';
import styled from 'styled-components';

const Ul = styled.ul`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0D2538;
    position: fixed;
    transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  }
`;

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav
```

```js
import React, { useState } from 'react';
import styled from 'styled-components';
import RightNav from './RightNav';

const StyledBurger = styled.div`
  width: 2rem;
  height: 2rem;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 20;
  display: none;

  @media (max-width: 768px) {
    display: flex;
    justify-content: space-around;
    flex-flow: column nowrap;
  }

  div {
    width: 2rem;
    height: 0.25rem;
    background-color: ${({ open }) => open ? '#ccc' : '#333'};
    border-radius: 10px;
    transform-origin: 1px;
    transition: all 0.3s linear;

    &:nth-child(1) {
      transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
    }

    &:nth-child(2) {
      transform: ${({ open }) => open ? 'translateX(100%)' : 'translateX(0)'};
      opacity: ${({ open }) => open ? 0 : 1};
    }

    &:nth-child(3) {
      transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
    }
  }
`;

const Burger = () => {
  const [open, setOpen] = useState(false)
  
  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>
      <RightNav open={open}/>
    </>
  )
}

export default Burger
```

```js
import React from 'react';
import styled from 'styled-components';
import Burger from './Burger';

const Nav = styled.nav`
  width: 100%;
  height: 55px;
  border-bottom: 2px solid #f1f1f1;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;

  .logo {
    padding: 15px 0;
  }
`

const Navbar = () => {
  return (
    <Nav>
      <div className="logo">
        Nav Bar
      </div>
      <Burger />
    </Nav>
  )
}

export default Navbar
```

```js
import React from 'react';
import styled from 'styled-components';

const Ul = styled.ul`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0D2538;
    position: fixed;
    transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  }
`;

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav
```

```js
import React, { useState } from 'react';
import styled from 'styled-components';
import RightNav from './RightNav';

const StyledBurger = styled.div`
  width: 2rem;
  height: 2rem;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 20;
  display: none;

  @media (max-width: 768px) {
    display: flex;
    justify-content: space-around;
    flex-flow: column nowrap;
  }

  div {
    width: 2rem;
    height: 0.25rem;
    background-color: ${({ open }) => open ? '#ccc' : '#333'};
    border-radius: 10px;
    transform-origin: 1px;
    transition: all 0.3s linear;

    &:nth-child(1) {
      transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
    }

    &:nth-child(2) {
      transform: ${({ open }) => open ? 'translateX(100%)' : 'translateX(0)'};
      opacity: ${({ open }) => open ? 0 : 1};
    }

    &:nth-child(3) {
      transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
    }
  }
`;

const Burger = () => {
  const [open, setOpen] = useState(false)
  
  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>
      <RightNav open={open}/>
    </>
  )
}

export default Burger
```

```js
import React from 'react';
import styled from 'styled-components';
import Burger from './Burger';

const Nav = styled.nav`
  width: 100%;
  height: 55px;
  border-bottom: 2px solid #f1f1f1;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;

  .logo {
    padding: 15px 0;
  }
`

const Navbar = () => {
  return (
    <Nav>
      <div className="logo">
        Nav Bar
      </div>
      <Burger />
    </Nav>
  )
}

export default Navbar
```

```js
import React from 'react';
import styled from 'styled-components';

const Ul = styled.ul`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0D2538;
    position: fixed;
    transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;
    transition: transform 0.3s ease-in-out;

    li {
      color: #fff;
    }
  }
`;

const RightNav = ({ open }) => {
  return (
    <Ul open={open}>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign In</li>
      <li>Sign Up</li>
    </Ul>
  )
}

export default RightNav
```

You can now check your app on the browser and it should look like this
![ex1](https://user-images.githubusercontent.com/98325878/183679151-bd0fd6df-5377-486b-94b3-6c8f4f121e51.png)
![ex2](https://user-images.githubusercontent.com/98325878/183679161-29187956-538d-46bd-902b-94a2bd56031e.png)

#### Conclusion
Finally, you should have a responsive navigation menu with some nice hamburger animations when clicked. In case you face any problems, you can reference the repository on [GitHub](https://github.com/dieudonneAwa/responsive-navbar). Or, leave a comment in the comment section and I will reply ASAP..

Thanks

In this article, I am going to walk you through building a hamburger responsive navigation
menu from scratch using Reactjs and Styled-Components. To do this, there are a few things
to handle.

Responsive hamburger navigation menu — ReactJS and Styled Components

Node.js

PostgreSQL

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

Mongoose

Sequelize is a modern TypeScript and Node.js ORM for Oracle, Postgres, MySQL, MariaDB, SQLite and SQL Server, and more. Featuring solid transaction support, relations, eager and lazy loading, read replication and more.

Sequelize

Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

ChatGPT is a chatbot developed by OpenAI and launched in November 2022. It is built on top of OpenAI's GPT-3 family of large language models and has been fine-tuned using both supervised and reinforcement learning techniques.

Generative Pre-trained Transformer 3 is an autoregressive language model released in 2020 that uses deep learning to produce human-like text. Given an initial text as prompt, it will produce text that continues the prompt.

OpenAI is an American artificial intelligence research laboratory consisting of the non-profit OpenAI Incorporated and its for-profit subsidiary corporation OpenAI Limited Partnership. OpenAI conducts AI research with the declared intention of promoting and developing a friendly AI

A chatbot or chatterbot is a software application used to conduct an online chat conversation via text or text-to-speech, in lieu of providing direct contact with a live human agent.

Awa's Blog

How to build a GPT-3 powered chatbot in Next.js

Build a Multi-List Drag and Drop To-Do App Using React-beautiful-dnd

How to implement Google login and protected routes using NextAuth

Check if your application is open in an active browser tab

Implement buffering in React – A complete guide

Responsive hamburger navigation menu — ReactJS and Styled Components