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>
+ </>
);
}
showLocal: boolean;
counts?: SiteAggregates;
admins?: PersonView[];
+ isMobile?: boolean;
}
interface SiteSidebarState {
render() {
return (
- <section id="sidebarInfo" className="card border-secondary mb-3">
- <div className="card-body">
- <div>
- <div className="mb-2">{this.siteName()}</div>
+ <div className="accordion">
+ <section id="sidebarInfo" className="card border-secondary mb-3">
+ <header
+ className="card-header d-flex align-items-center"
+ id="sidebarInfoHeader"
+ >
+ {this.siteName()}
{!this.state.collapsed && (
- <>
- <BannerIconHeader banner={this.props.site.banner} />
- {this.siteInfo()}
- </>
+ <BannerIconHeader banner={this.props.site.banner} />
)}
+ </header>
+
+ <div
+ id="sidebarInfoBody"
+ className="collapse show"
+ aria-labelledby="sidebarInfoHeader"
+ >
+ <div className="card-body">{this.siteInfo()}</div>
</div>
- </div>
- </section>
+ </section>
+ </div>
);
}
siteName() {
return (
- <h5 className="mb-0 d-inline">
- {this.props.site.name}
- <button
- className="btn btn-sm text-muted"
- onClick={linkEvent(this, this.handleCollapseSidebar)}
- aria-label={i18n.t("collapse")}
- data-tippy-content={i18n.t("collapse")}
- >
- {this.state.collapsed ? (
- <Icon icon="plus-square" classes="icon-inline" />
- ) : (
- <Icon icon="minus-square" classes="icon-inline" />
- )}
- </button>
- </h5>
+ <>
+ <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
+ {!this.props.isMobile && (
+ <button
+ type="button"
+ className="btn btn-sm"
+ onClick={linkEvent(this, this.handleCollapseSidebar)}
+ aria-label={
+ this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+ }
+ data-tippy-content={
+ this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+ }
+ data-bs-toggle="collapse"
+ data-bs-target="#sidebarInfoBody"
+ aria-expanded="true"
+ aria-controls="sidebarInfoBody"
+ >
+ {this.state.collapsed ? (
+ <Icon icon="plus-square" classes="icon-inline" />
+ ) : (
+ <Icon icon="minus-square" classes="icon-inline" />
+ )}
+ </button>
+ )}
+ </>
);
}