cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Refined bottom navigation bar on mobile

Browse source
This commit is contained in:
nizune 2021-07-09 13:35:24 +02:00
parent 9484428d63
commit 5f8ee9d656
2 changed files with 62 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
src/components/navigation/BottomNavigation.tsx
View file

@ -1,5 +1,5 @@
import { Message, Group, Inbox } from "@styled-icons/boxicons-solid"; import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
import { At } from "@styled-icons/boxicons-regular"; import { Search } from "@styled-icons/boxicons-regular";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
@ -13,11 +13,16 @@ import { useSelf } from "../../context/revoltjs/hooks";
import UserIcon from "../common/user/UserIcon"; import UserIcon from "../common/user/UserIcon";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
const NavigationBase = styled.div` const Base = styled.div`
background: var(--secondary-background);
`;
const Navbar = styled.div`
z-index: 100; z-index: 100;
max-width: 500px;
margin: 0 auto;
display: flex; display: flex;
height: var(--bottom-navigation-height); height: var(--bottom-navigation-height);
background: var(--secondary-background);
`; `;
const Button = styled.a<{ active: boolean }>` const Button = styled.a<{ active: boolean }>`
@ -30,6 +35,11 @@ const Button = styled.a<{ active: boolean }>`
height: 100%; height: 100%;
} }
> div,
> a > div {
padding: 0 20px;
}
${(props) => ${(props) =>
props.active && props.active &&
css` css`
@ -53,47 +63,57 @@ export function BottomNavigation({ lastOpened }: Props) {
const homeActive = !(friendsActive || settingsActive); const homeActive = !(friendsActive || settingsActive);
return ( return (
<NavigationBase> <Base>
<Button active={homeActive}> <Navbar>
<IconButton <Button active={homeActive}>
onClick={() => { <IconButton
if (settingsActive) { onClick={() => {
if (history.length > 0) { if (settingsActive) {
history.goBack(); if (history.length > 0) {
history.goBack();
}
} }
}
if (channel_id) { if (channel_id) {
history.push(`/channel/${channel_id}`); history.push(`/channel/${channel_id}`);
} else { } else {
history.push("/"); history.push("/");
} }
}}> }}>
<Message size={24} /> <Message size={24} />
</IconButton>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<Group size={25} />
</IconButton> </IconButton>
</ConditionalLink> </Button>
</Button> <Button active={friendsActive}>
{/*<Button active={friendsActive}> <ConditionalLink active={friendsActive} to="/friends">
<ConditionalLink active={friendsActive} to="/friends"> <IconButton>
<IconButton> <Group size={25} />
<Inbox size={25} /> </IconButton>
</IconButton> </ConditionalLink>
</ConditionalLink> </Button>
</Button>*/} {/*<Button active={searchActive}>
<Button active={settingsActive}> <ConditionalLink active={searchActive} to="/search">
<ConditionalLink active={settingsActive} to="/settings"> <IconButton>
<IconButton> <Search size={25} />
<UserIcon target={user} size={26} status={true} /> </IconButton>
</IconButton> </ConditionalLink>
</ConditionalLink> </Button>
</Button> <Button active={inboxActive}>
</NavigationBase> <ConditionalLink active={inboxActive} to="/inbox">
<IconButton>
<Inbox size={25} />
</IconButton>
</ConditionalLink>
</Button>*/}
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
</IconButton>
</ConditionalLink>
</Button>
</Navbar>
</Base>
); );
} }

2
src/pages/settings/GenericSettings.tsx
View file

@ -74,7 +74,7 @@ export function GenericSettings({
name="theme-color" name="theme-color"
content={ content={
isTouchscreenDevice isTouchscreenDevice
? theme["primary-header"] ? theme["background"]
: theme["background"] : theme["background"]
} }
/> />