diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -51,10 +51,12 @@
import AccountSettings from './settings/account-settings.react.js';
import DangerZone from './settings/danger-zone.react.js';
import LeftLayoutAside from './sidebar/left-layout-aside.react.js';
+import SettingsSwitcher from './sidebar/settings-switcher.react.js';
import Splash from './splash/splash.react.js';
import './typography.css';
import css from './style.css';
import getTitle from './title/getTitle.js';
+import Topbar from './topbar/topbar.react.js';
import { type NavInfo } from './types/nav-types.js';
import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js';
import { WagmiENSCacheProvider, wagmiClient } from './utils/wagmi-utils.js';
@@ -176,21 +178,7 @@
stopDoubleClickPropagation = electron ? e => e.stopPropagation() : null;
renderMainContent() {
- let mainContent;
- const { tab, settingsSection } = this.props.navInfo;
- if (tab === 'calendar') {
- mainContent = ;
- } else if (tab === 'chat') {
- mainContent = ;
- } else if (tab === 'apps') {
- mainContent = ;
- } else if (tab === 'settings') {
- if (settingsSection === 'account') {
- mainContent = ;
- } else if (settingsSection === 'danger-zone') {
- mainContent = ;
- }
- }
+ const mainContent = this.getMainContentWithSwitcher();
let navigationArrows = null;
if (electron) {
@@ -238,15 +226,51 @@
-
-
-
+ {mainContent}
);
}
+
+ getMainContentWithSwitcher() {
+ const { tab, settingsSection } = this.props.navInfo;
+ let mainContent;
+
+ if (tab === 'settings') {
+ if (settingsSection === 'account') {
+ mainContent = ;
+ } else if (settingsSection === 'danger-zone') {
+ mainContent = ;
+ }
+ return (
+
+ );
+ }
+
+ if (tab === 'calendar') {
+ mainContent = ;
+ } else if (tab === 'chat') {
+ mainContent = ;
+ } else if (tab === 'apps') {
+ mainContent = ;
+ }
+
+ const mainContentClass = classnames(
+ css['main-content-container'],
+ css['main-content-container-column'],
+ );
+ return (
+
+ );
+ }
}
const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -1,7 +1,7 @@
div.container {
position: fixed;
width: 300px;
- top: 62px;
+ top: 126px;
bottom: 0;
background-attachment: fixed;
display: flex;
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -98,12 +98,19 @@
display: flex;
overflow: hidden;
}
+div.main-content-container-column {
+ flex-direction: column;
+}
div.main-content {
display: flex;
flex: 1;
overflow: hidden;
}
+.switcher {
+ border-right: 1px solid var(--border-color);
+}
+
div.upper-right {
position: absolute;
top: 0;