https://github.com/pktcodes/strapi-submenus-react-project-v2

Strapi Submenus Project using React
https://github.com/pktcodes/strapi-submenus-react-project-v2

context-api css ecmascript html javascript john-smilga netlify react react-hooks react-icons strapi submenus vite

Last synced: about 1 month ago
JSON representation

Strapi Submenus Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/strapi-submenus-react-project-v2
• Owner: pktcodes
• Created: 2023-08-21T04:52:53.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-09-03T02:33:44.000Z (over 1 year ago)
• Last Synced: 2024-11-08T23:57:55.115Z (3 months ago)
• Topics: context-api, css, ecmascript, html, javascript, john-smilga, netlify, react, react-hooks, react-icons, strapi, submenus, vite
• Language: CSS
• Homepage: https://react-strapi-submenus-v2-prod.netlify.app/
• Size: 34.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Strapi Submenus 🎹

> PROD [Live] : https://react-strapi-submenus-v2-prod.netlify.app/

#### Strapi Submenus consists of a straightforward user interface where there is a

- **Navbar**, **Hero**, **Sidebar** and **Submenu** components.

  

  - **`Navbar`**  consists of the `Strapi` logo, page links where each page link opens submenu.

   - On screens <992px, the Navbar will have *logo*, **Toggle** to open sidebar.

  - **`Hero`** consists of a header and paragraph.

  - **`Sidebar`** will appear as an alternative to Navbar to show the page menus when the user is on mobile view for a flexible user experience along with a **Close** button.

  - Each **`Submenu`** is a page with a menu of `Sublinks` which is implemented in a way with smooth transiton while switching instead of vertical menus.

  - Routes has not been set for any of the Submenus links but **Netlify** handles them as *Page not Found* and buttons are not given any click functionality.

- Data is handled by **`data.jsx`** and styles are handled by **`index.css`**

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm run dev` to start up the development server on default port 5173.

#### Languages

HTML, CSS, JavaScript, ECMAScript, React ~ Context API - Hooks ~ useState, useContext

#### Packages

[Nano ID](https://www.npmjs.com/package/nanoid)

[React Icons](https://www.npmjs.com/package/react-icons)

#### Deployment / Hosting

Netlify

---

_Note: I have developed this project ~ [14] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._