https://github.com/simandrew/responsive-navbar-reactjs

Responsive Navbar
https://github.com/simandrew/responsive-navbar-reactjs

nav-bar navbar react-icons reactjs responsive-design useref-hook

Last synced: 8 months ago
JSON representation

Responsive Navbar

• Host: GitHub
• URL: https://github.com/simandrew/responsive-navbar-reactjs
• Owner: SimAndrew
• Created: 2025-07-29T10:26:44.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-07-31T12:55:58.000Z (8 months ago)
• Last Synced: 2025-07-31T16:22:44.475Z (8 months ago)
• Topics: nav-bar, navbar, react-icons, reactjs, responsive-design, useref-hook
• Language: CSS
• Homepage:
• Size: 52.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Responsive Navbar

### About:

The navigation bar is fully responsive. On larger screens, the navigation links are displayed inline, while on smaller screens, a toggle button appears to show or hide the menu. It includes links to various sections, a logo, and social icons. The project demonstrates the use of React hooks, particularly the `useRef` hook for managing the dropdown menu state.

You can try here: [responsive-nav-bar-reactjs.netlify.app](https://responsive-nav-bar-reactjs.netlify.app/)

### Sample task, photo:

![image](https://github.com/user-attachments/assets/c48c5123-d963-4725-8481-7b70907e69dd)

![image1](https://github.com/user-attachments/assets/86811145-3f48-4c66-80da-a1fd10d50a7a)

![image2](https://github.com/user-attachments/assets/076cd080-3bfc-4ba5-9536-61b9682833d2)

### Technologies, Libraries:

- [React JS](https://react.dev/)

- [Vite JS](https://vitejs.dev/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/)

- [React Icons](https://react-icons.github.io/react-icons/) is a popular open-source library that provides a collection of accessible SVG icons for React applications.

- [useRef Hook](https://react.dev/reference/react/useRef) The useRef Hook in React allows for the creation of mutable "ref" objects that persist across component renders without triggering re-renders when their current property is updated.

### Run the app:

- Clone a project: `git clone`

```

git clone https://github.com/SimAndrew/responsive-navbar-reactjs.git

```

- Open project code in your editor.

- Install the dependencies, enter into the terminal:

```

npm install

```

- Run the project, enter into the terminal:

```

npm run dev

```