💄 Use new header desing for NavMenu on PagePanels

packages/app/src/components/PagePanels/index.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import classnames from "classnames"
 import * as antd from "antd"
-import useUrlQueryActiveKey from "hooks/useUrlQueryActiveKey"
 
 import { createIconRender } from "components/Icons"
 
@@ -20,6 +19,29 @@ export const Panel = (props) => {
     </div>
 }
 
+const NavMenu = (props) => {
+    const handleOnClickItem = (event) => {
+        return props.onClickItem(event.key)
+    }
+
+    return <div className="navmenu_wrapper">
+        {
+            props.header && <div className="card header" id="navMenu">
+                {props.header}
+            </div>
+        }
+
+        <div className="card content" id="navMenu">
+            <antd.Menu
+                mode="inline"
+                selectedKeys={[props.activeKey]}
+                onClick={handleOnClickItem}
+                items={props.items}
+            />
+        </div>
+    </div>
+}
+
 export class PagePanelWithNavMenu extends React.Component {
     state = {
         // if defaultTab is not set, try to get it from query, if not, use the first tab
@@ -35,10 +57,15 @@ export class PagePanelWithNavMenu extends React.Component {
         }
 
         // slip the active tab by splitting on "."
-        const activeTabDirectory = this.state.activeTab.split(".")
+        if (!this.state.activeTab) {
+            console.error("PagePanelWithNavMenu: activeTab is not defined")
+            return <></>
+        }
 
         let tab = null
 
+        const activeTabDirectory = this.state.activeTab.split(".")
+
         activeTabDirectory.forEach((key, index) => {
             if (!tab) {
                 tab = this.props.tabs.find((children) => children.key === key)
@@ -72,10 +99,32 @@ export class PagePanelWithNavMenu extends React.Component {
         app.history.replace(`${window.location.pathname}?type=${this.state.activeTab}`)
     }
 
+    tabChange = (key) => {
+        if (this.props.onTabChange) {
+            this.props.onTabChange(key)
+        }
+
+        this.setState({ activeTab: key })
+
+        if (this.props.useSetQueryType) {
+            this.replaceQueryTypeToCurrentTab()
+        }
+    }
+
     handleTabChange = async (key) => {
+        console.log(key)
+
         if (this.state.activeTab === key) return
 
         if (this.props.transition) {
+            if (document.startViewTransition) {
+                return document.startViewTransition(() => {
+                    this.tabChange(key)
+                })
+            }
+
+            console.warn("PagePanelWithNavMenu: transition is enabled but document.startViewTransition is not compatible with your browser")
+
             // set to primary panel fade-opacity-leave class
             this.primaryPanelRef.current.classList.add("fade-opacity-leave")
 
@@ -87,15 +136,7 @@ export class PagePanelWithNavMenu extends React.Component {
             await new Promise(resolve => setTimeout(resolve, 200))
         }
 
-        if (this.props.onTabChange) {
-            this.props.onTabChange(key)
-        }
-
-        this.setState({ activeTab: key })
-
-        if (this.props.useSetQueryType) {
-            this.replaceQueryTypeToCurrentTab()
-        }
+        return this.tabChange(key)
     }
 
     getItems = (items) => {
@@ -118,20 +159,18 @@ export class PagePanelWithNavMenu extends React.Component {
     render() {
         const panels = [
             {
-                children: <div className="card" id="navMenu">
-                    {
-                        this.props.navMenuHeader && <div className="header">
-                            {this.props.navMenuHeader}
-                        </div>
-                    }
-
-                    <antd.Menu
-                        mode="inline"
-                        selectedKeys={[this.state.activeTab]}
-                        onClick={({ key }) => this.handleTabChange(key)}
+                children: <>
+                    <NavMenu
+                        header={this.props.navMenuHeader}
+                        activeKey={this.state.activeTab}
                         items={this.getItems(this.props.tabs)}
+                        onClickItem={(key) => this.handleTabChange(key)}
                     />
-                </div>
+
+                    {
+                        Array.isArray(this.props.extraMenuItems) && this.props.extraMenuItems
+                    }
+                </>
             },
             {
                 props: {

packages/app/src/components/PagePanels/index.less

@@ -20,6 +20,8 @@
 
         align-items: center;
 
+        gap: 20px;
+
         &.full {
             height: 100%;
         }
@@ -55,16 +57,19 @@
         border-radius: 12px;
         padding: 20px;
 
-        margin-bottom: 20px;
         width: 20vw;
 
+        isolation: isolate;
+
         h1,
         h2 {
             width: fit-content;
             margin: 0;
         }
 
-        .header {
+        &.header {
+            position: relative;
+
             display: flex;
             flex-direction: row;
 
@@ -74,6 +79,21 @@
             width: 100%;
 
             margin-bottom: 10px;
+
+            z-index: 50;
+
+            -webkit-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
+            -moz-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
+            box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
+        }
+
+        &.content {
+            position: relative;
+
+            transform: translateY(-30px);
+            padding-top: 35px;
+
+            z-index: 45;
         }
     }