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,7 +13,8 @@ export default (props) => {
         return props.onClickItem(item.key)
     }
 
-    return <div
+    return <>
+        <div
             className={classnames(
                 "navmenu_wrapper",
             )}
@@ -61,8 +61,14 @@ export default (props) => {
                             "navmenu_item",
                             item.key === props.activeKey && "active",
                         )}
-                    onClick={() => handleClickItem(item)}
-                    type="ghost"
+                        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">
@@ -80,4 +86,9 @@ export default (props) => {
                 })
             }
         </div>
+
+        {
+            props.children
+        }
+    </>
 }

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">
+                <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}
-            primaryPanelClassName="full"
+            extraItems={[
+                {
+                    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",