fix: added api button on web component

web/src/components/header.tsx

@@ -5,6 +5,13 @@ import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
+import Button from '@mui/material/Button'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+
+const NODE_ENV = process.env.NODE_ENV
+const PORT_API = process.env.PORT_API
+const baseUrl =
+  NODE_ENV === 'development' ? `http://localhost:${PORT_API ?? 5000}` : ''
 
 const Header = (props: any) => {
   const history = useHistory()
@@ -52,6 +59,18 @@ const Header = (props: any) => {
             component={Link}
           />
         </Tabs>
+        <Button
+          href={`${baseUrl}/SASjsApi`}
+          target="_blank"
+          rel="noreferrer"
+          variant="contained"
+          color="primary"
+          size="large"
+          startIcon={<OpenInNewIcon />}
+          style={{ marginLeft: '50px' }}
+        >
+          API Docs
+        </Button>
       </Toolbar>
     </AppBar>
   )