submenu component

Author: AlexBachurin

src/App.js

@@ -2,12 +2,14 @@ import React from "react";
 import Navbar from "./components/Navbar";
 import Sidebar from "./components/Sidebar";
 import Main from "./components/Main";
+import Submenu from "./components/Submenu";
 
 function App() {
   return (
     <>
       <Navbar />
       <Sidebar />
+      <Submenu />
       <Main />
     </>
   );

src/components/Navbar.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { FaBars } from 'react-icons/fa'
 import { useGlobalContext } from '../context';
 const Navbar = () => {
-    const { sublinks, openSidebar } = useGlobalContext();
+    const { sublinks, openSidebar, showSubmenu, closeSubmenu } = useGlobalContext();
     return (
         <nav className="nav">
             <div className="nav-center">
@@ -16,7 +16,7 @@ const Navbar = () => {
                         const { page } = link;
                         return (
                             <li key={index}>
-                                <button className="link-btn">{page}</button>
+                                <button onMouseOver={showSubmenu} className="link-btn">{page}</button>
                             </li>
                         )
                     })}

src/components/Submenu.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useGlobalContext } from '../context'
+const Submenu = () => {
+    const { isSubmenuOpen } = useGlobalContext();
+    //classname to toggle submenu
+    let clsName = `${isSubmenuOpen ? 'submenu show' : 'submenu'}`
+    return (
+        <aside className={clsName}>
+            <section>
+                <h4>products</h4>
+                <div className="submenu-center">
+                    <a href="#">payment</a>
+                </div>
+            </section>
+        </aside>
+    )
+}
+
+export default Submenu

src/index.css

@@ -252,6 +252,9 @@ Stripe Styles
     letter-spacing: 1px;
     width: 10rem;
   }
+  .link-btn:hover {
+    cursor: pointer;
+  }
 }
 
 /* main media query */