Merge branch 'refs/heads/update/vendor-dashboard-structure' into enha…

…nce/introduce-dataviews-from-dokan-free
getdokan · Jan 17, 2025 · 4d81600 · 4d81600
2 parents c12dd7b + 7a1c587
commit 4d81600
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/includes/functions-dashboard-navigation.php b/includes/functions-dashboard-navigation.php
@@ -259,10 +259,12 @@ function dokan_dashboard_nav( $active_menu = '' ) {
                 }
 
                 $submenu .= sprintf(
-                    '<li class="submenu-item %s"><a href="%s" class="submenu-link">%s %s</a></li>',
+                    /* translators: 1) submenu class, 2) submenu route, 3) submenu icon, 4) submenu title */
+                    '<li class="submenu-item %1$s" data-react-route="%2$s"><a href="%3$s" class="submenu-link">%4$s %5$s</a></li>',
                     $submenu_class,
-                    isset( $sub['url'] ) ? $sub['url'] : dokan_get_navigation_url( "{$key}/{$sub_key}" ),
-                    isset( $sub['icon'] ) ? $sub['icon'] : '<i class="fab fa-staylinked"></i>',
+                    $sub['react_route'] ?? '',
+                    $sub['url'] ?? dokan_get_navigation_url( "{$key}/{$sub_key}" ),
+                    $sub['icon'] ?? '<i class="fab fa-staylinked"></i>',
                     apply_filters( 'dokan_vendor_dashboard_menu_title', $submenu_title, $sub )
                 );
 
@@ -278,11 +280,13 @@ function dokan_dashboard_nav( $active_menu = '' ) {
         }
 
         $menu .= sprintf(
-            '<li class="%s"><a href="%s" target="%s">%s %s</a>%s</li>',
+            /* translators: 1) menu class, 2) menu route, 3) menu url, 4) menu target, 5) menu icon, 6) menu title, 7) submenu */
+            '<li class="%1$s" data-react-route="%2$s"><a href="%3$s" target="%4$s">%5$s %6$s</a>%7$s</li>',
             $class,
-            isset( $item['url'] ) ? $item['url'] : dokan_get_navigation_url( $menu_slug ),
-            isset( $item['target'] ) ? $item['target'] : '_self',
-            isset( $item['icon'] ) ? $item['icon'] : '<i class="fab fa-staylinked"></i>',
+            $item['react_route'] ?? '',
+            $item['url'] ?? dokan_get_navigation_url( $menu_slug ),
+            $item['target'] ?? '_self',
+            $item['icon'] ?? '<i class="fab fa-staylinked"></i>',
             apply_filters( 'dokan_vendor_dashboard_menu_title', $title, $item ),
             $submenu
         );

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '@wordpress/components';
 import { PluginArea } from '@wordpress/plugins';
 import { DokanToaster } from "@getdokan/dokan-ui";
+import { useLocation } from 'react-router-dom';
 
 // Create a ThemeContext
 const ThemeContext = createContext( null );
@@ -43,6 +44,34 @@ interface LayoutProps {
     footerComponent?: JSX.Element|React.ReactNode;
 }
 
+const handleMenuActiveStates = ( currentPath ) => {
+    const menuRoute = currentPath.replace( /^\//, '' ); // Remove leading slash.
+    const menuItem  = document.querySelector( `.dokan-dashboard-menu li[data-react-route='${ menuRoute }']` ) || null;
+
+    // Return if menu item not found.
+    if ( ! menuItem ) {
+        return;
+    }
+
+    document.querySelectorAll( '.dokan-dashboard-menu li' ).forEach( item => {
+        item.classList.remove( 'active' );
+        item.querySelectorAll( '.navigation-submenu li' ).forEach( subItem => {
+            subItem.classList.remove( 'current' );
+        });
+    });
+
+    // Get parent menu item if this is a submenu item.
+    const parentMenuItem = menuItem.closest( '.dokan-dashboard-menu > li' );
+    if ( parentMenuItem ) { // Add `active` to parent menu.
+        parentMenuItem.classList.add( 'active' );
+    }
+
+    const subMenuItem = document.querySelector( `.navigation-submenu li[data-react-route='${ menuRoute }']` );
+    if ( subMenuItem ) { // Add `current` to submenu item.
+        subMenuItem.classList.add( 'current' );
+    }
+};
+
 // Create a Layout component that uses the ThemeProvider
 const Layout = ( {
     children,
@@ -51,6 +80,9 @@ const Layout = ( {
     headerComponent,
     footerComponent,
 }: LayoutProps ) => {
+    const location = useLocation(); // Use the location hook to get the current path.
+    handleMenuActiveStates( location?.pathname );
+
     return (
         <ThemeProvider>
             <SlotFillProvider>