Collapse sidebar on mobile. Fixes #335 (#340)

src/shared/components/community/community.tsx

@@ -1,4 +1,4 @@
-import { Component } from "inferno";
+import { Component, linkEvent } from "inferno";
 import {
   AddModToCommunityResponse,
   BanFromCommunityResponse,
@@ -71,6 +71,7 @@ interface State {
   dataType: DataType;
   sort: SortType;
   page: number;
+  showSidebarMobile: boolean;
 }
 
 interface CommunityProps {
@@ -101,6 +102,7 @@ export class Community extends Component<any, State> {
     sort: getSortTypeFromProps(this.props),
     page: getPageFromProps(this.props),
     siteRes: this.isoData.site_res,
+    showSidebarMobile: false,
   };
 
   constructor(props: any, context: any) {
@@ -246,32 +248,60 @@ export class Community extends Component<any, State> {
             <Spinner large />
           </h5>
         ) : (
-          <div class="row">
-            <div class="col-12 col-md-8">
-              <HtmlTags
-                title={this.documentTitle}
-                path={this.context.router.route.match.url}
-                description={cv.community.description}
-                image={cv.community.icon}
-              />
-              {this.communityInfo()}
-              {this.selects()}
-              {this.listings()}
-              <Paginator
-                page={this.state.page}
-                onChange={this.handlePageChange}
-              />
+          <>
+            <HtmlTags
+              title={this.documentTitle}
+              path={this.context.router.route.match.url}
+              description={cv.community.description}
+              image={cv.community.icon}
+            />
+
+            <div class="row">
+              <div class="col-12 col-md-8">
+                {this.communityInfo()}
+                <div class="d-block d-md-none">
+                  <button
+                    class="btn btn-secondary d-inline-block mb-2 mr-3"
+                    onClick={linkEvent(this, this.handleShowSidebarMobile)}
+                  >
+                    {i18n.t("sidebar")}{" "}
+                    <Icon
+                      icon={
+                        this.state.showSidebarMobile
+                          ? `minus-square`
+                          : `plus-square`
+                      }
+                      classes="icon-inline"
+                    />
+                  </button>
+                  {this.state.showSidebarMobile && (
+                    <Sidebar
+                      community_view={cv}
+                      moderators={this.state.communityRes.moderators}
+                      admins={this.state.siteRes.admins}
+                      online={this.state.communityRes.online}
+                      enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
+                    />
+                  )}
+                </div>
+                {this.selects()}
+                {this.listings()}
+                <Paginator
+                  page={this.state.page}
+                  onChange={this.handlePageChange}
+                />
+              </div>
+              <div class="d-none d-md-block col-md-4">
+                <Sidebar
+                  community_view={cv}
+                  moderators={this.state.communityRes.moderators}
+                  admins={this.state.siteRes.admins}
+                  online={this.state.communityRes.online}
+                  enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
+                />
+              </div>
             </div>
-            <div class="col-12 col-md-4">
-              <Sidebar
-                community_view={cv}
-                moderators={this.state.communityRes.moderators}
-                admins={this.state.siteRes.admins}
-                online={this.state.communityRes.online}
-                enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
-              />
-            </div>
-          </div>
+          </>
         )}
       </div>
     );
@@ -309,7 +339,7 @@ export class Community extends Component<any, State> {
   communityInfo() {
     let community = this.state.communityRes.community_view.community;
     return (
-      <div>
+      <div class="mb-2">
         <BannerIconHeader banner={community.banner} icon={community.icon} />
         <h5 class="mb-0">{community.title}</h5>
         <CommunityLink
@@ -319,7 +349,6 @@ export class Community extends Component<any, State> {
           muted
           hideAvatar
         />
-        <hr />
       </div>
     );
   }
@@ -365,6 +394,11 @@ export class Community extends Component<any, State> {
     window.scrollTo(0, 0);
   }
 
+  handleShowSidebarMobile(i: Community) {
+    i.state.showSidebarMobile = !i.state.showSidebarMobile;
+    i.setState(i.state);
+  }
+
   updateUrl(paramUpdates: UrlParams) {
     const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
     const sortStr = paramUpdates.sort || this.state.sort;

src/shared/components/home/home.tsx

@@ -72,6 +72,9 @@ interface HomeState {
   trendingCommunities: CommunityView[];
   siteRes: GetSiteResponse;
   showEditSite: boolean;
+  showSubscribedMobile: boolean;
+  showTrendingMobile: boolean;
+  showSidebarMobile: boolean;
   loading: boolean;
   posts: PostView[];
   comments: CommentView[];
@@ -103,6 +106,9 @@ export class Home extends Component<any, HomeState> {
     trendingCommunities: [],
     siteRes: this.isoData.site_res,
     showEditSite: false,
+    showSubscribedMobile: false,
+    showTrendingMobile: false,
+    showSidebarMobile: false,
     loading: true,
     posts: [],
     comments: [],
@@ -283,15 +289,81 @@ export class Home extends Component<any, HomeState> {
         {this.state.siteRes.site_view?.site && (
           <div class="row">
             <main role="main" class="col-12 col-md-8">
+              <div class="d-block d-md-none">{this.mobileView()}</div>
               {this.posts()}
             </main>
-            <aside class="col-12 col-md-4">{this.mySidebar()}</aside>
+            <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
           </div>
         )}
       </div>
     );
   }
 
+  mobileView() {
+    return (
+      <div class="row">
+        <div class="col-12">
+          {UserService.Instance.localUserView &&
+            this.state.subscribedCommunities.length > 0 && (
+              <button
+                class="btn btn-secondary d-inline-block mb-2 mr-3"
+                onClick={linkEvent(this, this.handleShowSubscribedMobile)}
+              >
+                {i18n.t("subscribed")}{" "}
+                <Icon
+                  icon={
+                    this.state.showSubscribedMobile
+                      ? `minus-square`
+                      : `plus-square`
+                  }
+                  classes="icon-inline"
+                />
+              </button>
+            )}
+          <button
+            class="btn btn-secondary d-inline-block mb-2 mr-3"
+            onClick={linkEvent(this, this.handleShowTrendingMobile)}
+          >
+            {i18n.t("trending")}{" "}
+            <Icon
+              icon={
+                this.state.showTrendingMobile ? `minus-square` : `plus-square`
+              }
+              classes="icon-inline"
+            />
+          </button>
+          <button
+            class="btn btn-secondary d-inline-block mb-2 mr-3"
+            onClick={linkEvent(this, this.handleShowSidebarMobile)}
+          >
+            {i18n.t("sidebar")}{" "}
+            <Icon
+              icon={
+                this.state.showSidebarMobile ? `minus-square` : `plus-square`
+              }
+              classes="icon-inline"
+            />
+          </button>
+          {this.state.showSubscribedMobile && (
+            <div class="col-12 card border-secondary mb-3">
+              <div class="card-body">{this.subscribedCommunities()}</div>
+            </div>
+          )}
+          {this.state.showTrendingMobile && (
+            <div class="col-12 card border-secondary mb-3">
+              <div class="card-body">{this.trendingCommunities()}</div>
+            </div>
+          )}
+          {this.state.showSidebarMobile && (
+            <div class="col-12 card border-secondary mb-3">
+              <div class="card-body">{this.sidebar()}</div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   mySidebar() {
     return (
       <div>
@@ -656,6 +728,21 @@ export class Home extends Component<any, HomeState> {
     this.setState(this.state);
   }
 
+  handleShowSubscribedMobile(i: Home) {
+    i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
+    i.setState(i.state);
+  }
+
+  handleShowTrendingMobile(i: Home) {
+    i.state.showTrendingMobile = !i.state.showTrendingMobile;
+    i.setState(i.state);
+  }
+
+  handleShowSidebarMobile(i: Home) {
+    i.state.showSidebarMobile = !i.state.showSidebarMobile;
+    i.setState(i.state);
+  }
+
   handlePageChange(page: number) {
     this.updateUrl({ page });
     window.scrollTo(0, 0);

src/shared/components/post/post.tsx

@@ -58,7 +58,7 @@ import {
 import { CommentForm } from "../comment/comment-form";
 import { CommentNodes } from "../comment/comment-nodes";
 import { HtmlTags } from "../common/html-tags";
-import { Spinner } from "../common/icon";
+import { Icon, Spinner } from "../common/icon";
 import { Sidebar } from "../community/sidebar";
 import { PostListing } from "./post-listing";
 
@@ -73,6 +73,7 @@ interface PostState {
   loading: boolean;
   crossPosts: PostView[];
   siteRes: GetSiteResponse;
+  showSidebarMobile: boolean;
 }
 
 export class Post extends Component<any, PostState> {
@@ -89,6 +90,7 @@ export class Post extends Component<any, PostState> {
     loading: true,
     crossPosts: [],
     siteRes: this.isoData.site_res,
+    showSidebarMobile: false,
   };
 
   constructor(props: any, context: any) {
@@ -280,13 +282,30 @@ export class Post extends Component<any, PostState> {
                 postId={this.state.postId}
                 disabled={pv.post.locked}
               />
+              <div class="d-block d-md-none">
+                <button
+                  class="btn btn-secondary d-inline-block mb-2 mr-3"
+                  onClick={linkEvent(this, this.handleShowSidebarMobile)}
+                >
+                  {i18n.t("sidebar")}{" "}
+                  <Icon
+                    icon={
+                      this.state.showSidebarMobile
+                        ? `minus-square`
+                        : `plus-square`
+                    }
+                    classes="icon-inline"
+                  />
+                </button>
+                {this.state.showSidebarMobile && this.sidebar()}
+              </div>
               {this.state.postRes.comments.length > 0 && this.sortRadios()}
               {this.state.commentViewType == CommentViewType.Tree &&
                 this.commentsTree()}
               {this.state.commentViewType == CommentViewType.Chat &&
                 this.commentsFlat()}
             </div>
-            <div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
+            <div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
           </div>
         )}
       </div>
@@ -422,6 +441,11 @@ export class Post extends Component<any, PostState> {
     i.setState(i.state);
   }
 
+  handleShowSidebarMobile(i: Post) {
+    i.state.showSidebarMobile = !i.state.showSidebarMobile;
+    i.setState(i.state);
+  }
+
   commentsTree() {
     return (
       <div>