admins={admins}
counts={counts}
showLocal={showLocal(this.isoData)}
+ isMobile={true}
/>
)}
{showTrendingMobile && (
- <div className="col-12 card border-secondary mb-3">
- <div className="card-body">{this.trendingCommunities(true)}</div>
+ <div className="card border-secondary mb-3">
+ {this.trendingCommunities()}
</div>
)}
{showSubscribedMobile && (
- <div className="col-12 card border-secondary mb-3">
- <div className="card-body">{this.subscribedCommunities}</div>
+ <div className="card border-secondary mb-3">
+ {this.subscribedCommunities(true)}
</div>
)}
</div>
return (
<div id="sidebarContainer">
<section id="sidebarMain" className="card border-secondary mb-3">
- <div className="card-body">
- {this.trendingCommunities()}
- {canCreateCommunity(this.state.siteRes) && (
- <LinkButton
- path="/create_community"
- translationKey="create_a_community"
- />
- )}
- <LinkButton
- path="/communities"
- translationKey="explore_communities"
- />
- </div>
+ {this.trendingCommunities()}
</section>
<SiteSidebar
site={site}
showLocal={showLocal(this.isoData)}
/>
{this.hasFollows && (
- <section
- id="sidebarSubscribed"
- className="card border-secondary mb-3"
- >
- <div className="card-body">{this.subscribedCommunities}</div>
- </section>
+ <div className="accordion">
+ <section
+ id="sidebarSubscribed"
+ className="card border-secondary mb-3"
+ >
+ {this.subscribedCommunities(false)}
+ </section>
+ </div>
)}
</div>
);
}
- trendingCommunities(isMobile = false) {
+ trendingCommunities() {
switch (this.state.trendingCommunitiesRes?.state) {
case "loading":
return (
case "success": {
const trending = this.state.trendingCommunitiesRes.data.communities;
return (
- <div className={!isMobile ? "mb-2" : ""}>
- <h5>
- <T i18nKey="trending_communities">
- #
- <Link className="text-body" to="/communities">
+ <>
+ <header className="card-header d-flex align-items-center">
+ <h5 className="mb-0">
+ <T i18nKey="trending_communities">
#
- </Link>
- </T>
- </h5>
- <ul className="list-inline mb-0">
- {trending.map(cv => (
- <li
- key={cv.community.id}
- className="list-inline-item d-inline-block"
- >
- <CommunityLink community={cv.community} />
- </li>
- ))}
- </ul>
- </div>
+ <Link className="text-body" to="/communities">
+ #
+ </Link>
+ </T>
+ </h5>
+ </header>
+ <div className="card-body">
+ {trending.length > 0 && (
+ <ul className="list-inline">
+ {trending.map(cv => (
+ <li key={cv.community.id} className="list-inline-item">
+ <CommunityLink community={cv.community} />
+ </li>
+ ))}
+ </ul>
+ )}
+ {canCreateCommunity(this.state.siteRes) && (
+ <LinkButton
+ path="/create_community"
+ translationKey="create_a_community"
+ />
+ )}
+ <LinkButton
+ path="/communities"
+ translationKey="explore_communities"
+ />
+ </div>
+ </>
);
}
}
}
- get subscribedCommunities() {
+ subscribedCommunities(isMobile = false) {
const { subscribedCollapsed } = this.state;
return (
- <div>
- <h5>
- <T class="d-inline" i18nKey="subscribed_to_communities">
- #
- <Link className="text-body" to="/communities">
+ <>
+ <header
+ className="card-header d-flex align-items-center"
+ id="sidebarSubscribedHeader"
+ >
+ <h5 className="mb-0 d-inline">
+ <T class="d-inline" i18nKey="subscribed_to_communities">
#
- </Link>
- </T>
- <button
- className="btn btn-sm text-muted"
- onClick={linkEvent(this, this.handleCollapseSubscribe)}
- aria-label={i18n.t("collapse")}
- data-tippy-content={i18n.t("collapse")}
- >
- <Icon
- icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
- classes="icon-inline"
- />
- </button>
- </h5>
- {!subscribedCollapsed && (
- <ul className="list-inline mb-0">
- {UserService.Instance.myUserInfo?.follows.map(cfv => (
- <li
- key={cfv.community.id}
- className="list-inline-item d-inline-block"
- >
- <CommunityLink community={cfv.community} />
- </li>
- ))}
- </ul>
- )}
- </div>
+ <Link className="text-body" to="/communities">
+ #
+ </Link>
+ </T>
+ </h5>
+ {!isMobile && (
+ <button
+ type="button"
+ className="btn btn-sm text-muted"
+ onClick={linkEvent(this, this.handleCollapseSubscribe)}
+ aria-label={
+ subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+ }
+ data-tippy-content={
+ subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+ }
+ data-bs-toggle="collapse"
+ data-bs-target="#sidebarSubscribedBody"
+ aria-expanded="true"
+ aria-controls="sidebarSubscribedBody"
+ >
+ <Icon
+ icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
+ classes="icon-inline"
+ />
+ </button>
+ )}
+ </header>
+ <div
+ id="sidebarSubscribedBody"
+ className="collapse show"
+ aria-labelledby="sidebarSubscribedHeader"
+ >
+ <div className="card-body">
+ <ul className="list-inline mb-0">
+ {UserService.Instance.myUserInfo?.follows.map(cfv => (
+ <li
+ key={cfv.community.id}
+ className="list-inline-item d-inline-block"
+ >
+ <CommunityLink community={cfv.community} />
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ </>
);
}