Updated navigation.

components/input/LanguageButton.js

@@ -1,14 +1,11 @@
-import { Icon, Button, PopupTrigger, Popup, Tooltip, Text } from 'react-basics';
-import { useIntl } from 'react-intl';
+import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
 import classNames from 'classnames';
 import { languages } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
 import styles from './LanguageButton.module.css';
 
-export default function LanguageButton({ tooltipPosition = 'top', menuPosition = 'right' }) {
-  const { formatMessage } = useIntl();
+export default function LanguageButton() {
   const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
@@ -18,14 +15,12 @@ export default function LanguageButton({ tooltipPosition = 'top', menuPosition =
 
   return (
     <PopupTrigger>
-      <Tooltip label={formatMessage(labels.language)} position={tooltipPosition}>
-        <Button variant="quiet">
-          <Icon>
-            <Icons.Globe />
-          </Icon>
-        </Button>
-      </Tooltip>
-      <Popup position={menuPosition} alignment="end">
+      <Button variant="quiet">
+        <Icon>
+          <Icons.Globe />
+        </Icon>
+      </Button>
+      <Popup position="bottom" alignment="end">
         <div className={styles.menu}>
           {items.map(({ value, label }) => {
             return (

components/input/ProfileButton.js

@@ -0,0 +1,53 @@
+import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
+import { useRouter } from 'next/router';
+import Icons from 'components/icons';
+import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
+import styles from './ProfileButton.module.css';
+
+export default function ProfileButton() {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+  const router = useRouter();
+
+  const handleSelect = key => {
+    if (key === 'profile') {
+      router.push('/settings/profile');
+    }
+    if (key === 'logout') {
+      router.push('/logout');
+    }
+  };
+
+  return (
+    <PopupTrigger>
+      <Button variant="quiet">
+        <Icon>
+          <Icons.Profile />
+        </Icon>
+        <Icon size="sm">
+          <Icons.ChevronDown />
+        </Icon>
+      </Button>
+      <Popup position="bottom" alignment="end">
+        <Menu variant="popup" onSelect={handleSelect} className={styles.menu}>
+          <Item key="user" className={styles.item}>
+            <Text>{user.username}</Text>
+          </Item>
+          <Item key="profile" className={styles.item} divider={true}>
+            <Icon>
+              <Icons.User />
+            </Icon>
+            <Text>{formatMessage(labels.profile)}</Text>
+          </Item>
+          <Item key="logout" className={styles.item}>
+            <Icon>
+              <Icons.Logout />
+            </Icon>
+            <Text>{formatMessage(labels.logout)}</Text>
+          </Item>
+        </Menu>
+      </Popup>
+    </PopupTrigger>
+  );
+}

components/input/ProfileButton.module.css

@@ -0,0 +1,9 @@
+.menu {
+  width: 200px;
+}
+
+.item {
+  display: flex;
+  gap: 12px;
+  background: var(--base50);
+}

components/input/ThemeButton.js

@@ -1,14 +1,12 @@
 import { useTransition, animated } from 'react-spring';
-import { Button, Icon, Tooltip } from 'react-basics';
+import { Button, Icon } from 'react-basics';
 import { useIntl } from 'react-intl';
 import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
 import styles from './ThemeButton.module.css';
 
-export default function ThemeButton({ tooltipPosition = 'top' }) {
+export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
-  const { formatMessage } = useIntl();
 
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
@@ -28,14 +26,12 @@ export default function ThemeButton({ tooltipPosition = 'top' }) {
   }
 
   return (
-    <Tooltip label={formatMessage(labels.theme)} position={tooltipPosition}>
-      <Button variant="quiet" className={styles.button} onClick={handleClick}>
-        {transitions((style, item) => (
-          <animated.div key={item} style={style}>
-            <Icon className={styles.icon}>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
-          </animated.div>
-        ))}
-      </Button>
-    </Tooltip>
+    <Button variant="quiet" className={styles.button} onClick={handleClick}>
+      {transitions((style, item) => (
+        <animated.div key={item} style={style}>
+          <Icon className={styles.icon}>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
+        </animated.div>
+      ))}
+    </Button>
   );
 }