mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
fix: change header borders depending on whether in server
This commit is contained in:
parent
4773b76ea9
commit
7c120685d4
1 changed files with 16 additions and 3 deletions
|
@ -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={() =>
|
||||||
|
|
Loading…
Reference in a new issue