More refactoring, cleaned up icons, nav buttons, add messages.

components/layout/NavBar.js

@@ -1,29 +1,32 @@
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 import { Icon, Text, Icons } from 'react-basics';
 import classNames from 'classnames';
 import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
+import ThemeButton from '../buttons/ThemeButton';
+import LanguageButton from 'components/buttons/LanguageButton';
+import LogoutButton from 'components/buttons/LogoutButton';
+import { labels } from 'components/messages';
 import NavGroup from './NavGroup';
 import styles from './NavBar.module.css';
-import ThemeButton from '../buttons/ThemeButton';
-import LanguageButton from '../buttons/LanguageButton';
-
-const { ChevronDown, Search } = Icons;
-
-const analytics = [
-  { label: 'Dashboard', url: '/dashboard', icon: <Dashboard /> },
-  { label: 'Realtime', url: '/realtime', icon: <Clock /> },
-  { label: 'Queries', url: '/queries', icon: <Search /> },
-];
-
-const settings = [
-  { label: 'Websites', url: '/settings/websites', icon: <Globe /> },
-  { label: 'Users', url: '/settings/users', icon: <User /> },
-  { label: 'Teams', url: '/settings/teams', icon: <Users /> },
-  { label: 'Profile', url: '/settings/profile', icon: <Profile /> },
-];
 
 export default function NavBar() {
+  const { formatMessage } = useIntl();
   const [minimized, setMinimized] = useState(false);
+  const tooltipPosition = minimized ? 'right' : 'top';
+
+  const analytics = [
+    { label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Dashboard /> },
+    { label: formatMessage(labels.realtime), url: '/realtime', icon: <Clock /> },
+    { label: formatMessage(labels.queries), url: '/queries', icon: <Icons.Search /> },
+  ];
+
+  const settings = [
+    { label: formatMessage(labels.websites), url: '/settings/websites', icon: <Globe /> },
+    { label: formatMessage(labels.users), url: '/settings/users', icon: <User /> },
+    { label: formatMessage(labels.teams), url: '/settings/teams', icon: <Users /> },
+    { label: formatMessage(labels.profile), url: '/settings/profile', icon: <Profile /> },
+  ];
 
   const handleMinimize = () => setMinimized(state => !state);
 
@@ -35,15 +38,16 @@ export default function NavBar() {
         </Icon>
         <Text className={styles.text}>umami</Text>
         <Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>
-          <ChevronDown />
+          <Icons.ChevronDown />
         </Icon>
       </div>
-      <NavGroup title="Analytics" items={analytics} minimized={minimized} />
-      <NavGroup title="Settings" items={settings} minimized={minimized} />
+      <NavGroup title={formatMessage(labels.analytics)} items={analytics} minimized={minimized} />
+      <NavGroup title={formatMessage(labels.settings)} items={settings} minimized={minimized} />
       <div className={styles.footer}>
         <div className={styles.buttons}>
-          <ThemeButton />
-          <LanguageButton />
+          <ThemeButton tooltipPosition={tooltipPosition} />
+          <LanguageButton tooltipPosition={tooltipPosition} />
+          <LogoutButton tooltipPosition={tooltipPosition} />
         </div>
       </div>
     </div>

components/layout/NavBar.module.css

@@ -51,3 +51,7 @@
   align-items: center;
   justify-content: center;
 }
+
+.minimized .buttons {
+  flex-direction: column;
+}

components/layout/NavGroup.js

@@ -5,8 +5,6 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './NavGroup.module.css';
 
-const { ChevronDown } = Icons;
-
 export default function NavGroup({
   title,
   items,
@@ -30,7 +28,7 @@ export default function NavGroup({
         <div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
           <Text>{title}</Text>
           <Icon size="sm" rotate={expanded ? 0 : -90}>
-            <ChevronDown />
+            <Icons.ChevronDown />
           </Icon>
         </div>
       )}