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,40 @@
.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);
-}
-
-.container svg {
- color: var(--fg);
- padding: 0;
-}
-
.activeContainer {
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: 12px;
+ height: 40px;
+ align-items: center;
+}
+
+.inactiveContainer {
+ display: flex;
+ padding-left: 20px;
+ height: 40px;
+ align-items: center;
+}
+
+.inactiveContainer svg,
+.activeContainer svg {
+ color: var(--fg);
+ padding: 0;
}
.settingsIcon {
@@ -40,3 +46,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
@@ -6,6 +6,7 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import CommunityDrawer from './community-drawer.react.js';
import css from './community-picker.css';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -26,6 +27,7 @@
const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
const settingsButtonContainerClass = classNames({
[css.activeContainer]: isSettingsOpen,
+ [css.inactiveContainer]: !isSettingsOpen,
});
const openChat = React.useCallback(
@@ -46,6 +48,7 @@
);
const inboxButtonContainerClass = classNames({
[css.activeContainer]: isInboxOpen,
+ [css.inactiveContainer]: !isInboxOpen,
});
return (
@@ -53,6 +56,9 @@