More refactoring.

components/layout/AppLayout.js

@@ -5,7 +5,11 @@ import useRequireLogin from 'hooks/useRequireLogin';
 import styles from './AppLayout.module.css';
 
 export default function AppLayout({ title, children }) {
-  useRequireLogin();
+  const { user } = useRequireLogin();
+
+  if (!user) {
+    return null;
+  }
 
   return (
     <div className={styles.layout}>

components/layout/Header.js

@@ -12,7 +12,7 @@ import styles from './Header.module.css';
 import classNames from 'classnames';
 
 export default function Header({ className }) {
-  const user = useUser();
+  const { user } = useUser();
   const { pathname } = useRouter();
   const { updatesDisabled, adminDisabled } = useConfig();
   const isSharePage = pathname.includes('/share/');

components/layout/NavBar.js

@@ -1,32 +1,38 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Icon, Text, Icons } from 'react-basics';
+import { Icon, Text } from 'react-basics';
 import classNames from 'classnames';
-import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
-import ThemeButton from '../buttons/ThemeButton';
+import Icons from 'components/icons';
+import ThemeButton from 'components/buttons/ThemeButton';
 import LanguageButton from 'components/buttons/LanguageButton';
 import LogoutButton from 'components/buttons/LogoutButton';
 import { labels } from 'components/messages';
+import useUser from 'hooks/useUser';
 import NavGroup from './NavGroup';
 import styles from './NavBar.module.css';
 
 export default function NavBar() {
+  const { user } = useUser();
   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.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
+    { label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.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 /> },
-  ];
+    { label: formatMessage(labels.websites), url: '/settings/websites', icon: <Icons.Globe /> },
+    user?.isAdmin && {
+      label: formatMessage(labels.users),
+      url: '/settings/users',
+      icon: <Icons.User />,
+    },
+    { label: formatMessage(labels.teams), url: '/settings/teams', icon: <Icons.Users /> },
+    { label: formatMessage(labels.profile), url: '/settings/profile', icon: <Icons.Profile /> },
+  ].filter(n => n);
 
   const handleMinimize = () => setMinimized(state => !state);
 
@@ -34,7 +40,7 @@ export default function NavBar() {
     <div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
       <div className={styles.header} onClick={handleMinimize}>
         <Icon size="lg">
-          <Logo />
+          <Icons.Logo />
         </Icon>
         <Text className={styles.text}>umami</Text>
         <Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>

components/layout/PageHeader.js

@@ -1,24 +1,11 @@
 import React from 'react';
-import Link from 'next/link';
 import classNames from 'classnames';
-import { Button, Icon } from 'react-basics';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ title, backUrl, children, className, style }) {
+export default function PageHeader({ title, children, className, style }) {
   return (
     <div className={classNames(styles.header, className)} style={style}>
-      <div className={styles.title}>
-        {backUrl && (
-          <Link href={backUrl}>
-            <a>
-              <Button>
-                <Icon icon="arrow-left" /> Back
-              </Button>
-            </a>
-          </Link>
-        )}
-        {title}
-      </div>
+      <div className={styles.title}>{title}</div>
       {children}
     </div>
   );

components/layout/PageHeader.module.css

@@ -5,8 +5,6 @@
   align-content: center;
   align-self: stretch;
   margin-bottom: 40px;
-  font-size: 18px;
-  font-weight: bold;
   height: 50px;
 }
 
@@ -21,5 +19,7 @@
 .title {
   display: flex;
   align-items: center;
+  font-size: 18px;
+  font-weight: bold;
   gap: 20px;
 }