1 import { Component, linkEvent } from "inferno";
2 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { mdToHtml } from "../../utils";
5 import { Badges } from "../common/badges";
6 import { BannerIconHeader } from "../common/banner-icon-header";
7 import { Icon } from "../common/icon";
8 import { PersonListing } from "../person/person-listing";
10 interface SiteSidebarProps {
13 counts?: SiteAggregates;
14 admins?: PersonView[];
18 interface SiteSidebarState {
22 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
23 state: SiteSidebarState = {
27 constructor(props: any, context: any) {
28 super(props, context);
33 <div className="card border-secondary mb-3">
34 <div className="card-body">
36 <div className="mb-2">{this.siteName()}</div>
37 {!this.state.collapsed && (
39 <BannerIconHeader banner={this.props.site.banner} />
51 <h5 className="mb-0 d-inline">
52 {this.props.site.name}
54 className="btn btn-sm text-muted"
55 onClick={linkEvent(this, this.handleCollapseSidebar)}
56 aria-label={i18n.t("collapse")}
57 data-tippy-content={i18n.t("collapse")}
59 {this.state.collapsed ? (
60 <Icon icon="plus-square" classes="icon-inline" />
62 <Icon icon="minus-square" classes="icon-inline" />
70 const site = this.props.site;
73 {site.description && <h6>{site.description}</h6>}
74 {site.sidebar && this.siteSidebar(site.sidebar)}
75 {this.props.counts && (
76 <Badges online={this.props.online ?? 1} counts={this.props.counts} />
78 {this.props.admins && this.admins(this.props.admins)}
83 siteSidebar(sidebar: string) {
85 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(sidebar)} />
89 admins(admins: PersonView[]) {
91 <ul className="mt-1 list-inline small mb-0">
92 <li className="list-inline-item">{i18n.t("admins")}:</li>
94 <li key={av.person.id} className="list-inline-item">
95 <PersonListing person={av.person} />
102 handleCollapseSidebar(i: SiteSidebar) {
103 i.setState({ collapsed: !i.state.collapsed });