wip

src/frontend/Header.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { useTranslation } from 'react-i18next';
+import { useGetSessionQuery } from './services/session';
+import { useSelector } from './store';
+
+export type HeaderProps = {
+	title?: string;
+};
+
+export const Header: React.FC<HeaderProps> = ({title}) => {
+	const { t } = useTranslation();
+	const { data } = useGetSessionQuery(undefined);
+	const { isMobile } = useSelector(state => state.screen);
+
+	return (
+		<header className="navbar hstack shadow-2 bg-panel rounded _header">
+			<h1 className="navbar-title text-primary mb-0 text-100">
+				{<Link to="/">{t('title')}</Link>}
+				{title && <> / {title}</>}
+			</h1>
+			{data && (
+				<button className="btn flat ml-auto primary">
+					<i className="fas fa-circle-user"></i>
+					{!isMobile && <span className="ml-1">{data.username}<span className="text-dimmed">@{data.host}</span></span>}
+				</button>
+			)}
+		</header>
+	);
+};