1 import classNames from "classnames";
2 import { Component, linkEvent } from "inferno";
3 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
4 import { mdToHtml } from "../../markdown";
5 import { I18NextService } from "../../services";
6 import { Badges } from "../common/badges";
7 import { BannerIconHeader } from "../common/banner-icon-header";
8 import { Icon } from "../common/icon";
9 import { PersonListing } from "../person/person-listing";
11 interface SiteSidebarProps {
14 counts?: SiteAggregates;
15 admins?: PersonView[];
19 interface SiteSidebarState {
23 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
24 state: SiteSidebarState = {
28 constructor(props: any, context: any) {
29 super(props, context);
34 <div className="site-sidebar accordion">
35 <section id="sidebarInfo" className="card border-secondary mb-3">
36 <header className="card-header" id="sidebarInfoHeader">
38 {!this.state.collapsed && (
39 <BannerIconHeader banner={this.props.site.banner} />
43 {!this.state.collapsed && (
44 <div id="sidebarInfoBody" aria-labelledby="sidebarInfoHeader">
45 <div className="card-body">{this.siteInfo()}</div>
55 <div className={classNames({ "mb-2": !this.state.collapsed })}>
56 <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
57 {!this.props.isMobile && (
60 className="btn btn-sm"
61 onClick={linkEvent(this, this.handleCollapseSidebar)}
64 ? I18NextService.i18n.t("expand")
65 : I18NextService.i18n.t("collapse")
69 ? I18NextService.i18n.t("expand")
70 : I18NextService.i18n.t("collapse")
72 data-bs-toggle="collapse"
73 data-bs-target="#sidebarInfoBody"
75 aria-controls="sidebarInfoBody"
77 {this.state.collapsed ? (
78 <Icon icon="plus-square" classes="icon-inline" />
80 <Icon icon="minus-square" classes="icon-inline" />
89 const site = this.props.site;
92 {site.description && <h6>{site.description}</h6>}
93 {site.sidebar && this.siteSidebar(site.sidebar)}
94 {this.props.counts && <Badges counts={this.props.counts} />}
95 {this.props.admins && this.admins(this.props.admins)}
100 siteSidebar(sidebar: string) {
102 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
106 admins(admins: PersonView[]) {
108 <ul className="mt-1 list-inline small mb-0">
109 <li className="list-inline-item">{I18NextService.i18n.t("admins")}:</li>
111 <li key={av.person.id} className="list-inline-item">
112 <PersonListing person={av.person} />
119 handleCollapseSidebar(i: SiteSidebar) {
120 i.setState({ collapsed: !i.state.collapsed });