Added SideNav component.

components/layout/NavBar.js

@@ -9,8 +9,10 @@ import ProfileButton from 'components/input/ProfileButton';
 import styles from './NavBar.module.css';
 import useConfig from 'hooks/useConfig';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export default function NavBar() {
+  const { pathname } = useRouter();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
   const [minimized, setMinimized] = useState(false);
@@ -34,8 +36,11 @@ export default function NavBar() {
       <div className={styles.links}>
         {links.map(({ url, icon, label }) => {
           return (
-            <Link key={url} href={url}>
-              <Icon>{icon}</Icon>
+            <Link
+              key={url}
+              href={url}
+              className={classNames({ [styles.selected]: pathname.startsWith(url) })}
+            >
               <Text>{label}</Text>
             </Link>
           );

components/layout/NavBar.module.css

@@ -5,7 +5,7 @@
   align-items: center;
   height: 60px;
   background: var(--base75);
-  border-bottom: 1px solid var(--base200);
+  border-bottom: 2px solid var(--base300);
   padding: 0 20px;
 }
 
@@ -23,7 +23,7 @@
 .links {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 30px;
   padding: 0 40px;
   flex: 1;
   font-weight: 700;
@@ -33,11 +33,19 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  color: var(--font-color100);
+  line-height: 60px;
+  color: var(--font-color200);
+  border-bottom: 2px solid transparent;
 }
 
 .links a:hover {
-  color: var(--primary400);
+  color: var(--font-color100);
+  border-bottom: 2px solid var(--primary400);
+}
+
+.links .selected {
+  color: var(--font-color100);
+  border-bottom: 2px solid var(--primary400);
 }
 
 .actions {

components/layout/SettingsLayout.js

@@ -0,0 +1,26 @@
+import AppLayout from './AppLayout';
+import styles from './SettingsLayout.module.css';
+import useMessages from 'hooks/useMessages';
+import SideNav from './SideNav';
+
+export default function SettingsLayout({ children }) {
+  const { formatMessage, labels } = useMessages();
+
+  const items = [
+    { label: formatMessage(labels.websites), url: '/settings/websites' },
+    { label: formatMessage(labels.teams), url: '/settings/teams' },
+    { label: formatMessage(labels.users), url: '/settings/users' },
+    { label: formatMessage(labels.profile), url: '/settings/profile' },
+  ];
+
+  return (
+    <AppLayout>
+      <div className={styles.container}>
+        <div className={styles.menu}>
+          <SideNav items={items} />
+        </div>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </AppLayout>
+  );
+}

components/layout/SettingsLayout.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-template-rows: 1fr;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  padding: 40px 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}

components/layout/SideNav.js

@@ -0,0 +1,17 @@
+import { Menu, Item } from 'react-basics';
+import Link from 'next/link';
+import styles from './SideNav.module.css';
+
+export default function SideNav({ selectedKey, items, shallow }) {
+  return (
+    <Menu items={items} selectedKey={selectedKey} className={styles.menu}>
+      {({ key, label, url }) => (
+        <Item key={key} className={styles.item}>
+          <Link href={url} shallow={shallow}>
+            {label}
+          </Link>
+        </Item>
+      )}
+    </Menu>
+  );
+}

components/layout/SideNav.module.css

@@ -0,0 +1,14 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.item a {
+  color: var(--font-color100);
+  flex: 1;
+  padding: var(--size300) var(--size600);
+}
+
+.item {
+  padding: 0;
+}