MuDBase/client/src/components/appbar/AppBar.tsx

import React from 'react';
import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton, Typography } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import SearchIcon from '@material-ui/icons/Search';
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import { Link, useHistory } from 'react-router-dom';
import { WindowType } from '../windows/Windows';

export enum AppBarTab {
    Query = 0,
    Tags,
}

export const appBarTabProps: Record<any, any> = {
    [AppBarTab.Query]: {
        label: <Box display="flex"><SearchIcon/><Typography variant="button">Query</Typography></Box>,
        path: "/query",
    },
    [AppBarTab.Tags]: {
        label: <Box display="flex"><LocalOfferIcon/><Typography variant="button">Tags</Typography></Box>,
        path: "/tags",
    },
}

export default function AppBar(props: {
    selectedTab: AppBarTab | null
}) {
    const history = useHistory();

    return <>
        <MuiAppBar position="static" style={{ background: 'grey' }}>
            <Box display="flex" alignItems="center">
                <Link to="/">
                    <Box m={0.5} display="flex" alignItems="center">
                        <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
                    </Box>
                </Link>
                <Tabs
                    value={props.selectedTab}
                    onChange={(e: any, val: AppBarTab) => history.push(appBarTabProps[val].path)}
                    variant="scrollable"
                    scrollButtons="auto"
                >
                    {Object.keys(appBarTabProps).map((tab: any, idx: number) => <MuiTab
                        label={appBarTabProps[tab].label}
                        value={idx}
                    />)}
                </Tabs>
            </Box>
        </MuiAppBar>
    </>
}