diff --git a/components/layout/AppLayout.module.css b/components/layout/AppLayout.module.css
index 8ed52c92..621802c9 100644
--- a/components/layout/AppLayout.module.css
+++ b/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;
}
diff --git a/components/layout/NavBar.js b/components/layout/NavBar.js
index a9792eae..bca2ccce 100644
--- a/components/layout/NavBar.js
+++ b/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: },
- { label: formatMessage(labels.realtime), url: '/realtime', icon: },
- !cloudMode && { label: formatMessage(labels.settings), url: '/settings', icon: },
+ { 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 (
-
-
-
-
-
- umami
-
-
- {links.map(({ url, icon, label }) => {
- return (
-
- {label}
-
- );
- })}
-
-
+
+
+
+
+
+
+
+ umami
+
+
+ {links.map(({ url, label }) => {
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+
+
+
+
);
}
diff --git a/components/layout/NavBar.module.css b/components/layout/NavBar.module.css
index 393c34f7..da042ff7 100644
--- a/components/layout/NavBar.module.css
+++ b/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;
+ }
+}
diff --git a/components/layout/SettingsLayout.js b/components/layout/SettingsLayout.js
index b7cb093f..2b98aca5 100644
--- a/components/layout/SettingsLayout.js
+++ b/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 (
-
-
-
+
+ {!cloudMode && (
+
-
-
{children}
-
-
+
+ )}
+
+ {children}
+
+
);
}
diff --git a/components/layout/SettingsLayout.module.css b/components/layout/SettingsLayout.module.css
index 770d4b87..068681f5 100644
--- a/components/layout/SettingsLayout.module.css
+++ b/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;
}
diff --git a/components/layout/SideNav.module.css b/components/layout/SideNav.module.css
index b664194d..8b7d0d42 100644
--- a/components/layout/SideNav.module.css
+++ b/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;
+ }
+}
diff --git a/components/metrics/Legend.module.css b/components/metrics/Legend.module.css
index b079e67f..5a005db2 100644
--- a/components/metrics/Legend.module.css
+++ b/components/metrics/Legend.module.css
@@ -2,7 +2,7 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
- padding: 10px 0;
+ padding: 20px 0;
}
.label {
diff --git a/components/pages/settings/profile/PasswordChangeButton.js b/components/pages/settings/profile/PasswordChangeButton.js
index 466b6896..29bf640e 100644
--- a/components/pages/settings/profile/PasswordChangeButton.js
+++ b/components/pages/settings/profile/PasswordChangeButton.js
@@ -14,14 +14,16 @@ export default function PasswordChangeButton() {
return (
<>
{toast}
-
+
- {close => }
+
+ {close => }
+
>
);
diff --git a/components/pages/websites/WebsiteDetails.js b/components/pages/websites/WebsiteDetails.js
index ad252b99..cfa40804 100644
--- a/components/pages/websites/WebsiteDetails.js
+++ b/components/pages/websites/WebsiteDetails.js
@@ -35,7 +35,7 @@ export default function WebsiteDetails({ websiteId }) {
showLink={false}
stickyHeader={true}
/>
- {!chartLoaded && }
+ {!chartLoaded && }
{chartLoaded && (
<>
{!view && }
diff --git a/pages/settings/profile/index.js b/pages/settings/profile/index.js
index c5dbea4f..ccbff02b 100644
--- a/pages/settings/profile/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/settings/teams/[id]/index.js b/pages/settings/teams/[id]/index.js
index 6a33ff46..9d5477bc 100644
--- a/pages/settings/teams/[id]/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/settings/teams/index.js b/pages/settings/teams/index.js
index 2ce9c6c8..2020a05e 100644
--- a/pages/settings/teams/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/settings/users/[id]/index.js b/pages/settings/users/[id]/index.js
index 311ae2de..48b8218d 100644
--- a/pages/settings/users/[id]/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/settings/users/index.js b/pages/settings/users/index.js
index 635f7d9a..54c07fed 100644
--- a/pages/settings/users/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/settings/websites/[id]/index.js b/pages/settings/websites/[id]/index.js
index a00133fb..1e6f0521 100644
--- a/pages/settings/websites/[id]/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}
diff --git a/pages/settings/websites/index.js b/pages/settings/websites/index.js
index ea69797c..54ad4780 100644
--- a/pages/settings/websites/index.js
+++ b/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 (
-
-
-
+
+
+
+
+
);
}