Merge branch 'nextjs' of https://github.com/flexmonster/pivot-react into nextjs

Author: iansadovy

typescript-next/src/UIElements/SideMenu.tsx

@@ -3,45 +3,48 @@ import React from "react";
 
 export default class SideMenu extends React.Component {
 
-    render () {
+    activeClassName(pathname: string) : string {
+        return window.location.pathname == pathname ? "router-link-exact-active" : "";
+    }
+    render() {
         return (
-                <div className="side-menu">
-                    <ol>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/pivot-table-demo">PIVOT TABLE DEMO</a>
-                        </li>
-                    </ol>
-                    <div className="sub-title">API and Events</div>
-                    <ol>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/handling-events">HANDLING EVENTS</a>
-                        </li>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/using-api-calls">USING API CALLS</a>
-                        </li>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/updating-data">UPDATING DATA</a>
-                        </li>
-                    </ol>
-                    <div className="sub-title">Customization</div>
-                    <ol>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/customizing-toolbar">CUSTOMIZING THE TOOLBAR</a>
-                        </li>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/customizing-grid">CUSTOMIZING THE GRID</a>
-                        </li>
-                    </ol>
-                    <div className="sub-title">Integration</div>
-                    <ol>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/with-highcharts">WITH HIGHCHARTS</a>
-                        </li>
-                        <li className="tab-button">
-                            <a className="router-link-exact-active" href="/with-amcharts">WITH AMCHARTS</a>
-                        </li>
-                    </ol>
-                </div>
+            <div className="side-menu">
+                <ol>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/pivot-table-demo")} href="/pivot-table-demo">PIVOT TABLE DEMO</a>
+                    </li>
+                </ol>
+                <div className="sub-title">API and Events</div>
+                <ol>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/handling-events")} href="/handling-events">HANDLING EVENTS</a>
+                    </li>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/using-api-calls")} href="/using-api-calls">USING API CALLS</a>
+                    </li>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/updating-data")} href="/updating-data">UPDATING DATA</a>
+                    </li>
+                </ol>
+                <div className="sub-title">Customization</div>
+                <ol>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/customizing-toolbar")} href="/customizing-toolbar">CUSTOMIZING THE TOOLBAR</a>
+                    </li>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/customizing-grid")} href="/customizing-grid">CUSTOMIZING THE GRID</a>
+                    </li>
+                </ol>
+                <div className="sub-title">Integration</div>
+                <ol>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/with-highcharts")} href="/with-highcharts">WITH HIGHCHARTS</a>
+                    </li>
+                    <li className="tab-button">
+                        <a className={this.activeClassName("/with-amcharts")} href="/with-amcharts">WITH AMCHARTS</a>
+                    </li>
+                </ol>
+            </div>
         );
     }
 }

typescript-next/src/app/globals.css

@@ -489,8 +489,8 @@ ul {
 }
 
 .side-menu li a:hover,
-.side-menu li a.router-link-exact-active:active,
-.side-menu li.active a.router-link-exact-active:active {
+.side-menu li a.router-link-exact-active,
+.side-menu li.active a.router-link-exact-active {
     color: #df3800;
 }
 

typescript-next/src/app/layout.tsx

@@ -2,13 +2,11 @@ import './globals.css'
 import TopMenu from '@/UIElements/TopMenu'
 import SideMenu from '@/UIElements/SideMenu'
 import { Inter } from 'next/font/google'
-import { BrowserRouter as Router } from 'react-router-dom';
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Flexmonster Next App',
-
 }
 
 export default function RootLayout({
@@ -22,7 +20,7 @@ export default function RootLayout({
         <div id="app">
           <TopMenu />
           <div className="wrap">
-            <SideMenu /> 
+            <SideMenu/> 
             <div className="pivot-example-container">
               {children}
             </div>