cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-26 09:00:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: change header borders depending on whether in server

Browse source
This commit is contained in:
Paul Makles 2021-12-30 19:56:41 +00:00
parent 4773b76ea9
commit 7c120685d4
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/ui/Header.tsx
View file

@ -4,6 +4,7 @@ import {
Menu, Menu,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useLocation } from "react-router-dom";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@ -14,7 +15,9 @@ import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
interface Props { interface Props {
borders?: boolean; topBorder?: boolean;
bottomBorder?: boolean;
background?: boolean; background?: boolean;
transparent?: boolean; transparent?: boolean;
placement: "primary" | "secondary"; placement: "primary" | "secondary";
@ -77,9 +80,14 @@ const Header = styled.div<Props>`
`} `}
${(props) => ${(props) =>
props.borders && props.topBorder &&
css` css`
border-start-start-radius: 8px; border-start-start-radius: 8px;
`}
${(props) =>
props.bottomBorder &&
css`
border-end-start-radius: 8px; border-end-start-radius: 8px;
`} `}
`; `;
@ -115,9 +123,14 @@ export const PageHeader = observer(
({ children, icon, noBurger, ...props }: PageHeaderProps) => { ({ children, icon, noBurger, ...props }: PageHeaderProps) => {
const layout = useApplicationState().layout; const layout = useApplicationState().layout;
const visible = layout.getSectionState(SIDEBAR_CHANNELS, true); const visible = layout.getSectionState(SIDEBAR_CHANNELS, true);
const { pathname } = useLocation();
return ( return (
<Header {...props} placement="primary" borders={!visible}> <Header
{...props}
placement="primary"
topBorder={!visible}
bottomBorder={!pathname.includes("/server")}>
{!noBurger && <HamburgerAction />} {!noBurger && <HamburgerAction />}
<IconContainer <IconContainer
onClick={() => onClick={() =>