- <div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.communityTitle()}
- {this.props.editable && this.adminButtons()}
- {myUSerInfo && this.subscribe()}
- {this.canPost && this.createPost()}
- {myUSerInfo && this.blockCommunity()}
- {!myUSerInfo && (
- <div className="alert alert-info" role="alert">
- <T
- i18nKey="community_not_logged_in_alert"
- interpolation={{
- community: name,
- instance: hostname(actor_id),
- }}
- >
- #<code className="user-select-all">#</code>#
- </T>
- </div>
- )}
- </div>
- </div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.description()}
- <Badges
- online={this.props.online}
- community_view={this.props.community_view}
- counts={this.props.community_view.counts}
- />
- {this.mods()}
- </div>
+ <aside className="mb-3">
+ <div id="sidebarContainer">
+ <section id="sidebarMain" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.communityTitle()}
+ {this.props.editable && this.adminButtons()}
+ {myUSerInfo && this.subscribe()}
+ {this.canPost && this.createPost()}
+ {myUSerInfo && this.blockCommunity()}
+ {!myUSerInfo && (
+ <div className="alert alert-info" role="alert">
+ <T
+ i18nKey="community_not_logged_in_alert"
+ interpolation={{
+ community: name,
+ instance: hostname(actor_id),
+ }}
+ >
+ #<code className="user-select-all">#</code>#
+ </T>
+ </div>
+ )}
+ </div>
+ </section>
+ <section id="sidebarInfo" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.description()}
+ <Badges
+ community_view={this.props.community_view}
+ counts={this.props.community_view.counts}
+ />
+ {this.mods()}
+ </div>
+ </section>