diff --git a/packages/app/src/components/Layout/bottomBar/index.jsx b/packages/app/src/components/Layout/bottomBar/index.jsx
index 637c61c7..56ba92d0 100755
--- a/packages/app/src/components/Layout/bottomBar/index.jsx
+++ b/packages/app/src/components/Layout/bottomBar/index.jsx
@@ -38,10 +38,10 @@ const AccountButton = (props) => {
const handleClick = () => {
if (!user) {
- return app.eventBus.emit("app.forceLogin")
+ return app.navigation.goAuth()
}
- return app.goToAccount()
+ return app.navigation.goToAccount()
}
const handleHold = () => {
diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less
index 03a7c550..eb395ae2 100755
--- a/packages/app/src/components/Layout/bottomBar/index.less
+++ b/packages/app/src/components/Layout/bottomBar/index.less
@@ -74,7 +74,7 @@
&.primary {
.icon {
color: var(--background-color-primary);
- background-color: var(--primaryColor);
+ background-color: var(--colorPrimary);
}
}
}
diff --git a/packages/app/src/components/Layout/header/index.jsx b/packages/app/src/components/Layout/header/index.jsx
old mode 100755
new mode 100644
index 3822cda9..d9e030bd
--- a/packages/app/src/components/Layout/header/index.jsx
+++ b/packages/app/src/components/Layout/header/index.jsx
@@ -1,49 +1,27 @@
import React from "react"
-import * as antd from "antd"
-import { Icons } from "components/Icons"
-import { AppSearcher } from "components"
import classnames from "classnames"
import "./index.less"
-export default class Header extends React.Component {
- controller = window.app["HeaderController"] = {
- toggleVisibility: (to) => {
- if (window.isMobile) {
- to = true
- }
+export default (props) => {
+ const [visible, setVisible] = React.useState(false)
- this.setState({ visible: to ?? !this.state.visible })
- },
- isVisible: () => this.state.visible,
- }
+ const headerInterface = {
+ toggle: (to) => setVisible((prevValue) => to ?? !prevValue),
+ }
- state = {
- visible: false, // set by default to create an animation
- }
+ React.useEffect(() => {
+ app.layout.header = headerInterface
+ }, [])
- componentDidMount = async () => {
- setTimeout(() => {
- this.controller.toggleVisibility(true)
- }, 100)
- }
-
- render() {
- return (
-
-
- {!window.isMobile &&
- }
-
- )
- }
+ return
+ {String(window.location.pathname).toTitleCase()}
+
}
diff --git a/packages/app/src/components/Layout/header/index.less b/packages/app/src/components/Layout/header/index.less
old mode 100755
new mode 100644
index 24b2e0b1..061fb8f7
--- a/packages/app/src/components/Layout/header/index.less
+++ b/packages/app/src/components/Layout/header/index.less
@@ -1,32 +1,31 @@
-@import "theme/index.less";
+.page_header {
+ position: sticky;
-.app_header {
- user-select: none;
- --webkit-user-select: none;
+ z-index: 100;
- display: flex;
- flex-direction: row;
- align-items: center;
- z-index: 100;
+ top: 0;
+ left: 0;
- height: @app_header_height !important;
- padding: 10px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
- transition: all ease-in-out 150ms;
+ overflow: hidden;
- background-color: transparent;
- background: transparent !important;
+ // hidden values
+ padding: 0;
+ opacity: 0;
+ height: 0px;
+ width: 100%;
- border-bottom: 1px var(--border-color) solid;
+ transition: all 150ms ease-in-out;
- >div {
- margin-right: 16px;
- }
+ backdrop-filter: blur(10px);
- &.hidden {
- opacity: 0;
- height: 0 !important;
- padding: 0 !important;
- border: 0 !important;
- }
+ &.visible {
+ opacity: 1;
+ height: 50px;
+ padding: 20px;
+ }
}
\ No newline at end of file
diff --git a/packages/app/src/components/Layout/index.js b/packages/app/src/components/Layout/index.js
index 128eb1ea..6d0d1a46 100755
--- a/packages/app/src/components/Layout/index.js
+++ b/packages/app/src/components/Layout/index.js
@@ -1,6 +1,6 @@
export { default as BottomBar } from "./bottomBar"
-export { default as Header } from "./header"
export { default as Drawer } from "./drawer"
export { default as Sidebar } from "./sidebar"
export { default as Sidedrawer } from "./sidedrawer"
-export { default as Modal } from "./modal"
\ No newline at end of file
+export { default as Modal } from "./modal"
+export { default as Header } from "./header"
\ No newline at end of file
diff --git a/packages/app/src/components/Layout/sidebar/components/editor/index.jsx b/packages/app/src/components/Layout/sidebar/components/editor/index.jsx
index f01df4f6..8488a9dd 100755
--- a/packages/app/src/components/Layout/sidebar/components/editor/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/components/editor/index.jsx
@@ -4,7 +4,8 @@ import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
import { ActionsBar } from "components"
import { Icons, createIconRender } from "components/Icons"
-import sidebarItems from "schemas/routes.json"
+
+import sidebarItems from "schemas/sidebar"
import { sidebarKeys as defaultSidebarKeys } from "schemas/defaultSettings"
import Selector from "../selector"
@@ -46,7 +47,7 @@ export default class SidebarEditor extends React.Component {
}
loadItems = () => {
- const storagedKeys = window.app.settings.get("sidebarKeys") ?? defaultSidebarKeys
+ const storagedKeys = window.app.cores.settings.get("sidebarKeys") ?? defaultSidebarKeys
const active = []
const lockedIndex = []
@@ -64,7 +65,7 @@ export default class SidebarEditor extends React.Component {
}
onSave = () => {
- window.app.settings.set("sidebarKeys", this.state.items)
+ window.app.cores.settings.set("sidebarKeys", this.state.items)
window.app.SidebarController.toggleEdit(false)
}
@@ -73,7 +74,7 @@ export default class SidebarEditor extends React.Component {
}
onSetDefaults = () => {
- window.app.settings.set("sidebarKeys", defaultSidebarKeys)
+ window.app.cores.settings.set("sidebarKeys", defaultSidebarKeys)
this.loadItems()
}
diff --git a/packages/app/src/components/Layout/sidebar/components/selector/index.jsx b/packages/app/src/components/Layout/sidebar/components/selector/index.jsx
index b778816f..bfd8dcee 100755
--- a/packages/app/src/components/Layout/sidebar/components/selector/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/components/selector/index.jsx
@@ -3,12 +3,12 @@ import { Icons, createIconRender } from "components/Icons"
import { SelectableList } from "components"
import { List } from "antd"
-import sidebarItems from "schemas/routes.json"
+import sidebarItems from "schemas/sidebar"
import "./index.less"
const getStoragedKeys = () => {
- return window.app.settings.get("sidebarKeys") ?? []
+ return window.app.cores.settings.get("sidebarKeys") ?? []
}
const getAllItems = () => {
diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx
index 9b7bf48c..81c89c5e 100755
--- a/packages/app/src/components/Layout/sidebar/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/index.jsx
@@ -1,29 +1,40 @@
import React from "react"
-import { Menu, Avatar, Button } from "antd"
+import { Menu, Avatar, Button, Dropdown } from "antd"
import { Translation } from "react-i18next"
import classnames from "classnames"
import config from "config"
import { Icons, createIconRender } from "components/Icons"
-import sidebarItems from "schemas/routes.json"
+import sidebarItems from "schemas/sidebar"
import "./index.less"
const onClickHandlers = {
- settings: (event) => {
- window.app.openSettings()
+ settings: () => {
+ window.app.navigation.goToSettings()
},
+ notifications: () => {
+ window.app.controls.openNotifications()
+ },
+ search: () => {
+ window.app.controls.openSearcher()
+ },
+ create: () => {
+ window.app.controls.openCreator()
+ },
+ account: () => {
+ window.app.navigation.goToAccount()
+ },
+ login: () => {
+ window.app.navigation.goAuth()
+ }
}
const getSidebarComponents = () => {
const items = {}
sidebarItems.forEach((item, index) => {
- if (!item.reachable) {
- return
- }
-
items[item.id] = {
...item,
index,
@@ -103,9 +114,9 @@ export default class Sidebar extends React.Component {
this.controller = window.app["SidebarController"] = {
toggleVisibility: this.toggleVisibility,
toggleElevation: this.toggleElevation,
- toggleCollapse: this.toggleCollapse,
+ toggleCollapse: this.toggleExpanded,
isVisible: () => this.state.visible,
- isCollapsed: () => this.state.collapsed,
+ isExpanded: () => this.state.expanded,
setCustomRender: this.setRender,
closeCustomRender: this.closeRender,
}
@@ -113,7 +124,7 @@ export default class Sidebar extends React.Component {
this.state = {
visible: false,
elevated: false,
- collapsed: window.app.settings.get("collapseOnLooseFocus") ?? false,
+ expanded: false,
pathResolvers: null,
menus: null,
@@ -239,10 +250,8 @@ export default class Sidebar extends React.Component {
return window.app.setLocation(`/${e.key}`, 150)
}
- toggleCollapse = (to) => {
- if (!this.state.editMode) {
- this.setState({ collapsed: to ?? !this.state.collapsed })
- }
+ toggleExpanded = (to) => {
+ this.setState({ expanded: to ?? !this.state.expanded })
}
toggleVisibility = (to) => {
@@ -256,30 +265,34 @@ export default class Sidebar extends React.Component {
onMouseEnter = () => {
if (!this.state.visible) return
- if (window.app.settings.is("collapseOnLooseFocus", false)) return
+ if (window.app.cores.settings.is("collapseOnLooseFocus", false)) return
clearTimeout(this.collapseDebounce)
this.collapseDebounce = null
- if (this.state.collapsed) {
- this.toggleCollapse(false)
+ if (!this.state.expanded) {
+ this.toggleExpanded(true)
}
}
handleMouseLeave = () => {
if (!this.state.visible) return
- if (window.app.settings.is("collapseOnLooseFocus", false)) return
+ if (window.app.cores.settings.is("collapseOnLooseFocus", false)) return
- if (!this.state.collapsed) {
- this.collapseDebounce = setTimeout(() => { this.toggleCollapse(true) }, window.app.settings.get("autoCollapseDelay") ?? 500)
+ if (this.state.expanded) {
+ this.collapseDebounce = setTimeout(() => {
+ this.toggleExpanded(false)
+ }, window.app.cores.settings.get("autoCollapseDelay") ?? 500)
}
}
render() {
if (!this.state.menus) return null
+ const defaultSelectedKey = window.location.pathname.replace("/", "")
+
return
-
-
+
+
-