Updated mobile slide out sidebar

• Updated:
- mobile slide out sidebar

app/javascript/gabsocial/components/sidebar_xs.js

@@ -10,6 +10,7 @@ import Avatar from './avatar'
 import DisplayName from './display_name'
 import Button from './button'
 import Heading from './heading'
+import Image from './image'
 import Text from './text'
 import List from './list'
 import { closeSidebar } from '../actions/sidebar'
@@ -47,93 +48,6 @@ class SidebarXS extends ImmutablePureComponent {
     const acct = account.get('acct')
     const isPro = account.get('is_pro')
 
-    const mainItems = [
-      {
-        to: `/${acct}`,
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.profile),
-      },
-      {
-        icon: 'list',
-        to: '/lists',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.lists),
-      },
-      {
-        icon: 'star',
-        to: '/shortcuts',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.shortcuts),
-      },
-      {
-        icon: 'pro',
-        href: 'https://pro.gab.com',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.pro),
-      },
-      {
-        icon: 'shop',
-        href: 'https://shop.dissenter.com',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.shop),
-      },
-      {
-        icon: 'search',
-        to: '/search',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.search),
-      },
-      {
-        icon: 'explore',
-        to: '/timeline/pro',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.proFeed),
-      },
-      {
-        icon: 'cog',
-        href: '/settings/preferences',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.preferences),
-      },
-      // {
-      //   icon: 'group',
-      //   to: '/follow_requests',
-      //   onClick: this.handleSidebarClose,
-      //   title: intl.formatMessage(messages.follow_requests),
-      // },
-      {
-        icon: 'block',
-        to: '/settings/blocks',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.blocks),
-      },
-      {
-        icon: 'audio-mute',
-        to: '/settings/mutes',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.mutes),
-      },
-      // {
-      //   icon: 'report',
-      //   to: '/filters',
-      //   onClick: this.handleSidebarClose,
-      //   title: intl.formatMessage(messages.filters),
-      // },
-      {
-        onClick: this.props.onOpenDisplayModel, //on open display model
-        title: intl.formatMessage(messages.display),
-      },
-      {
-        href: 'https://help.gab.com',
-        onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.help),
-      },
-      {
-        href: '/auth/sign_out',
-        title: intl.formatMessage(messages.logout),
-      },
-    ]
-
     const containerClasses = CX({
       d: 1,
       posFixed: 1,
@@ -148,72 +62,143 @@ class SidebarXS extends ImmutablePureComponent {
     return (
       <div className={containerClasses}>
         <div className={[_s.d, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
-        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minW330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxW80PC].join(' ')}>
+        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgSecondary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minW330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxW80PC, _s.overflowYScroll].join(' ')}>
 
-          <div className={[_s.d, _s.flexRow, _s.px15, _s.h53PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiCenter, _s.jcCenter].join(' ')}>
-            <Heading size='h2'>Account Info</Heading>
+          <div
+            className={[_s.d, _s.h122PX].join(' ')}
+            onMouseEnter={this.handleOnMouseEnter}
+            onMouseLeave={this.handleOnMouseLeave}
+          >
+            <Image
+              alt={intl.formatMessage(messages.headerPhoto)}
+              className={_s.h122PX}
+              src={account.get('header_static')}
+            />
             <Button
               title='close'
-              color='secondary'
+              color='white'
               backgroundColor='none'
               onClick={this.handleSidebarClose}
               icon='close'
               iconSize='12px'
-              className={_s.mlAuto}
+              className={[_s.posAbs, _s.top0, _s.right0, _s.mr10, _s.mt10].join(' ')}
             />
           </div>
 
-          <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.calcH53PX].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.w100PC, _s.pb15, _s.bgPrimary, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+            <div className={[_s.d].join(' ')}>
 
-            <div className={[_s.d, _s.w100PC, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.d, _s.mt5].join(' ')}>
-                <Link
+              <div className={[_s.d, _s.flexRow].join(' ')}>
+                <div className={[_s.d, _s.mtNeg32PX].join(' ')}>
+                  <NavLink
                     to={`/${acct}`}
                     title={acct}
                     onClick={this.handleSidebarClose}
+                    className={[_s.boxShadowProfileAvatar, _s.w84PX, _s.circle].join(' ')}
                   >
-                  <Avatar account={account} size={60} />
-                </Link>
+                    <Avatar account={account} size={84} />
+                  </NavLink>
                 </div>
-              <div className={[_s.d, _s.my10, _s.w100PC].join(' ')}>
+                <div className={[_s.d, _s.px15, _s.pt10].join(' ')}>
                   <DisplayName account={account} isMultiline />
                 </div>
-
-              <div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
-                <NavLink
-                  to={`/${acct}/followers`}
-                  onClick={this.handleSidebarClose}
-                  title={intl.formatNumber(account.get('followers_count'))}
-                  className={[_s.text, _s.noUnderline, _s.underline_onHover, _s.mr15].join(' ')}
-                >
-                  <Text weight='bold'>{shortNumberFormat(account.get('followers_count'))}&nbsp;</Text>
-                  <Text>{intl.formatMessage(messages.followers)}</Text>
-                </NavLink>
-                <NavLink
-                  to={`/${acct}/following`}
-                  onClick={this.handleSidebarClose}
-                  title={intl.formatNumber(account.get('following_count'))}
-                  className={[_s.text, _s.noUnderline, _s.underline_onHover].join(' ')}
-                >
-                  <Text weight='bold'>{shortNumberFormat(account.get('following_count'))}&nbsp;</Text>
-                  <Text>{intl.formatMessage(messages.follows)}</Text>
-                </NavLink>
+              </div>
+            </div>
           </div>
 
-            </div>
-
-            <div className={[_s.d, _s.my10, _s.px15].join(' ')}>
-              <WrappedBundle component={ProgressPanel} />
-            </div>
-
-            <div className={[_s.d, _s.mb15, _s.boxShadowNone].join(' ')}>
+          <div className={[_s.d, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.boxShadowNone].join(' ')}>
               <List
-                items={mainItems}
-                size='large'
+                items={[
+                  {
+                    to: `/${acct}`,
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.profile),
+                  },
+                  {
+                    to: '/lists',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.lists),
+                  },
+                  {
+                    to: '/shortcuts',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.shortcuts),
+                  },
+                ]}
               />
             </div>
