Add docs in navbar

ui/src/menu.tsx

@@ -8,6 +8,7 @@ import {
   faMagnifyingGlass,
   faTableList,
   faTerminal,
+  faBook,
 } from '@fortawesome/free-solid-svg-icons';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Typography } from '@mui/material';
@@ -53,6 +54,12 @@ export const mainListItems = (
       to="http://:8090"
       external
     />
+    <ListItemDoc
+      text="Terminal"
+      icon={<Icon icon={faBook} />}
+      to="https://blackdagger.readthedocs.io/en/latest/"
+      external
+    />
   </React.Fragment>
 );
 
@@ -97,3 +104,32 @@ function ListItem({ icon, text, to, external }: ListItemProps) {
     </ListItemButton>
   );
 }
+
+function ListItemDoc({ icon, text, to, external }: ListItemProps) {
+  let listItemProps = {};
+
+  if (external) {
+    // Directly use the 'to' prop for external links
+    listItemProps = { component: "a", href: to, target: '_blank', rel: 'noopener noreferrer' };
+  } else {
+    // For internal routing, adjust as needed for your routing library
+    listItemProps = { component: "a", href: to }; 
+  }
+  return (
+    <ListItemButton component="a" {...listItemProps}>
+      <ListItemIcon sx={{ color: 'black' }}>{icon}</ListItemIcon>
+      <ListItemText
+        primary={
+          <Typography
+            sx={{
+              color: 'black',
+              fontWeight: '400',
+            }}
+          >
+            {text}
+          </Typography>
+        }
+      />
+    </ListItemButton>
+  );
+}