Feature/wms 5 (#32)

* Start the home page

* Fix the Tile and Tile Grid Component and also created the homePage

* Recreated the tile component with TileBasic

* fix the tile component

* Fixed: tile length sizing

* Rename page export

* Added: page to routes

* Renamed: sidenav title

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>

src/components/TileComponent/Tile/TileGrid.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { makeStyles } from '@mui/styles';
+
+import Tile from './Tile';
+
+const useStyles = makeStyles({
+  menu: {
+    display: 'grid',
+    gap: '1.75rem',
+    backgroundColor: '#f9f9f9',
+    padding: '24px 48px',
+    '@media (max-width: 900px)': {
+      gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important'
+    },
+    '@media (max-width: 690px)': {
+      gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important'
+    }
+  }
+});
+
+export default function TileGrid({ tiles }) {
+  const classes = useStyles();
+  // to make the grid adjust its elemnts:
+  const myContainer = useRef(null);
+  let gridColumns = 2;
+  useEffect(() => {
+    const grid = myContainer.current;
+    const gridChild = grid.childElementCount;
+    gridColumns = Math.floor(Math.sqrt(gridChild));
+    grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`;
+  });
+  return (
+    <Box className={classes.menu} ref={myContainer}>
+      {tiles &&
+        tiles.map((tile) => (
+          <Tile key={tile.name + tile.path} data={{ name: tile.name, path: tile.path }}>
+            {' '}
+            {tile.icon}
+          </Tile>
+        ))}
+    </Box>
+  );
+}
+
+TileGrid.propTypes = {
+  // tiles: PropTypes.object({
+  //   name: PropTypes.string.isRequired,
+  //   path: PropTypes.string.isRequired,
+  //   icon: PropTypes.any
+  // })
+  tiles: PropTypes.any
+};