From 47a0b8d4b9c38c58744147d75637312651af17c5 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Fri, 15 Apr 2022 12:21:57 -0400 Subject: [PATCH] Adding sidebar and subscribed collapse. Fixes #609 (#622) --- src/shared/components/home/home.tsx | 80 +++++++++++++++++++++++------ 1 file changed, 65 insertions(+), 15 deletions(-) diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 95c34f04..3f6282a7 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -78,6 +78,8 @@ interface HomeState { showSubscribedMobile: boolean; showTrendingMobile: boolean; showSidebarMobile: boolean; + sidebarCollapsed: boolean; + subscribedCollapsed: boolean; loading: boolean; posts: PostView[]; comments: CommentView[]; @@ -111,6 +113,8 @@ export class Home extends Component { showSubscribedMobile: false, showTrendingMobile: false, showSidebarMobile: false, + subscribedCollapsed: false, + sidebarCollapsed: false, loading: true, posts: [], comments: [], @@ -366,16 +370,16 @@ export class Home extends Component { +
+
{this.sidebar()}
+
+ {UserService.Instance.myUserInfo && UserService.Instance.myUserInfo.follows.length > 0 && (
{this.subscribedCommunities()}
)} - -
-
{this.sidebar()}
-
)} @@ -424,20 +428,34 @@ export class Home extends Component { return (
- + # # +
-
    - {UserService.Instance.myUserInfo.follows.map(cfv => ( -
  • - -
  • - ))} -
+ {!this.state.subscribedCollapsed && ( +
    + {UserService.Instance.myUserInfo.follows.map(cfv => ( +
  • + +
  • + ))} +
+ )}
); } @@ -452,8 +470,12 @@ export class Home extends Component { {this.siteName()} {this.adminButtons()} - - {this.siteInfo()} + {!this.state.sidebarCollapsed && ( + <> + + {this.siteInfo()} + + )} ) : ( @@ -486,7 +508,25 @@ export class Home extends Component { siteName() { let site = this.state.siteRes.site_view.site; - return site.name &&
{site.name}
; + return ( + site.name && ( +
+ {site.name} + +
+ ) + ); } admins() { @@ -761,6 +801,16 @@ export class Home extends Component { i.setState(i.state); } + handleCollapseSubscribe(i: Home) { + i.state.subscribedCollapsed = !i.state.subscribedCollapsed; + i.setState(i.state); + } + + handleCollapseSidebar(i: Home) { + i.state.sidebarCollapsed = !i.state.sidebarCollapsed; + i.setState(i.state); + } + handlePageChange(page: number) { this.updateUrl({ page }); window.scrollTo(0, 0);