|
@@ -2,35 +2,18 @@ import { useAppDispatch, useAppSelector } from '../../../stores/store';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { IPage } from '../../../stores/reducers/pages/slice';
|
|
import { IPage } from '../../../stores/reducers/pages/slice';
|
|
import { ViewLayoutTypePB } from '../../../../services/backend';
|
|
import { ViewLayoutTypePB } from '../../../../services/backend';
|
|
-import { MouseEventHandler, useState } from 'react';
|
|
|
|
|
|
+import { useState } from 'react';
|
|
import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
|
|
import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
|
|
|
|
|
|
-// number of pixels from left side of screen to show hidden navigation panel
|
|
|
|
-const FLOATING_PANEL_SHOW_WIDTH = 10;
|
|
|
|
-const FLOATING_PANEL_HIDE_EXTRA_WIDTH = 10;
|
|
|
|
-
|
|
|
|
export const useNavigationPanelHooks = function () {
|
|
export const useNavigationPanelHooks = function () {
|
|
const dispatch = useAppDispatch();
|
|
const dispatch = useAppDispatch();
|
|
const folders = useAppSelector((state) => state.folders);
|
|
const folders = useAppSelector((state) => state.folders);
|
|
const pages = useAppSelector((state) => state.pages);
|
|
const pages = useAppSelector((state) => state.pages);
|
|
const width = useAppSelector((state) => state.navigationWidth);
|
|
const width = useAppSelector((state) => state.navigationWidth);
|
|
- const [navigationPanelFixed, setNavigationPanelFixed] = useState(true);
|
|
|
|
- const [slideInFloatingPanel, setSlideInFloatingPanel] = useState(true);
|
|
|
|
const [menuHidden, setMenuHidden] = useState(false);
|
|
const [menuHidden, setMenuHidden] = useState(false);
|
|
|
|
|
|
const navigate = useNavigate();
|
|
const navigate = useNavigate();
|
|
|
|
|
|
- const onCollapseNavigationClick = () => {
|
|
|
|
- setSlideInFloatingPanel(true);
|
|
|
|
- setNavigationPanelFixed(false);
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- const onFixNavigationClick = () => {
|
|
|
|
- setNavigationPanelFixed(true);
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- const [floatingPanelWidth, setFloatingPanelWidth] = useState(0);
|
|
|
|
-
|
|
|
|
const onHideMenuClick = () => {
|
|
const onHideMenuClick = () => {
|
|
setMenuHidden(true);
|
|
setMenuHidden(true);
|
|
};
|
|
};
|
|
@@ -59,26 +42,11 @@ export const useNavigationPanelHooks = function () {
|
|
navigate(`/page/${pageTypeRoute}/${page.id}`);
|
|
navigate(`/page/${pageTypeRoute}/${page.id}`);
|
|
};
|
|
};
|
|
|
|
|
|
- const onScreenMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
|
|
|
|
- if (e.screenX <= FLOATING_PANEL_SHOW_WIDTH) {
|
|
|
|
- setSlideInFloatingPanel(true);
|
|
|
|
- } else if (e.screenX > floatingPanelWidth + FLOATING_PANEL_HIDE_EXTRA_WIDTH) {
|
|
|
|
- setSlideInFloatingPanel(false);
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
return {
|
|
return {
|
|
width,
|
|
width,
|
|
folders,
|
|
folders,
|
|
pages,
|
|
pages,
|
|
- navigate,
|
|
|
|
onPageClick,
|
|
onPageClick,
|
|
- onCollapseNavigationClick,
|
|
|
|
- onFixNavigationClick,
|
|
|
|
- navigationPanelFixed,
|
|
|
|
- onScreenMouseMove,
|
|
|
|
- slideInFloatingPanel,
|
|
|
|
- setFloatingPanelWidth,
|
|
|
|
menuHidden,
|
|
menuHidden,
|
|
onHideMenuClick,
|
|
onHideMenuClick,
|
|
onShowMenuClick,
|
|
onShowMenuClick,
|