Add bottom navigation and locale selector.

src/components/navigation/BottomNavigation.tsx

@@ -0,0 +1,72 @@
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+import IconButton from "../ui/IconButton";
+import UserIcon from "../common/user/UserIcon";
+import { useSelf } from "../../context/revoltjs/hooks";
+import { useHistory, useLocation } from "react-router";
+import { MessageCircle, Users } from "@styled-icons/feather";
+
+const NavigationBase = styled.div`
+    z-index: 10;
+    height: 50px;
+    display: flex;
+    background: var(--secondary-background);
+`;
+
+const Button = styled.a<{ active: boolean }>`
+    flex: 1;
+
+    > a, > div, > a > div {
+        width: 100%;
+        height: 100%;
+    }
+
+    ${ props => props.active && css`
+        background: var(--hover);
+    ` }
+`;
+
+export default function BottomNavigation() {
+    const user = useSelf();
+    const history = useHistory();
+    const path = useLocation().pathname;
+
+    const friendsActive = path.startsWith("/friends");
+    const settingsActive = path.startsWith("/settings");
+    const homeActive = !(friendsActive || settingsActive);
+
+    return (
+        <NavigationBase>
+            <Button active={homeActive}>
+                <IconButton
+                    onClick={() => {
+                        if (!homeActive) {
+                            if (settingsActive) {
+                                if (history.length > 0) {
+                                    history.goBack();
+                                } else {
+                                    history.push('/');
+                                }
+                            }
+                        }
+                    }}>
+                    <MessageCircle size={26} />
+                </IconButton>
+            </Button>
+            <Button active={friendsActive}>
+                <Link to="/friends">
+                    <IconButton>
+                        <Users size={26} />
+                    </IconButton>
+                </Link>
+            </Button>
+            <Button active={settingsActive}>
+                <Link to="/settings">
+                    <IconButton>
+                        <UserIcon target={user} size={26} status={true} />
+                    </IconButton>
+                </Link>
+            </Button>
+        </NavigationBase>
+    );
+}

src/components/navigation/SidebarBase.tsx

@@ -1,4 +1,5 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 export default styled.div`
     height: 100%;
@@ -6,4 +7,8 @@ export default styled.div`
     user-select: none;
     flex-direction: row;
     align-items: stretch;
+
+    ${ isTouchscreenDevice && css`
+        padding-bottom: 50px;
+    ` }
 `;