From 1d9c3133f0b714c7b505230d16b2e7bc29dfa5d5 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Wed, 18 Jan 2023 15:05:39 -0800 Subject: [PATCH] Refactored layout. Added NavBar component. --- assets/{calendar-alt.svg => calendar.svg} | 0 assets/clock.svg | 1 + assets/dashboard.svg | 1 + .../{settings => buttons}/LanguageButton.js | 0 .../LanguageButton.module.css | 0 .../{settings => buttons}/SettingsButton.js | 4 +- .../SettingsButton.module.css | 0 .../{settings => buttons}/ThemeButton.js | 0 .../ThemeButton.module.css | 0 .../{settings => buttons}/ThemeSetting.js | 0 .../ThemeSetting.module.css | 0 .../{settings => buttons}/UserButton.js | 0 .../UserButton.module.css | 0 components/common/DateFilter.js | 2 +- components/common/HamburgerButton.js | 6 +- components/icons.js | 13 + components/layout/AppLayout.js | 21 +- components/layout/AppLayout.module.css | 18 +- components/layout/Footer.js | 47 +- components/layout/Header.js | 25 +- components/layout/Header.module.css | 3 +- components/layout/NavBar.js | 48 ++ components/layout/NavBar.module.css | 47 ++ components/layout/NavGroup.js | 51 +++ components/layout/NavGroup.module.css | 76 ++++ components/layout/PageHeader.js | 1 + components/nav/Nav.js | 48 -- components/nav/Nav.module.css | 45 -- components/pages/dashboard/Dashboard.js | 2 +- .../dashboard}/DashboardSettingsButton.js | 0 .../DashboardSettingsButton.module.css | 0 components/pages/login/LoginLayout.module.css | 1 + components/pages/settings/SettingsLayout.js | 23 - .../pages/settings/SettingsLayout.module.css | 16 - .../settings/profile}/DateRangeSetting.js | 0 .../settings/profile}/LanguageSetting.js | 8 +- .../settings/profile}/ProfileDetails.js | 8 +- .../profile}/ProfileDetails.module.css | 0 .../pages/settings/profile/ProfileSettings.js | 2 +- .../settings/profile}/TimezoneSetting.js | 7 +- .../pages/settings/websites/WebsitesList.js | 16 +- .../pages/settings/websites/WebsitesTable.js | 10 +- components/pages/websites/WebsiteChartList.js | 4 +- hooks/useLocale.js | 2 + package.json | 8 +- pages/settings/index.js | 2 +- pages/settings/profile/index.js | 6 +- pages/settings/teams/[...id].js | 6 +- pages/settings/teams/index.js | 6 +- pages/settings/users/[...id].js | 6 +- pages/settings/users/index.js | 6 +- pages/settings/websites/[id]/index.js | 6 +- pages/settings/websites/index.js | 6 +- postcss.config.js | 1 - styles/index.css | 2 +- yarn.lock | 415 ++++++++++-------- 56 files changed, 599 insertions(+), 427 deletions(-) rename assets/{calendar-alt.svg => calendar.svg} (100%) create mode 100644 assets/clock.svg create mode 100644 assets/dashboard.svg rename components/{settings => buttons}/LanguageButton.js (100%) rename components/{settings => buttons}/LanguageButton.module.css (100%) rename components/{settings => buttons}/SettingsButton.js (89%) rename components/{settings => buttons}/SettingsButton.module.css (100%) rename components/{settings => buttons}/ThemeButton.js (100%) rename components/{settings => buttons}/ThemeButton.module.css (100%) rename components/{settings => buttons}/ThemeSetting.js (100%) rename components/{settings => buttons}/ThemeSetting.module.css (100%) rename components/{settings => buttons}/UserButton.js (100%) rename components/{settings => buttons}/UserButton.module.css (100%) create mode 100644 components/icons.js create mode 100644 components/layout/NavBar.js create mode 100644 components/layout/NavBar.module.css create mode 100644 components/layout/NavGroup.js create mode 100644 components/layout/NavGroup.module.css delete mode 100644 components/nav/Nav.js delete mode 100644 components/nav/Nav.module.css rename components/{settings => pages/dashboard}/DashboardSettingsButton.js (100%) rename components/{settings => pages/dashboard}/DashboardSettingsButton.module.css (100%) delete mode 100644 components/pages/settings/SettingsLayout.js delete mode 100644 components/pages/settings/SettingsLayout.module.css rename components/{settings => pages/settings/profile}/DateRangeSetting.js (100%) rename components/{settings => pages/settings/profile}/LanguageSetting.js (81%) rename components/{settings => pages/settings/profile}/ProfileDetails.js (81%) rename components/{settings => pages/settings/profile}/ProfileDetails.module.css (100%) rename components/{settings => pages/settings/profile}/TimezoneSetting.js (82%) diff --git a/assets/calendar-alt.svg b/assets/calendar.svg similarity index 100% rename from assets/calendar-alt.svg rename to assets/calendar.svg diff --git a/assets/clock.svg b/assets/clock.svg new file mode 100644 index 0000000000..f5359290be --- /dev/null +++ b/assets/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/dashboard.svg b/assets/dashboard.svg new file mode 100644 index 0000000000..b4cf27bd57 --- /dev/null +++ b/assets/dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/settings/LanguageButton.js b/components/buttons/LanguageButton.js similarity index 100% rename from components/settings/LanguageButton.js rename to components/buttons/LanguageButton.js diff --git a/components/settings/LanguageButton.module.css b/components/buttons/LanguageButton.module.css similarity index 100% rename from components/settings/LanguageButton.module.css rename to components/buttons/LanguageButton.module.css diff --git a/components/settings/SettingsButton.js b/components/buttons/SettingsButton.js similarity index 89% rename from components/settings/SettingsButton.js rename to components/buttons/SettingsButton.js index 596b36b9ca..7c2a2ae286 100644 --- a/components/settings/SettingsButton.js +++ b/components/buttons/SettingsButton.js @@ -1,7 +1,7 @@ import { useRef, useState } from 'react'; import { FormattedMessage } from 'react-intl'; -import TimezoneSetting from './TimezoneSetting'; -import DateRangeSetting from './DateRangeSetting'; +import TimezoneSetting from '../pages/settings/profile/TimezoneSetting'; +import DateRangeSetting from '../pages/settings/profile/DateRangeSetting'; import { Button, Icon } from 'react-basics'; import styles from './SettingsButton.module.css'; import Gear from 'assets/gear.svg'; diff --git a/components/settings/SettingsButton.module.css b/components/buttons/SettingsButton.module.css similarity index 100% rename from components/settings/SettingsButton.module.css rename to components/buttons/SettingsButton.module.css diff --git a/components/settings/ThemeButton.js b/components/buttons/ThemeButton.js similarity index 100% rename from components/settings/ThemeButton.js rename to components/buttons/ThemeButton.js diff --git a/components/settings/ThemeButton.module.css b/components/buttons/ThemeButton.module.css similarity index 100% rename from components/settings/ThemeButton.module.css rename to components/buttons/ThemeButton.module.css diff --git a/components/settings/ThemeSetting.js b/components/buttons/ThemeSetting.js similarity index 100% rename from components/settings/ThemeSetting.js rename to components/buttons/ThemeSetting.js diff --git a/components/settings/ThemeSetting.module.css b/components/buttons/ThemeSetting.module.css similarity index 100% rename from components/settings/ThemeSetting.module.css rename to components/buttons/ThemeSetting.module.css diff --git a/components/settings/UserButton.js b/components/buttons/UserButton.js similarity index 100% rename from components/settings/UserButton.js rename to components/buttons/UserButton.js diff --git a/components/settings/UserButton.module.css b/components/buttons/UserButton.module.css similarity index 100% rename from components/settings/UserButton.module.css rename to components/buttons/UserButton.module.css diff --git a/components/common/DateFilter.js b/components/common/DateFilter.js index 4a40e3fd45..77bab32f10 100644 --- a/components/common/DateFilter.js +++ b/components/common/DateFilter.js @@ -5,7 +5,7 @@ import { useIntl, defineMessages } from 'react-intl'; import DatePickerForm from 'components/metrics/DatePickerForm'; import useLocale from 'hooks/useLocale'; import { dateFormat } from 'lib/date'; -import Calendar from 'assets/calendar-alt.svg'; +import Calendar from 'assets/calendar.svg'; const messages = defineMessages({ today: { id: 'label.today', defaultMessage: 'Today' }, diff --git a/components/common/HamburgerButton.js b/components/common/HamburgerButton.js index cb36229731..906c5291f9 100644 --- a/components/common/HamburgerButton.js +++ b/components/common/HamburgerButton.js @@ -13,12 +13,12 @@ const menuItems = [ }, { label: , value: '/realtime' }, { - label: , - value: '/settings', + label: , + value: '/buttons', }, { label: , - value: '/settings/profile', + value: '/buttons/profile', }, { label: , value: '/logout' }, ]; diff --git a/components/icons.js b/components/icons.js new file mode 100644 index 0000000000..37a5d2d33a --- /dev/null +++ b/components/icons.js @@ -0,0 +1,13 @@ +import Calendar from 'assets/calendar.svg'; +import Clock from 'assets/clock.svg'; +import Dashboard from 'assets/dashboard.svg'; +import Gear from 'assets/gear.svg'; +import Globe from 'assets/globe.svg'; +import Logo from 'assets/logo.svg'; +import Moon from 'assets/moon.svg'; +import Profile from 'assets/profile.svg'; +import Sun from 'assets/sun.svg'; +import User from 'assets/user.svg'; +import Users from 'assets/users.svg'; + +export { Calendar, Clock, Dashboard, Gear, Globe, Logo, Moon, Profile, Sun, User, Users }; diff --git a/components/layout/AppLayout.js b/components/layout/AppLayout.js index 7c59b00798..8d9b15f4a8 100644 --- a/components/layout/AppLayout.js +++ b/components/layout/AppLayout.js @@ -1,22 +1,25 @@ import { Container } from 'react-basics'; import Head from 'next/head'; -import Header from 'components/layout/Header'; -import Footer from 'components/layout/Footer'; -import useLocale from 'hooks/useLocale'; +import NavBar from 'components/layout/NavBar'; import useRequireLogin from 'hooks/useRequireLogin'; +import styles from './AppLayout.module.css'; export default function AppLayout({ title, children }) { useRequireLogin(); - const { dir } = useLocale(); return ( - +
{title ? `${title} | umami` : 'umami'} -
-
{children}
-
- +
+ +
+
+ +
{children}
+ +
+
); } diff --git a/components/layout/AppLayout.module.css b/components/layout/AppLayout.module.css index 90b6c876fb..173100a953 100644 --- a/components/layout/AppLayout.module.css +++ b/components/layout/AppLayout.module.css @@ -1,6 +1,16 @@ .layout { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; + display: grid; + grid-template-rows: 1fr; + grid-template-columns: minmax(60px, 200px) 1fr; + height: 100vh; + overflow: hidden; +} + +.nav { + grid-row: 1 / 3; +} + +.body { + grid-area: 1 / 2; + overflow: auto; } diff --git a/components/layout/Footer.js b/components/layout/Footer.js index c8035fefea..ec1571fb94 100644 --- a/components/layout/Footer.js +++ b/components/layout/Footer.js @@ -1,33 +1,38 @@ +import { Row, Column } from 'react-basics'; import { useRouter } from 'next/router'; import Script from 'next/script'; import classNames from 'classnames'; -import { FormattedMessage } from 'react-intl'; +import { useIntl, defineMessages } from 'react-intl'; import Link from 'components/common/Link'; -import styles from './Footer.module.css'; import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants'; +import styles from './Footer.module.css'; + +const messages = defineMessages({ + poweredBy: { id: 'message.powered-by', defaultMessage: 'Powered by {name}' }, +}); -export default function Footer() { +export default function Footer({ className }) { const { pathname } = useRouter(); + const { formatMessage } = useIntl(); return ( -