Updated layout for settings pages.

components/layout/AppLayout.module.css

@@ -16,6 +16,6 @@
   grid-column: 1;
   grid-row: 2 / 3;
   min-height: 0;
-  max-height: calc(100vh - 60px);
+  height: calc(100vh - 60px);
   overflow-y: auto;
 }

components/layout/NavBar.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Icon, Text } from 'react-basics';
+import { Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
 import Icons from 'components/icons';
@@ -15,42 +15,45 @@ export default function NavBar() {
   const { pathname } = useRouter();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
-  const [minimized, setMinimized] = useState(false);
 
   const links = [
-    { label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
-    { label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
-    !cloudMode && { label: formatMessage(labels.settings), url: '/settings', icon: <Icons.Gear /> },
+    { label: formatMessage(labels.dashboard), url: '/dashboard' },
+    { label: formatMessage(labels.realtime), url: '/realtime' },
+    !cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
   ].filter(n => n);
 
-  const handleMinimize = () => setMinimized(state => !state);
-
   return (
-    <div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
-      <div className={styles.logo} onClick={handleMinimize}>
-        <Icon size="lg">
-          <Icons.Logo />
-        </Icon>
-        <Text className={styles.text}>umami</Text>
-      </div>
-      <div className={styles.links}>
-        {links.map(({ url, icon, label }) => {
-          return (
-            <Link
-              key={url}
-              href={url}
-              className={classNames({ [styles.selected]: pathname.startsWith(url) })}
-            >
-              <Text>{label}</Text>
-            </Link>
-          );
-        })}
-      </div>
-      <div className={styles.actions}>
-        <ThemeButton />
-        <LanguageButton />
-        {!cloudMode && <ProfileButton />}
-      </div>
+    <div className={classNames(styles.navbar)}>
+      <Row>
+        <Column className={styles.left}>
+          <div className={styles.logo}>
+            <Icon size="lg">
+              <Icons.Logo />
+            </Icon>
+            <Text className={styles.text}>umami</Text>
+          </div>
+          <div className={styles.links}>
+            {links.map(({ url, label }) => {
+              return (
+                <Link
+                  key={url}
+                  href={url}
+                  className={classNames({ [styles.selected]: pathname.startsWith(url) })}
+                >
+                  <Text>{label}</Text>
+                </Link>
+              );
+            })}
+          </div>
+        </Column>
+        <Column className={styles.right}>
+          <div className={styles.actions}>
+            <ThemeButton />
+            <LanguageButton />
+            {!cloudMode && <ProfileButton />}
+          </div>
+        </Column>
+      </Row>
     </div>
   );
 }

components/layout/NavBar.module.css

@@ -9,10 +9,21 @@
   padding: 0 20px;
 }
 
+.left,
+.right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
 .logo {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
   gap: 10px;
   font-size: 16px;
   font-weight: 700;
@@ -55,3 +66,10 @@
   justify-content: flex-end;
   min-width: 0;
 }
+
+@media only screen and (max-width: 768px) {
+  .links,
+  .actions {
+    display: none;
+  }
+}

components/layout/SettingsLayout.js

@@ -1,6 +1,6 @@
+import { Row, Column } from 'react-basics';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import AppLayout from './AppLayout';
 import SideNav from './SideNav';
 import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
@@ -23,13 +23,15 @@ export default function SettingsLayout({ children }) {
   const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
 
   return (
-    <AppLayout>
-      <div className={styles.container}>
-        <div className={classNames(styles.menu, { [styles.hidden]: cloudMode })}>
+    <Row className={classNames({ [styles.hideMenu]: cloudMode })}>
+      {!cloudMode && (
+        <Column className={styles.menu} defaultSize={12} md={3} lg={2} xl={2}>
           <SideNav items={items} shallow={true} selectedKey={getKey()} />
-        </div>
-        <div className={styles.content}>{children}</div>
-      </div>
-    </AppLayout>
+        </Column>
+      )}
+      <Column className={styles.content} defaultSize={12} md={9} lg={10} xl={10}>
+        {children}
+      </Column>
+    </Row>
   );
 }

components/layout/SettingsLayout.module.css

@@ -1,23 +1,13 @@
-.container {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  grid-template-rows: 1fr;
-}
-
 .menu {
   display: flex;
   flex-direction: column;
-  width: 200px;
-  padding: 40px 0;
-  margin-right: 20px;
+  padding-top: 40px;
 }
 
 .content {
-  display: flex;
-  flex-direction: column;
+  min-height: 50vh;
 }
 
-.menu.hidden {
-  visibility: hidden;
-  width: 0;
+.hideMenu .content {
+  margin: 0 auto;
 }

components/layout/SideNav.module.css

@@ -13,3 +13,10 @@
   padding: 0;
   border-radius: var(--border-radius);
 }
+
+@media only screen and (max-width: 768px) {
+  .menu {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}

components/metrics/Legend.module.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  padding: 10px 0;
+  padding: 20px 0;
 }
 
 .label {

components/pages/settings/profile/PasswordChangeButton.js

@@ -14,14 +14,16 @@ export default function PasswordChangeButton() {
   return (
     <>
       {toast}
-      <ModalTrigger modalProps={{ title: formatMessage(labels.changePassword) }}>
+      <ModalTrigger>
         <Button>
           <Icon>
             <Icons.Lock />
           </Icon>
           <Text>{formatMessage(labels.changePassword)}</Text>
         </Button>
-        <Modal>{close => <PasswordEditForm onSave={handleSave} onClose={close} />}</Modal>
+        <Modal title={formatMessage(labels.changePassword)}>
+          {close => <PasswordEditForm onSave={handleSave} onClose={close} />}
+        </Modal>
       </ModalTrigger>
     </>
   );

components/pages/websites/WebsiteDetails.js

@@ -35,7 +35,7 @@ export default function WebsiteDetails({ websiteId }) {
         showLink={false}
         stickyHeader={true}
       />
-      {!chartLoaded && <Loading icon="dots" />}
+      {!chartLoaded && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {chartLoaded && (
         <>
           {!view && <WebsiteTableView websiteId={websiteId} />}

pages/settings/profile/index.js

@@ -1,10 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
 
 export default function ProfilePage() {
   return (
-    <SettingsLayout>
-      <ProfileSettings />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <ProfileSettings />
+      </SettingsLayout>
+    </AppLayout>
   );
 }

pages/settings/teams/[id]/index.js

@@ -1,3 +1,4 @@
+import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamSettings from 'components/pages/settings/teams/TeamSettings';
 import { useRouter } from 'next/router';
@@ -11,9 +12,11 @@ export default function TeamDetailPage({ disabled }) {
   }
 
   return (
-    <SettingsLayout>
-      <TeamSettings teamId={id} />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <TeamSettings teamId={id} />
+      </SettingsLayout>
+    </AppLayout>
   );
 }
 

pages/settings/teams/index.js

@@ -1,3 +1,4 @@
+import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamsList from 'components/pages/settings/teams/TeamsList';
 
@@ -7,9 +8,11 @@ export default function TeamsPage({ disabled }) {
   }
 
   return (
-    <SettingsLayout>
-      <TeamsList />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <TeamsList />
+      </SettingsLayout>
+    </AppLayout>
   );
 }
 

pages/settings/users/[id]/index.js

@@ -1,3 +1,4 @@
+import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import UserSettings from 'components/pages/settings/users/UserSettings';
 import { useRouter } from 'next/router';
@@ -11,9 +12,11 @@ export default function TeamDetailPage({ disabled }) {
   }
 
   return (
-    <SettingsLayout>
-      <UserSettings userId={id} />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <UserSettings userId={id} />
+      </SettingsLayout>
+    </AppLayout>
   );
 }
 

pages/settings/users/index.js

@@ -1,3 +1,4 @@
+import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import UsersList from 'components/pages/settings/users/UsersList';
 
@@ -7,9 +8,11 @@ export default function UsersPage({ disabled }) {
   }
 
   return (
-    <SettingsLayout>
-      <UsersList />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <UsersList />
+      </SettingsLayout>
+    </AppLayout>
   );
 }
 

pages/settings/websites/[id]/index.js

@@ -1,3 +1,4 @@
+import AppLayout from 'components/layout/AppLayout';
 import { useRouter } from 'next/router';
 import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
 import SettingsLayout from 'components/layout/SettingsLayout';
@@ -11,9 +12,11 @@ export default function WebsiteSettingsPage({ disabled }) {
   }
 
   return (
-    <SettingsLayout>
-      <WebsiteSettings websiteId={id} />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <WebsiteSettings websiteId={id} />
+      </SettingsLayout>
+    </AppLayout>
   );
 }
 

pages/settings/websites/index.js

@@ -1,3 +1,4 @@
+import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import WebsitesList from 'components/pages/settings/websites/WebsitesList';
 
@@ -7,9 +8,11 @@ export default function WebsitesPage({ disabled }) {
   }
 
   return (
-    <SettingsLayout>
-      <WebsitesList />
-    </SettingsLayout>
+    <AppLayout>
+      <SettingsLayout>
+        <WebsitesList />
+      </SettingsLayout>
+    </AppLayout>
   );
 }