new update

src/components/navigation/NavMenu/Display/index.tsx

@@ -1,4 +1,6 @@
+import { useNavHoverContext } from '@helpers/NavHoverContext';
 import { styled } from '@mui/material'
+import { on } from 'events';
 import Image from 'next/image';
 import React from 'react'
 
@@ -29,6 +31,9 @@ const StyledVideo = styled('video')(({ theme }) => ({
 
 
 const Display = () => {
+
+  const { currentUrl, setCurrentUrl } = useNavHoverContext();
+
   return (
     <DisplayWrapper>
       <StyledImage
@@ -44,10 +49,11 @@ const Display = () => {
         }}
       />
       <StyledVideo
-        src='/videos/sample.mp4'
+        src={currentUrl}
         autoPlay
-        loop
         muted
+        loop
+        onError={() => setCurrentUrl('/videos/white_noise.webm')}
       />
     </DisplayWrapper>
   )

src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx

@@ -6,6 +6,7 @@ import { UtilityIconProps } from '@interfaces/SVGProps';
 import svgCommonProps from '@utils/svgCommonProps';
 import Title from './Title';
 import { navbar } from '@theme/constants';
+import { useNavHoverContext } from '@helpers/NavHoverContext';
 
 const Navgroup = styled('ul')(({ theme }) => ({
   position: 'relative',
@@ -101,9 +102,15 @@ const Dot = styled(({ ...props }: UtilityIconProps) => {
   }
 }));
 
-const NavGroups = ({ title, items }: NavGroupsProps) => {
+const NavGroups = ({ title, videoUrl, items }: NavGroupsProps) => {
+
+  const { setCurrentUrl } = useNavHoverContext();
+
   return (
-    <Navgroup >
+    <Navgroup
+      onMouseEnter={setCurrentUrl.bind(null, videoUrl)}
+      onMouseLeave={setCurrentUrl.bind(null, '/videos/white_noise.webm')}
+    >
       <GroupCard
         className='group__card'
         elevation={navbar.elevationHigh}

src/components/navigation/NavMenu/Megamenu/index.tsx

@@ -20,7 +20,11 @@ const Megamenu = () => {
     <MegamenuSection>
       {menuItems.map((item, index) => (
         <React.Fragment key={index}>
-          <NavGropus title={item.title} items={item.items} />
+          <NavGropus
+            title={item.title}
+            videoUrl={item.videoUrl}
+            items={item.items}
+          />
         </React.Fragment>
       ))}
     </MegamenuSection>

src/components/navigation/NavMenu/Megamenu/menuItems.tsx

@@ -1,7 +1,7 @@
 const menuItems = [
   {
     title: 'Business',
-    videoUrl:   '/media/videos/navMenu/business.webm',
+    videoUrl: '/videos/navmenu/business.webm',
     items: [
       {
         title: 'About Us',
@@ -23,7 +23,7 @@ const menuItems = [
   },
   {
     title: 'Media Network',
-    videoUrl:   '/media/videos/navMenu/media-network.webm',
+    videoUrl: '/videos/navmenu/media-network.webm',
     items: [
       {
         title: 'Business and Brands',
@@ -45,7 +45,7 @@ const menuItems = [
   },
   {
     title: 'Education & Teaching',
-    videoUrl:   '/media/videos/navMenu/education-and-teaching.webm',
+    videoUrl: '/videos/navmenu/education-and-teaching.webm',
     items: [
       {
         title: 'Resources',
@@ -63,7 +63,7 @@ const menuItems = [
   },
   {
     title: 'Collaborators',
-    videoUrl:   '/media/videos/navMenu/collaborators.webm',
+    videoUrl: '/videos/navmenu/collaborators.webm',
     items: [
       {
         title: 'Explorers',
@@ -77,7 +77,7 @@ const menuItems = [
   },
   {
     title: 'Partners',
-    videoUrl:   '/media/videos/navMenu/partners.webm',
+    videoUrl: '/videos/navmenu/partners.webm',
     items: [
       {
         title: 'Corporate & Foundations',
@@ -91,7 +91,7 @@ const menuItems = [
   },
   {
     title: 'Commercial',
-    videoUrl:   '/media/videos/navMenu/commercial.webm',
+    videoUrl: '/videos/navmenu/commercial.webm',
     items: [
       {
         title: 'Advertise with Us',

src/components/navigation/NavMenu/index.tsx

@@ -9,6 +9,7 @@ import Copyright from './Copyright';
 import Settings from './Settings';
 import Legal from './Legal';
 import Megamenu from './Megamenu';
+import { NavHoverProvider } from '@helpers/NavHoverContext';
 
 const NavigationWrapper = styled(Card)<NavigationCardProps>(({ theme, open }) => ({
   ...theme.PageWrapperProps as any,
@@ -52,14 +53,16 @@ const NavMenu = () => {
       open={useNavigationMenuState().isOpen}
       elevation={navbar.elevationHigh}
     >
-      <NavigationContent>
-        <Display />
-        <Megamenu />
-        <Contact />
-        <Copyright />
-        <Settings />
-        <Legal />
-      </NavigationContent>
+      <NavHoverProvider>
+        <NavigationContent>
+          <Display />
+          <Megamenu />
+          <Contact />
+          <Copyright />
+          <Settings />
+          <Legal />
+        </NavigationContent>
+      </NavHoverProvider>
     </NavigationWrapper>
   )
 };

src/helpers/NavHoverContext.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, useContext } from "react";
+
+export type NavHoverContextType = {
+  currentUrl: string;
+  setCurrentUrl: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const NavHoverContext = createContext<NavHoverContextType>(
+  null as unknown as NavHoverContextType
+);
+
+export const useNavHoverContext = () => useContext(NavHoverContext);
+
+export const NavHoverProvider = (
+  {
+    children
+  }: {
+    children: React.ReactNode
+  }
+) => {
+  const [currentUrl, setCurrentUrl] = React.useState('');
+  return <NavHoverContext.Provider value={{ currentUrl, setCurrentUrl }}>{children}</NavHoverContext.Provider>
+};

src/interfaces/NavGropusProps.ts

@@ -2,4 +2,5 @@
 export interface NavGroupsProps {
   title: string;
   items: any[];
+  videoUrl: string;
 };