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

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.