new menu style and added area for admins

src/Components/SideMenu/index.js

@@ -1,8 +1,12 @@
 import {
   AppstoreOutlined,
+  FileTextOutlined,
+  HistoryOutlined,
   LogoutOutlined,
   ScanOutlined,
+  SettingOutlined,
   SnippetsOutlined,
+  UsergroupAddOutlined,
 } from "@ant-design/icons";
 import { Badge, Divider, Menu } from "antd";
 import Sider from "antd/es/layout/Sider";
@@ -56,7 +60,7 @@ export default function SideMenu({ userSession, setUserSession }) {
           </div>
           <div className="Subtitle">Admin Dashboard</div>
           <Menu
-            mode="vertical"
+            mode="inline"
             onClick={(item) => {
               navigate(item.key);
             }}
@@ -70,9 +74,40 @@ export default function SideMenu({ userSession, setUserSession }) {
               },
               {
                 label: "Group Tasks",
+                type: "group",
+                children: [
+                  {
+                    label: "Overview",
                     icon: <SnippetsOutlined />,
                     key: "/group-tasks",
                   },
+                  {
+                    label: "History",
+                    icon: <HistoryOutlined />,
+                    key: "/group-tasks-history",
+                  },
+                ],
+              },
+              {
+                type: "divider",
+              },
+              {
+                label: "Admin Area",
+                icon: <SettingOutlined />,
+                key: "/admin-area",
+                children: [
+                  {
+                    label: "Roles",
+                    icon: <UsergroupAddOutlined />,
+                    key: "/admin-area/roles",
+                  },
+                  {
+                    label: "Logs",
+                    icon: <FileTextOutlined />,
+                    key: "/admin-area/logs",
+                  },
+                ],
+              },
             ]}
           />
         </div>