From f207ebb0370deb9fd1fd781a49578e746cc31073 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Thu, 17 Aug 2023 17:53:20 +0000 Subject: [PATCH] rework navmenu to use header --- .../src/components/Layout/header/index.jsx | 59 +++++--- .../src/components/Layout/header/index.less | 32 +++-- .../PagePanels/components/NavMenu/index.jsx | 50 +++---- .../PagePanels/components/NavMenu/index.less | 69 ++-------- .../app/src/components/PagePanels/index.jsx | 126 ++++-------------- .../app/src/components/PagePanels/index.less | 8 +- packages/app/src/layouts/default/index.jsx | 13 +- 7 files changed, 128 insertions(+), 229 deletions(-) diff --git a/packages/app/src/components/Layout/header/index.jsx b/packages/app/src/components/Layout/header/index.jsx index d9e030bd..8e7db535 100755 --- a/packages/app/src/components/Layout/header/index.jsx +++ b/packages/app/src/components/Layout/header/index.jsx @@ -1,27 +1,52 @@ import React from "react" import classnames from "classnames" +import { Motion, spring } from "react-motion" + +import useLayoutInterface from "hooks/useLayoutInterface" import "./index.less" export default (props) => { - const [visible, setVisible] = React.useState(false) + const [render, setRender] = React.useState(null) - const headerInterface = { - toggle: (to) => setVisible((prevValue) => to ?? !prevValue), - } - - React.useEffect(() => { - app.layout.header = headerInterface - }, []) - - return
{ + if (component === null) { + return setRender(null) } - )} + + return setRender({ + component, + options + }) + } + }) + + return - {String(window.location.pathname).toTitleCase()} -
+ {({ y, height }) => { + return
+ { + render?.component && React.cloneElement( + render?.component, + render?.options?.props ?? {} + ) + } +
+ }} + } diff --git a/packages/app/src/components/Layout/header/index.less b/packages/app/src/components/Layout/header/index.less index 061fb8f7..edce163b 100755 --- a/packages/app/src/components/Layout/header/index.less +++ b/packages/app/src/components/Layout/header/index.less @@ -1,4 +1,4 @@ -.page_header { +.page_header_wrapper { position: sticky; z-index: 100; @@ -6,26 +6,24 @@ top: 0; left: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - - overflow: hidden; - - // hidden values - padding: 0; - opacity: 0; - height: 0px; width: 100%; - transition: all 150ms ease-in-out; + margin-bottom: 20px; + padding: 5px; backdrop-filter: blur(10px); - &.visible { - opacity: 1; - height: 50px; - padding: 20px; + background-color: rgba(var(--background-color-accent-values), 0.8); + + border-radius: 12px; + border: 1px solid var(--border-color); + + overflow: hidden; + + &.hidden { + opacity: 0; + height: 0; + padding: 0; + margin: 0; } } \ No newline at end of file diff --git a/packages/app/src/components/PagePanels/components/NavMenu/index.jsx b/packages/app/src/components/PagePanels/components/NavMenu/index.jsx index 77e19e95..3bf47dec 100644 --- a/packages/app/src/components/PagePanels/components/NavMenu/index.jsx +++ b/packages/app/src/components/PagePanels/components/NavMenu/index.jsx @@ -4,30 +4,8 @@ import * as antd from "antd" import "./index.less" -const NavMenu = (props) => { - const handleOnClickItem = (event) => { - return props.onClickItem(event.key) - } - return
-
- { - props.header &&
- {props.header} -
- } - - -
-
-} - -const NavMenuMobile = (props) => { +export default (props) => { function handleClickItem(item) { if (item.children && Array.isArray(item.children)) { return false @@ -38,7 +16,7 @@ const NavMenuMobile = (props) => { return
{ @@ -56,7 +34,7 @@ const NavMenuMobile = (props) => { {
{item.icon}
+ + { + props.renderNames &&
+

+ {item.label ?? item.id} +

+
+ } } @@ -72,7 +58,7 @@ const NavMenuMobile = (props) => { return handleClickItem(item)} @@ -82,10 +68,16 @@ const NavMenuMobile = (props) => {
{item.icon}
+ + { + props.renderNames &&
+

+ {item.label ?? item.id} +

+
+ } }) }
-} - -export default app.isMobile ? NavMenuMobile : NavMenu \ No newline at end of file +} \ No newline at end of file diff --git a/packages/app/src/components/PagePanels/components/NavMenu/index.less b/packages/app/src/components/PagePanels/components/NavMenu/index.less index 1ea176fe..db4c3560 100644 --- a/packages/app/src/components/PagePanels/components/NavMenu/index.less +++ b/packages/app/src/components/PagePanels/components/NavMenu/index.less @@ -1,64 +1,6 @@ @import "theme/vars.less"; .navmenu_wrapper { - position: relative; - - display: flex; - flex-direction: column; - - align-items: center; - justify-content: center; - - height: 100%; - width: 100%; - - .card { - display: flex; - flex-direction: column; - - background-color: var(--background-color-accent); - border-radius: 12px; - padding: 20px; - - width: 100%; - - h1, - h2 { - width: fit-content; - margin: 0; - } - - .card_header { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - - margin-bottom: 10px; - - view-transition-name: main-header; - - h1 { - view-transition-name: main-header-text; - } - } - - &.content { - position: relative; - - transform: translateY(-30px); - padding-top: 35px; - - z-index: 45; - } - } - - &.card:last-child { - margin-bottom: 0; - } -} - -.__mobile__navmenu_wrapper { display: flex; flex-direction: row; @@ -66,9 +8,10 @@ width: 100%; - .__mobile__navmenu_item { + .navmenu_item { + font-size: 0.7rem; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; @@ -82,10 +25,16 @@ color: var(--colorPrimary); } + p { + margin: 0; + } + .icon { margin: 0; line-height: 1rem; font-size: 1.5rem; + + font-size: 1rem; } .label { diff --git a/packages/app/src/components/PagePanels/index.jsx b/packages/app/src/components/PagePanels/index.jsx index a151cdee..a74386be 100755 --- a/packages/app/src/components/PagePanels/index.jsx +++ b/packages/app/src/components/PagePanels/index.jsx @@ -72,6 +72,8 @@ export class PagePanelWithNavMenu extends React.Component { if (app.isMobile) { app.layout.top_bar.shouldUseTopBarSpacer(true) + } else { + app.layout.header.render(null) } } @@ -119,7 +121,10 @@ export class PagePanelWithNavMenu extends React.Component { const componentProps = tab.props ?? this.props.tabProps - return React.createElement(tab.component, componentProps) + return React.createElement(tab.component, { + ...componentProps, + ref: this.primaryPanelRef, + }) } replaceQueryTypeToCurrentTab = () => { @@ -186,16 +191,23 @@ export class PagePanelWithNavMenu extends React.Component { } render() { - const panels = [ + return <> { - children: <> - this.handleTabChange(key)} - /> + app.isMobile && app.layout.top_bar.render( this.handleTabChange(key)} + />) + } + { + !app.isMobile && app.layout.header.render( this.handleTabChange(key)} + renderNames + > { Array.isArray(this.state.renders) && [ this.state.renders.map((render, index) => { @@ -206,98 +218,14 @@ export class PagePanelWithNavMenu extends React.Component { }) ] } - - }, - { - props: { - ref: this.primaryPanelRef, - className: this.props.transition ? "fade-opacity-enter" : undefined, - }, - children: this.renderActiveTab() - }, - ] - - if (app.isMobile) { - delete panels[0] - } - - if (this.props.extraPanel) { - panels.push(this.props.extraPanel) - } - - return <> - { - app.isMobile && app.layout.top_bar.render( this.handleTabChange(key)} - />) + ) + } + + { + this.renderActiveTab() } - } } -export default class PagePanels extends React.Component { - generateGridStyle = () => { - switch (this.props.panels.length) { - case 1: { - return { - gridTemplateColumns: "1fr", - } - } - case 2: { - return { - gridTemplateColumns: "1fr 3fr", - } - } - case 3: { - return { - gridTemplateColumns: "0.5fr 1fr 0.5fr", - } - } - } - } - - render() { - if (!this.props.panels) { - return null - } - - return
- { - this.props.panels[0] && - } - { - this.props.panels[1] && - } - { - this.props.panels[2] && - } -
- } -} \ No newline at end of file +export default PagePanelWithNavMenu \ No newline at end of file diff --git a/packages/app/src/components/PagePanels/index.less b/packages/app/src/components/PagePanels/index.less index d46e27c6..9d3af78d 100755 --- a/packages/app/src/components/PagePanels/index.less +++ b/packages/app/src/components/PagePanels/index.less @@ -53,12 +53,8 @@ html { } .pagePanels { - display: grid; - - grid-template-columns: 1fr 3fr; - grid-template-rows: 1fr; - grid-column-gap: 20px; - grid-row-gap: 0px; + display: flex; + flex-direction: column; width: 100%; diff --git a/packages/app/src/layouts/default/index.jsx b/packages/app/src/layouts/default/index.jsx index c0b96c89..0be0f9ae 100755 --- a/packages/app/src/layouts/default/index.jsx +++ b/packages/app/src/layouts/default/index.jsx @@ -2,7 +2,15 @@ import React from "react" import classnames from "classnames" import { Layout } from "antd" -import { Sidebar, Drawer, Sidedrawer, BottomBar, TopBar, ToolsBar } from "components/Layout" +import { + Sidebar, + Drawer, + Sidedrawer, + BottomBar, + TopBar, + ToolsBar, + Header, +} from "components/Layout" import BackgroundDecorator from "components/BackgroundDecorator" @@ -27,6 +35,7 @@ const DesktopLayout = (props) => { + { "fade-transverse-active", )} > +
+ { props.children && React.cloneElement(props.children, props) }