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 00000000..f5359290 --- /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 00000000..b4cf27bd --- /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 596b36b9..7c2a2ae2 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 4a40e3fd..77bab32f 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 cb362297..906c5291 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 00000000..37a5d2d3 --- /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 7c59b007..8d9b15f4 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 90b6c876..173100a9 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 c8035fef..ec1571fb 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'; -export default function Footer() { +const messages = defineMessages({ + poweredBy: { id: 'message.powered-by', defaultMessage: 'Powered by {name}' }, +}); + +export default function Footer({ className }) { const { pathname } = useRouter(); + const { formatMessage } = useIntl(); return ( -