Updated settings components.

components/layout/NavBar.js

@@ -4,19 +4,22 @@ import classNames from 'classnames';
 import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
 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 = [
-  { key: 'dashboard', label: 'Dashboard', url: '/dashboard', icon: <Dashboard /> },
-  { key: 'realtime', label: 'Realtime', url: '/realtime', icon: <Clock /> },
-  { key: 'queries', label: 'Queries', url: '/queries', icon: <Search /> },
+  { label: 'Dashboard', url: '/dashboard', icon: <Dashboard /> },
+  { label: 'Realtime', url: '/realtime', icon: <Clock /> },
+  { label: 'Queries', url: '/queries', icon: <Search /> },
 ];
 
 const settings = [
-  { key: 'websites', label: 'Websites', url: '/settings/websites', icon: <Globe /> },
-  { key: 'users', label: 'Users', url: '/settings/users', icon: <User /> },
-  { key: 'teams', label: 'Teams', url: '/settings/teams', icon: <Users /> },
+  { 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() {
@@ -38,10 +41,10 @@ export default function NavBar() {
       <NavGroup title="Analytics" items={analytics} minimized={minimized} />
       <NavGroup title="Settings" items={settings} minimized={minimized} />
       <div className={styles.footer}>
-        <Icon>
-          <Profile />
-        </Icon>
-        <Text>Profile</Text>
+        <div className={styles.buttons}>
+          <ThemeButton />
+          <LanguageButton />
+        </div>
       </div>
     </div>
   );

components/layout/NavBar.module.css

@@ -45,3 +45,9 @@
   justify-content: flex-end;
   padding: 20px;
 }
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

components/layout/NavGroup.js

@@ -26,18 +26,23 @@ export default function NavGroup({
         [styles.minimized]: minimized,
       })}
     >
-      <div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
-        <Text>{title}</Text>
-        <Icon size="sm" rotate={expanded ? 0 : -90}>
-          <ChevronDown />
-        </Icon>
-      </div>
+      {title && (
+        <div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
+          <Text>{title}</Text>
+          <Icon size="sm" rotate={expanded ? 0 : -90}>
+            <ChevronDown />
+          </Icon>
+        </div>
+      )}
       <div className={styles.body}>
-        {items.map(({ key, label, url, icon }) => {
+        {items.map(({ label, url, icon, divider }) => {
           return (
-            <Link key={key} href={url}>
+            <Link key={label} href={url}>
               <a
-                className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
+                className={classNames(styles.item, {
+                  [styles.divider]: divider,
+                  [styles.selected]: pathname.startsWith(url),
+                })}
               >
                 <Icon>{icon}</Icon>
                 <Text className={styles.text}>{label}</Text>

components/layout/NavGroup.module.css

@@ -25,6 +25,7 @@
 }
 
 .items {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -33,6 +34,7 @@
 }
 
 .item {
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -43,6 +45,10 @@
   width: 200px;
 }
 
+a.item {
+  color: var(--base700);
+}
+
 .item.selected {
   color: var(--base900);
   border-right-color: var(--primary400);
@@ -58,10 +64,6 @@
   pointer-events: none;
 }
 
-a.item {
-  color: var(--base600);
-}
-
 .minimized .text,
 .minimized .header {
   display: none;
@@ -74,3 +76,18 @@ a.item {
   align-items: center;
   justify-content: center;
 }
+
+.divider:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-top: 1px solid var(--base300);
+  width: 160px;
+}
+
+.minimized .divider:before {
+  width: 60px;
+}