diff --git a/app/javascript/gabsocial/components/settings_sidebar.js b/app/javascript/gabsocial/components/settings_sidebar.js
new file mode 100644
index 00000000..11ccba18
--- /dev/null
+++ b/app/javascript/gabsocial/components/settings_sidebar.js
@@ -0,0 +1,94 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import { me } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import SidebarSectionTitle from './sidebar_section_title'
+import SidebarSectionItem from './sidebar_section_item'
+import Heading from './heading'
+import BackButton from './back_button'
+
+const messages = defineMessages({
+ blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
+ mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
+ preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+ menu: { id: 'menu', defaultMessage: 'Menu' },
+})
+
+const mapStateToProps = (state) => ({
+ account: makeGetAccount()(state, me),
+})
+
+export default
+@connect(mapStateToProps)
+@injectIntl
+class Sidebar extends ImmutablePureComponent {
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ account: ImmutablePropTypes.map,
+ title: PropTypes.string,
+ }
+
+ render() {
+ const {
+ intl,
+ account,
+ title,
+ } = this.props
+
+ if (!me || !account) return null
+
+ const menuItems = [
+ {
+ title: intl.formatMessage(messages.blocks),
+ to: '/settings/blocks',
+ },
+ {
+ title: intl.formatMessage(messages.mutes),
+ to: '/settings/mutes',
+ },
+ {
+ title: intl.formatMessage(messages.preferences),
+ href: '/settings/preferences',
+ },
+ ]
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {intl.formatMessage(messages.blocks)}
+
+
({
@@ -15,12 +16,8 @@ const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
- onFetchMutes() {
- dispatch(fetchMutes())
- },
- onExpandMutes() {
- dispatch(expandMutes())
- },
+ onFetchMutes: () => dispatch(fetchMutes()),
+ onExpandMutes: () => dispatch(expandMutes()),
})
export default
@@ -53,6 +50,11 @@ class Mutes extends ImmutablePureComponent {
return (
+
+
+
+
+
- { /*
-
-
-
-
-
- */ }
-
- { /*
-
-
- */ }
-
+
+
+
diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js
index 0bcce14a..a3c10f5a 100644
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -1,48 +1,80 @@
-import Sticky from 'react-stickynode'
-import Search from '../components/search'
-import ColumnHeader from '../components/column_header'
-import Sidebar from '../components/sidebar'
+import {
+ CX,
+ BREAKPOINT_EXTRA_SMALL,
+} from '../constants'
+import { me } from '../initial_state'
+import SidebarXS from '../components/sidebar_xs'
+import NavigationBar from '../components/navigation_bar'
+import FooterBar from '../components/footer_bar'
+import Responsive from '../features/ui/util/responsive_component'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import SettingsSidebar from '../components/settings_sidebar'
export default class SettingsLayout extends PureComponent {
+
static propTypes = {
- actions: PropTypes.array,
- tabs: PropTypes.array,
title: PropTypes.string,
}
render() {
- const { children, actions, tabs, title } = this.props
+ const { children, title } = this.props
+
+ const mainBlockClasses = CX({
+ default: 1,
+ width1015PX: 1,
+ flexRow: 1,
+ justifyContentEnd: 1,
+ py15: 1,
+ mlAuto: !me,
+ mrAuto: !me,
+ })
return (
-
+
-
+
+
+
-
+
-
+
-
+
+
+
-
+
+
-
+
+
+
+
+
+
+
+
)
}