-
           </div>
+
+          <div className={[_s.d, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.mt5, _s.boxShadowNone].join(' ')}>
+              <div className={[_s.py10, _s.px15].join(' ')}>
+                <Text color='secondary' size='small' weight='medium'>Preferences</Text>
+              </div>
+
+              <List
+                items={[
+                  {
+                    onClick: this.props.onOpenDisplayModel, //on open display model
+                    title: intl.formatMessage(messages.display),
+                  },
+                  {
+                    href: '/settings/preferences',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.settings),
+                  },
+                  {
+                    to: '/settings/blocks',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.blocks),
+                  },
+                  {
+                    to: '/settings/mutes',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.mutes),
+                  },
+                ]}
+              />
+            </div>
+          </div>
+
+          <div className={[_s.d, _s.w100PC, _s.pb35, _s.mb15].join(' ')}>
+            <div className={[_s.d, _s.mt5, _s.boxShadowNone, _s.pb35, _s.mb15].join(' ')}>
+              <div className={[_s.py10, _s.px15].join(' ')}>
+                <Text color='secondary' size='small' weight='medium'>More</Text>
+              </div>
+
+              <List
+                items={[
+                  {
+                    to: '/timeline/pro',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.proFeed),
+                  },
+                  {
+                    href: 'https://pro.gab.com',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.pro),
+                  },
+                  {
+                    href: 'https://shop.dissenter.com',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.shop),
+                  },
+                  {
+                    href: 'https://help.gab.com',
+                    onClick: this.handleSidebarClose,
+                    title: intl.formatMessage(messages.help),
+                  },
+                  {
+                    href: '/auth/sign_out',
+                    title: intl.formatMessage(messages.logout),
+                  },
+                ]}
+              />
+            </div>
+          </div>
+
         </div>
       </div>
     )
@@ -225,7 +210,7 @@ const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
   follows: { id: 'account.follows', defaultMessage: 'Following' },
   profile: { id: 'account.profile', defaultMessage: 'Profile' },
-  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' },
   follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
@@ -243,6 +228,7 @@ const messages = defineMessages({
   display: { id: 'display_options', defaultMessage: 'Display Options' },
   proFeed: { id: 'pro_feed', defaultMessage: 'Pro Feed' },
   shortcuts: { id: 'shortcuts', defaultMessage: 'Shortcuts' },
+  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
 })
 
 const mapStateToProps = (state) => ({

app/javascript/styles/global.css

@@ -767,6 +767,7 @@ pre {
 .pt5 { padding-top: 5px; }
 .pt2 { padding-top: 2px; }
 
+.pb35 { padding-bottom: 35px; }
 .pb15 { padding-bottom: 15px; }
 .pb10 { padding-bottom: 10px; }
 .pb5 { padding-bottom: 5px; }