fix: rework compact nav and centralized back routing
Use master-detail layout on skinny windows so server and channel lists share one screen, with back returning to the space list instead of redirect loops. Add useBackRoute for title-bar and page-header back buttons with view transitions.
This commit is contained in:
26
src/app/hooks/useCompactNav.ts
Normal file
26
src/app/hooks/useCompactNav.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useMatch } from 'react-router-dom';
|
||||
import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
|
||||
import { ScreenSize, useScreenSizeContext } from './useScreenSize';
|
||||
|
||||
/** Skinny window layout (≤750px): master-detail instead of 3-column desktop. */
|
||||
export const useCompactNav = (): boolean => {
|
||||
const screenSize = useScreenSizeContext();
|
||||
return screenSize === ScreenSize.Mobile;
|
||||
};
|
||||
|
||||
/** Routes where sidebar + channel list are shown together (no room/content pane). */
|
||||
export const useIsCompactListRoute = (): boolean => {
|
||||
const homeMatch = useMatch({ path: HOME_PATH, caseSensitive: true, end: true });
|
||||
const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: true });
|
||||
const spaceMatch = useMatch({ path: SPACE_PATH, caseSensitive: true, end: true });
|
||||
const exploreMatch = useMatch({ path: EXPLORE_PATH, caseSensitive: true, end: true });
|
||||
const inboxMatch = useMatch({ path: INBOX_PATH, caseSensitive: true, end: true });
|
||||
|
||||
return !!(homeMatch || directMatch || spaceMatch || exploreMatch || inboxMatch);
|
||||
};
|
||||
|
||||
export const useShowCompactMasterView = (): boolean => {
|
||||
const compact = useCompactNav();
|
||||
const isListRoute = useIsCompactListRoute();
|
||||
return compact && isListRoute;
|
||||
};
|
||||
Reference in New Issue
Block a user