diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -1,34 +1,44 @@
.container {
display: flex;
flex-direction: column;
- align-items: center;
- width: 84px;
background: var(--community-bg);
padding: 24px 0 32px 0;
border-right: 1px solid var(--border-color);
flex-grow: 1;
+ overflow: auto;
+ width: 400px;
}
.spacer {
flex-grow: 1;
}
-.container button {
- color: var(--fg);
+.activeContainer {
+ display: flex;
+ width: 100%;
+ box-sizing: border-box;
+ border-left: 8px solid var(--community-settings-selected);
+ border-right: 8px solid transparent;
+ padding-left: 12px;
+ height: 40px;
+ align-items: center;
}
-.container svg {
+.activeContainer svg {
color: var(--fg);
padding: 0;
}
-.activeContainer {
+.inactiveContainer {
display: flex;
- justify-content: center;
- width: 100%;
- box-sizing: border-box;
- border-left: 8px solid var(--community-settings-selected);
- border-right: 8px solid transparent;
+ padding-left: 20px;
+ height: 40px;
+ align-items: center;
+}
+
+.inactiveContainer svg {
+ color: var(--fg);
+ padding: 0;
}
.settingsIcon {
@@ -40,3 +50,8 @@
height: 30px;
border-radius: 50%;
}
+
+.drawerWrapper {
+ align-self: flex-start;
+ width: 100%;
+}
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -7,6 +7,7 @@
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import SWMansionIcon from '../SWMansionIcon.react';
+import CommunityDrawer from './community-drawer.react';
import css from './community-picker.css';
function CommunityPicker(): React.Node {
@@ -25,6 +26,7 @@
const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
const settingsButtonContainerClass = classNames({
[css.activeContainer]: isSettingsOpen,
+ [css.inactiveContainer]: !isSettingsOpen,
});
const openChat = React.useCallback(
@@ -45,6 +47,7 @@
);
const inboxButtonContainerClass = classNames({
[css.activeContainer]: isInboxOpen,
+ [css.inactiveContainer]: !isInboxOpen,
});
return (
@@ -52,6 +55,9 @@