improve header behavior & fix missing children renders

packages/app/src/components/Layout/header/index.jsx

@@ -19,7 +19,7 @@ export default (props) => {
                 component,
                 options
             })
-        }
+        },
     })
 
     return <Motion

packages/app/src/components/Layout/header/index.less

@@ -1,4 +1,9 @@
 .page_header_wrapper {
+    display: flex;
+    flex-direction: column;
+
+    gap: 10px;
+
     position: sticky;
 
     z-index: 100;

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

@@ -4,7 +4,6 @@ import * as antd from "antd"
 
 import "./index.less"
 
-
 export default (props) => {
     function handleClickItem(item) {
         if (item.children && Array.isArray(item.children)) {
@@ -14,70 +13,82 @@ export default (props) => {
         return props.onClickItem(item.key)
     }
 
-    return <div
+    return <>
-        className={classnames(
+        <div
-            "navmenu_wrapper",
+            className={classnames(
-        )}
+                "navmenu_wrapper",
-    >
+            )}
-        {
+        >
-            props.items.map((item) => {
+            {
-                if (!item.disabled && item.children && Array.isArray(item.children)) {
+                props.items.map((item) => {
-                    return <antd.Dropdown
+                    if (!item.disabled && item.children && Array.isArray(item.children)) {
-                        trigger={["click"]}
+                        return <antd.Dropdown
-                        menu={{
+                            trigger={["click"]}
-                            items: item.children,
+                            menu={{
-                            onClick: (item) => {
+                                items: item.children,
-                                handleClickItem(item)
+                                onClick: (item) => {
-                            }
+                                    handleClickItem(item)
-                        }}
+                                }
-                    >
+                            }}
-                        <antd.Button
-                            key={item.key}
-                            className={classnames(
-                                "navmenu_item",
-                                item.key === props.activeKey && "active",
-                            )}
-                            type="ghost"
-                            disabled={item.disabled}
                         >
-                            <div className="icon">
+                            <antd.Button
-                                {item.icon}
+                                key={item.key}
-                            </div>
+                                className={classnames(
-
+                                    "navmenu_item",
-                            {
+                                    item.key === props.activeKey && "active",
-                                props.renderNames && <div className="label">
+                                )}
-                                    <p>
+                                type="ghost"
-                                        {item.label ?? item.id}
+                                disabled={item.disabled}
-                                    </p>
+                            >
+                                <div className="icon">
+                                    {item.icon}
                                 </div>
-                            }
-                        </antd.Button>
-                    </antd.Dropdown>
-                }
 
-                return <antd.Button
+                                {
-                    key={item.key}
+                                    props.renderNames && <div className="label">
-                    className={classnames(
+                                        <p>
-                        "navmenu_item",
+                                            {item.label ?? item.id}
-                        item.key === props.activeKey && "active",
+                                        </p>
-                    )}
+                                    </div>
-                    onClick={() => handleClickItem(item)}
+                                }
-                    type="ghost"
+                            </antd.Button>
-                    disabled={item.disabled}
+                        </antd.Dropdown>
-                >
-                    <div className="icon">
-                        {item.icon}
-                    </div>
-
-                    {
-                        props.renderNames && <div className="label">
-                            <p>
-                                {item.label ?? item.id}
-                            </p>
-                        </div>
                     }
-                </antd.Button>
+
-            })
+                    return <antd.Button
+                        key={item.key}
+                        className={classnames(
+                            "navmenu_item",
+                            item.key === props.activeKey && "active",
+                        )}
+                        onClick={() => {
+                            if (typeof item.props.onClick === "function") {
+                                return item.props.onClick()
+                            }
+
+                            return handleClickItem(item)
+                        }}
+                        type={item.props.type ?? "ghost"}
+                        disabled={item.disabled}
+                    >
+                        <div className="icon">
+                            {item.icon}
+                        </div>
+
+                        {
+                            props.renderNames && <div className="label">
+                                <p>
+                                    {item.label ?? item.id}
+                                </p>
+                            </div>
+                        }
+                    </antd.Button>
+                })
+            }
+        </div>
+
+        {
+            props.children
         }
-    </div>
+    </>
 }

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

@@ -1,5 +1,22 @@
 @import "theme/vars.less";
 
+html {
+    &.mobile {
+        .navmenu_wrapper {
+            .navmenu_item {
+                &.active {
+                    color: var(--colorPrimary) !important;
+                    background-color: var(--background-color-primary);
+                }
+
+                .icon {
+                    font-size: 1.5rem;
+                }
+            }
+        }
+    }
+}
+
 .navmenu_wrapper {
     display: flex;
     flex-direction: row;
@@ -8,8 +25,13 @@
 
     width: 100%;
 
+    .ant-btn-primary:not(.ant-btn-dangerous) {
+        .label {
+            color: var(--background-color-primary);
+        }
+    }
+
     .navmenu_item {
-        font-size: 0.7rem;
         display: flex;
         flex-direction: row;
 
@@ -23,17 +45,21 @@
 
         &.active {
             color: var(--colorPrimary);
+            background-color: var(--background-color-primary);
         }
 
         p {
             margin: 0;
+            color: var(--text-color);
+        }
+
+        svg {
+            color: currentColor;
         }
 
         .icon {
             margin: 0;
             line-height: 1rem;
-            font-size: 1.5rem;
-
             font-size: 1rem;
         }
 

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

@@ -61,17 +61,16 @@ export class PagePanelWithNavMenu extends React.Component {
         app.layout.page_panels = this.interface
 
         if (app.isMobile) {
-            app.layout.top_bar.shouldUseTopBarSpacer(false)
+            app.layout.top_bar.shouldUseTopBarSpacer(true)
+            app.layout.toggleCenteredContent(false)
         }
-
-        app.layout.toggleCenteredContent(true)
     }
 
     componentWillUnmount() {
         delete app.layout.page_panels
 
         if (app.isMobile) {
-            app.layout.top_bar.shouldUseTopBarSpacer(true)
+            app.layout.top_bar.shouldUseTopBarSpacer(false)
         } else {
             app.layout.header.render(null)
         }
@@ -179,15 +178,18 @@ export class PagePanelWithNavMenu extends React.Component {
             return []
         }
 
-        return items.map((item) => {
+        items = items.map((item) => {
             return {
                 key: item.key,
                 icon: createIconRender(item.icon),
                 label: item.label,
                 children: item.children && this.getItems(item.children),
                 disabled: item.disabled,
+                props: item.props ?? {},
             }
         })
+
+        return items
     }
 
     render() {
@@ -204,7 +206,7 @@ export class PagePanelWithNavMenu extends React.Component {
                 !app.isMobile && app.layout.header.render(<NavMenu
                     header={this.props.navMenuHeader}
                     activeKey={this.state.activeTab}
-                    items={this.getItems(this.props.tabs)}
+                    items={this.getItems([...this.props.tabs ?? [], ...this.props.extraItems ?? []])}
                     onClickItem={(key) => this.handleTabChange(key)}
                     renderNames
                 >
@@ -221,9 +223,13 @@ export class PagePanelWithNavMenu extends React.Component {
                 </NavMenu>)
             }
 
-            {
+            <div className="pagePanels">
-                this.renderActiveTab()
+                <div className="panel">
-            }
+                    {
+                        this.renderActiveTab()
+                    }
+                </div>
+            </div>
         </>
     }
 }

packages/app/src/pages/index.jsx

@@ -1,33 +1,25 @@
 import React from "react"
-import * as antd from "antd"
 import { Translation } from "react-i18next"
 
 import { PagePanelWithNavMenu } from "components/PagePanels"
 
-import { Icons } from "components/Icons"
-
 import Tabs from "./home/tabs"
 
 export default class Home extends React.Component {
     render() {
-        const navMenuHeader = <>
-            <h1>
-                <Icons.Home />
-                <Translation>{(t) => t("Timeline")}</Translation>
-            </h1>
-            <antd.Button
-                type="primary"
-                onClick={app.controls.openPostCreator}
-            >
-                <Icons.PlusCircle />
-                <Translation>{(t) => t("Create")}</Translation>
-            </antd.Button>
-        </>
-
         return <PagePanelWithNavMenu
             tabs={Tabs}
-            navMenuHeader={navMenuHeader}
+            extraItems={[
-            primaryPanelClassName="full"
+                {
+                    key: "create",
+                    icon: "PlusCircle",
+                    label: <Translation>{(t) => t("Create")}</Translation>,
+                    props: {
+                        type: "primary",
+                        onClick: app.controls.openPostCreator
+                    }
+                },
+            ]}
             onTabChange={() => {
                 app.layout.scrollTo({
                     top: 0,

packages/app/src/pages/play/[play_id].jsx

@@ -24,6 +24,8 @@ export default (props) => {
 
     React.useEffect(() => {
         loadData()
+
+        app.layout.toggleCenteredContent(false)
     }, [])
 
     if (!playlist) {

packages/app/src/pages/settings/index.jsx

@@ -88,7 +88,6 @@ const generateMenuItems = () => {
     })
 }
 
-
 export default () => {
     const [activeKey, setActiveKey] = useUrlQueryActiveKey({
         defaultKey: "general",