owncast/web/components/ui/Sidebar/Sidebar.tsx
t1enne 2cfb336411 Added mobile chat and some responsiveness
weird 0 popping out when toggling chat. wasn't able to find which
component is responsible. Used bare mininum scss. May refactor in the
future.
2022-05-04 09:55:44 +02:00

30 lines
1 KiB
TypeScript

import Sider from 'antd/lib/layout/Sider';
import { useRecoilValue } from 'recoil';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import ChatContainer from '../../chat/ChatContainer';
import s from './Sidebar.module.scss';
import {
chatMessagesAtom,
chatVisibilityAtom,
chatStateAtom,
} from '../../stores/ClientConfigStore';
import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
import ChatTextField from '../../chat/ChatTextField/ChatTextField';
export default function Sidebar() {
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
const chatVisibility = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
const chatState = useRecoilValue<ChatState>(chatStateAtom);
return (
<Sider
className={`${s.root}`}
collapsed={chatVisibility === ChatVisibilityState.Hidden}
collapsedWidth={0}
width="100%"
>
<ChatContainer messages={messages} state={chatState} />
<ChatTextField />
</Sider>
);
}