Add bottom navigation and locale selector.

src/components/common/LocaleSelector.tsx

@@ -0,0 +1,42 @@
+import ComboBox from "../ui/ComboBox";
+import { connectState } from "../../redux/connector";
+import { WithDispatcher } from "../../redux/reducers";
+import { LanguageEntry, Languages } from "../../context/Locale";
+
+type Props = WithDispatcher & {
+    locale: string;
+};
+
+export function LocaleSelector(props: Props) {
+    return (
+        <ComboBox
+            value={props.locale}
+            onChange={e =>
+                props.dispatcher &&
+                props.dispatcher({
+                    type: "SET_LOCALE",
+                    locale: e.currentTarget.value as any
+                })
+            }
+        >
+            {Object.keys(Languages).map(x => {
+                const l = (Languages as any)[x] as LanguageEntry;
+                return (
+                    <option value={x}>
+                        {l.emoji} {l.display}
+                    </option>
+                );
+            })}
+        </ComboBox>
+    );
+}
+
+export default connectState(
+    LocaleSelector,
+    state => {
+        return {
+            locale: state.locale
+        };
+    },
+    true
+);

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;
+    ` }
 `;