Rewrite admin. (#1713)

* Rewrite admin.

* Clean up password forms.

* Fix naming issues.

* CSS Naming.

components/nav/Nav.js

@@ -0,0 +1,45 @@
+import User from 'assets/user.svg';
+import Team from 'assets/users.svg';
+import Website from 'assets/website.svg';
+import classNames from 'classnames';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { Icon, Item, Menu, Text } from 'react-basics';
+import styles from './Nav.module.css';
+import useRequireLogin from 'hooks/useRequireLogin';
+
+export default function Nav() {
+  const {
+    user: { role },
+  } = useRequireLogin();
+  const { pathname } = useRouter();
+
+  const handleSelect = () => {};
+
+  const items = [
+    { icon: <Website />, label: 'Websites', url: '/websites' },
+    { icon: <User />, label: 'Users', url: '/users', hidden: role !== 'admin' },
+    { icon: <Team />, label: 'Teams', url: '/teams' },
+    { icon: <User />, label: 'Profile', url: '/profile' },
+  ];
+
+  return (
+    <Menu items={items} onSelect={handleSelect} className={styles.menu}>
+      {({ icon, label, url, hidden }) =>
+        !hidden && (
+          <Item
+            key={label}
+            className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
+          >
+            <Link href={url}>
+              <a>
+                <Icon size="lg">{icon}</Icon>
+                <Text>{label}</Text>
+              </a>
+            </Link>
+          </Item>
+        )
+      }
+    </Menu>
+  );
+}

components/nav/Nav.module.css

@@ -0,0 +1,46 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  gap: 10px;
+  background: transparent;
+  margin-right: 16px;
+}
+
+.menu svg {
+  width: 20px;
+  height: 20px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-weight: 600;
+  background: transparent;
+  padding: 0;
+  border-radius: 8px;
+}
+
+.item:hover {
+  background: var(--base100);
+}
+
+.item a {
+  color: var(--base700);
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex: 1;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.item a:hover {
+  color: var(--base900);
+}
+
+.item.selected a {
+  color: var(--base900);
+  background: var(--base100);
+}