Remove user menu when chat is not available

web/components/ui/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Layout } from 'antd';
+import { Layout, Tag, Tooltip } from 'antd';
 import { OwncastLogo, UserDropdown } from '../../common';
 import s from './Header.module.scss';
 
@@ -6,16 +6,22 @@ const { Header } = Layout;
 
 interface Props {
   name: string;
+  chatAvailable: boolean;
 }
 
-export default function HeaderComponent({ name = 'Your stream title' }: Props) {
+export default function HeaderComponent({ name = 'Your stream title', chatAvailable }: Props) {
   return (
     <Header className={`${s.header}`}>
       <div className={`${s.logo}`}>
         <OwncastLogo variant="contrast" />
         <span>{name}</span>
       </div>
-      <UserDropdown />
+      {chatAvailable && <UserDropdown />}
+      {!chatAvailable && (
+        <Tooltip title="Chat is available when the stream is live." placement="left">
+          <Tag color="processing">Chat offline</Tag>
+        </Tooltip>
+      )}
     </Header>
   );
 }