Merge remote-tracking branch 'origin/main' into feat/add-badges-common-component

[lemmy-ui.git] / src / shared / components / community / sidebar.tsx

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 7023d133f5582435c3cbb685eb7bfab222ca1cf2..711ab5e664df4c9c6bf057d1ea614a7d2b300ab1 100644 (file)
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -39,7 +39,6 @@ interface SidebarProps {
   allLanguages: Language[];
   siteLanguages: number[];
   communityLanguages?: number[];
-  online: number;
   enableNsfw?: boolean;
   showIcon?: boolean;
   editable?: boolean;
@@ -132,41 +131,42 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <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>
         </div>
-      </div>
+      </aside>
     );
   }