GH-622: add dictionary page

apps/languages/frontend/src/App.tsx

@@ -5,11 +5,14 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import './App.css'
 import AppbarMain from './components/AppbarMain'
 import MainDrawer from './components/MainDrawer'
+import { Utilities } from './features/utilities/Utilities'
+import Dictionary from './features/utilities/Dictionary'
 import { ArticleDetail } from './features/articles/ArticleDetail'
 import { ArticleList } from './features/articles/ArticleList'
 import ArticleNew from './features/articles/ArticleNew'
 import { Counter } from './features/counter/Counter'
 import Demo from './features/demo/Demo'
+
 function App() {
   return (
     <div>
@@ -24,11 +27,27 @@ function App() {
             </Box>
           </Route>
           <Route path="/ArticleList">
-            <ArticleList />
+            <Box sx={{ display: 'flex' }}>
+              <CssBaseline />
+              <AppbarMain></AppbarMain>
+              <MainDrawer></MainDrawer>
+              <ArticleList />
+            </Box>
+          </Route>
+          <Route path="/Utilities" exact>
+            <Box sx={{ display: 'flex' }}>
+              <CssBaseline />
+              <AppbarMain></AppbarMain>
+              <MainDrawer></MainDrawer>
+              <Utilities />
+            </Box>
           </Route>
           <Route path="/Demo">
             <Demo />
           </Route>
+          <Route path="/Dictionary">
+            <Dictionary />
+          </Route>
           <Route path="/Counter">
             <Counter />
           </Route>

apps/languages/frontend/src/components/MainDrawer.css

@@ -0,0 +1,16 @@
+.section {
+  color: #bdbdbd;
+  font-size: 14px;
+  margin-left: 16px;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  color: inherit;
+}

apps/languages/frontend/src/components/MainDrawer.tsx

@@ -9,17 +9,36 @@ import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import FeedIcon from '@mui/icons-material/Feed'
 import SearchIcon from '@mui/icons-material/Search'
+import AcUnitIcon from '@mui/icons-material/AcUnit'
+import CollectionsIcon from '@mui/icons-material/Collections'
+import './MainDrawer.css'
+import { Link } from 'react-router-dom'
 
 const drawerWidth = 240
 
 const items = [
   {
     text: 'Articles',
     icon: <FeedIcon />,
+    to: 'ArticleList',
   },
   {
     text: 'Explore',
     icon: <SearchIcon />,
+    to: 'Explore',
+  },
+]
+
+const items2 = [
+  {
+    text: 'Albums',
+    icon: <CollectionsIcon />,
+    to: 'Albums',
+  },
+  {
+    text: 'Utilities',
+    icon: <AcUnitIcon />,
+    to: 'Utilities',
   },
 ]
 
@@ -37,12 +56,28 @@ function MainDrawer() {
       <Box sx={{ overflow: 'auto' }}>
         <List>
           {items.map((item, index) => (
-            <ListItem key={item.text} disablePadding>
-              <ListItemButton>
-                <ListItemIcon>{item.icon}</ListItemIcon>
-                <ListItemText primary={item.text} />
-              </ListItemButton>
-            </ListItem>
+            <Link to={item.to}>
+              <ListItem key={item.text} disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.text} />
+                </ListItemButton>
+              </ListItem>
+            </Link>
+          ))}
+        </List>
+
+        <h5 className={'section'}>LIBRARY</h5>
+        <List>
+          {items2.map((item, index) => (
+            <Link to={item.to}>
+              <ListItem key={item.text} disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.text} />
+                </ListItemButton>
+              </ListItem>
+            </Link>
           ))}
         </List>
       </Box>

apps/languages/frontend/src/features/utilities/Dictionary.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+interface Props {}
+
+const Dictionary: React.FC<Props> = () => {
+
+  return (
+    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+      <Typography variant="h3">Dictionary</Typography>
+      <hr/>
+    </Box>
+  );
+}
+
+export default Dictionary;

apps/languages/frontend/src/features/utilities/Utilities.tsx

@@ -0,0 +1,35 @@
+import Box from '@mui/material/Box'
+import Toolbar from '@mui/material/Toolbar'
+import Card from '@mui/material/Card'
+import CardActions from '@mui/material/CardActions'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import { Link } from 'react-router-dom'
+
+export function Utilities() {
+  return (
+    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+      <Toolbar />
+      <h3>Utilities</h3>
+      <hr />
+
+      <Card sx={{ minWidth: 275 }}>
+        <CardContent>
+          <Typography variant="h5" color="text.secondary">
+            Dictionary
+          </Typography>
+          <Typography variant="body1">
+            A comprehensive resource for language and meaning
+            <br />
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Link to="Dictionary">
+            <Button size="medium">Organize</Button>
+          </Link>
+        </CardActions>
+      </Card>
+    </Box>
+  )
+}