revite/src/pages/RevoltApp.tsx

82 lines
3.5 KiB
TypeScript
Raw Normal View History

import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
2021-06-19 10:29:04 -04:00
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
import { Switch, Route, useLocation } from "react-router-dom";
2021-06-19 15:00:30 -04:00
import styled from "styled-components";
2021-06-19 07:34:53 -04:00
2021-06-19 15:24:11 -04:00
import ContextMenus from "../lib/ContextMenus";
import Popovers from "../context/intermediate/Popovers";
import SyncManager from "../context/revoltjs/SyncManager";
import StateMonitor from "../context/revoltjs/StateMonitor";
import Notifications from "../context/revoltjs/Notifications";
2021-06-19 15:24:11 -04:00
2021-06-19 10:29:04 -04:00
import LeftSidebar from "../components/navigation/LeftSidebar";
import RightSidebar from "../components/navigation/RightSidebar";
import BottomNavigation from "../components/navigation/BottomNavigation";
2021-06-19 10:29:04 -04:00
import Open from "./Open";
2021-06-19 07:34:53 -04:00
import Home from './home/Home';
import Invite from "./invite/Invite";
2021-06-19 15:00:30 -04:00
import Friends from "./friends/Friends";
import Channel from "./channels/Channel";
2021-06-19 17:37:12 -04:00
import Settings from './settings/Settings';
2021-06-19 15:24:11 -04:00
import Developer from "./developer/Developer";
2021-06-19 17:37:12 -04:00
import ServerSettings from "./settings/ServerSettings";
import ChannelSettings from "./settings/ChannelSettings";
2021-06-19 15:00:30 -04:00
const Routes = styled.div`
min-width: 0;
display: flex;
overflow: hidden;
flex-direction: column;
background: var(--primary-background);
`;
2021-06-19 07:34:53 -04:00
export default function App() {
const path = useLocation().pathname;
const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends"));
2021-06-19 07:34:53 -04:00
return (
<OverlappingPanels
width="100vw"
2021-06-20 15:36:52 -04:00
height="100vh"
2021-06-19 10:29:04 -04:00
leftPanel={{ width: 292, component: <LeftSidebar /> }}
rightPanel={{ width: 240, component: <RightSidebar /> }}
bottomNav={{
component: <BottomNavigation />,
showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
height: 50
}}
2021-06-19 10:29:04 -04:00
docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
2021-06-19 15:00:30 -04:00
<Routes>
<Switch>
2021-06-19 17:37:12 -04:00
<Route path="/server/:server/channel/:channel/settings/:page" component={ChannelSettings} />
<Route path="/server/:server/channel/:channel/settings" component={ChannelSettings} />
<Route path="/server/:server/settings/:page" component={ServerSettings} />
<Route path="/server/:server/settings" component={ServerSettings} />
<Route path="/channel/:channel/settings/:page" component={ChannelSettings} />
<Route path="/channel/:channel/settings" component={ChannelSettings} />
<Route path="/channel/:channel/message/:message" component={Channel} />
<Route path="/server/:server/channel/:channel" component={Channel} />
<Route path="/server/:server" />
<Route path="/channel/:channel" component={Channel} />
2021-06-19 17:37:12 -04:00
<Route path="/settings/:page" component={Settings} />
<Route path="/settings" component={Settings} />
2021-06-19 15:24:11 -04:00
2021-06-19 17:37:12 -04:00
<Route path="/dev" component={Developer} />
<Route path="/friends" component={Friends} />
<Route path="/open/:id" component={Open} />
<Route path="/invite/:code" component={Invite} />
2021-06-19 17:37:12 -04:00
<Route path="/" component={Home} />
2021-06-19 15:00:30 -04:00
</Switch>
</Routes>
2021-06-19 15:24:11 -04:00
<ContextMenus />
2021-06-19 13:46:05 -04:00
<Popovers />
<Notifications />
<StateMonitor />
<SyncManager />
2021-06-19 07:34:53 -04:00
</OverlappingPanels>
);
};