add link to homepage and versionselector to TopBar

src/common/Link/Link.tsx

@@ -43,6 +43,6 @@ const Link = forwardRef(
 Link.defaultProps = {
   color: 'secondary',
   underline: 'none',
-};
+} as Props;
 
 export default Link;

src/features/ServerPage/common/PageLayout/components/TopBar/TopBar.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
 import clsx from 'clsx';
+import { generatePath } from 'react-router';
 import { TFunction } from 'i18next';
+import useServer from '@features/ServerPage/libs/ServerContext/useServer';
+import * as ROUTES from '@config/routes';
 
-import { AppBar, Toolbar, Hidden, IconButton } from '@material-ui/core';
-import MenuIcon from '@material-ui/icons/Menu';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  AppBar,
+  Toolbar,
+  Hidden,
+  IconButton,
+  Typography,
+  Button,
+  Tooltip,
+} from '@material-ui/core';
+import { Menu as MenuIcon, Input as InputIcon } from '@material-ui/icons';
+import VersionSelector from '@common/VersionSelector/VersionSelector';
+import Link from '@common/Link/Link';
 
 export interface Props {
   className?: string;
@@ -11,15 +25,71 @@ export interface Props {
   openSidebar?: () => void;
 }
 
-const TopBar = ({ className, openSidebar }: Props) => {
+const useStyles = makeStyles(theme => ({
+  toolbar: {
+    justifyContent: 'space-between',
+  },
+  leftSideContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& > *': {
+      marginRight: theme.spacing(1),
+    },
+  },
+  rightSideContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& > *:not(:last-child)': {
+      marginRight: theme.spacing(1),
+    },
+  },
+}));
+
+const TopBar = ({ className, openSidebar, t }: Props) => {
+  const { key } = useServer();
+  const classes = useStyles();
+
   return (
     <AppBar className={clsx(className)}>
-      <Toolbar>
-        <Hidden lgUp>
-          <IconButton color="inherit" onClick={openSidebar}>
-            <MenuIcon />
-          </IconButton>
-        </Hidden>
+      <Toolbar className={classes.toolbar}>
+        <div className={classes.leftSideContainer}>
+          <Hidden lgUp>
+            <IconButton color="inherit" onClick={openSidebar}>
+              <MenuIcon />
+            </IconButton>
+          </Hidden>
+          <Typography variant="h4">
+            <Link
+              color="inherit"
+              to={generatePath(ROUTES.SERVER_PAGE.INDEX_PAGE, { key })}
+            >
+              {key}
+            </Link>
+          </Typography>
+        </div>
+        <div className={classes.rightSideContainer}>
+          <Link to={ROUTES.INDEX_PAGE} color="inherit">
+            <Hidden xsDown>
+              <Button startIcon={<InputIcon />}>
+                {t('pageLayout.topBar.home')}
+              </Button>
+            </Hidden>
+            <Hidden smUp>
+              <Tooltip
+                placement="bottom"
+                arrow
+                title={t<string>('pageLayout.topBar.home')}
+              >
+                <IconButton color="inherit">
+                  <InputIcon />
+                </IconButton>
+              </Tooltip>
+            </Hidden>
+          </Link>
+          <VersionSelector />
+        </div>
       </Toolbar>
     </AppBar>
   );

src/libs/i18n/en/server-page/common.ts

@@ -1,5 +1,8 @@
 const translations = {
   pageLayout: {
+    topBar: {
+      home: 'Home',
+    },
     sidebar: {
       routes: {
         dashboard: 'Dashboard',

src/libs/i18n/pl/server-page/common.ts

@@ -1,5 +1,8 @@
 const translations = {
   pageLayout: {
+    topBar: {
+      home: 'Home',
+    },
     sidebar: {
       routes: {
         dashboard: 'Dashboard',