[App 780] Navigation Sidebar

.eslintrc

@@ -9,6 +9,16 @@
     "babel",
     "react"
   ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["node_modules"]
+      },
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  },
   "env": {
     "browser": true,
     "node": true,
@@ -27,6 +37,7 @@
     "no-console": "off",
     "react-hooks/exhaustive-deps": "off",
     "react/jsx-max-props-per-line": [1, { "maximum": { "single": 2, "multi": 1 } }],
+    "react/jsx-first-prop-new-line": ["error", "multiline"],
     "strict": [ "error", "global" ],
     "curly": "warn",
     "import/order": [
@@ -47,7 +58,10 @@
           "caseInsensitive": false
         }
       }
-    ]
+    ],
+    "import/newline-after-import": ["error", {
+      "count": 1
+    }]
   },
   "parser": "@babel/eslint-parser"
 }

modules/settings/assets/css/style.css

@@ -1,28 +1,21 @@
 body {
 	background: #fff;
 }
+
 .wrap {
 	margin-top: 0;
 }
 
 html:not([dir='rtl']) #ea11y-app {
     margin-left: -20px;
     background: white;
+	height: calc(100vh - 32px);
 }
 
 html[dir='rtl'] #ea11y-app {
 	margin-right: -20px;
     background: white;
-}
-
-html:not([dir='rtl']) #ea11y-app-top-bar {
-	margin-left: -20px;
-	margin-bottom: 20px;
-}
-
-html[dir='rtl'] #ea11y-app-top-bar {
-	margin-right: -20px;
-	margin-bottom: 20px;
+	height: calc(100vh - 32px);
 }
 
 #ea11y-app * {
@@ -34,4 +27,4 @@ html[dir='rtl'] #ea11y-app-top-bar {
 	padding: 8px 12px;
 	box-shadow: none;
 	border-color: rgba(12, 13, 14, 0.23);
-}
+}

modules/settings/assets/js/admin.js

@@ -1,25 +1,15 @@
-import { ThemeProvider } from '@elementor/ui/styles';
+import { SettingsProvider, NotificationsProvider } from '@ea11y/hooks';
 import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
-import AdminTopBar from './components/admin-top-bar';
 import { PluginSettingsProvider } from './contexts/plugin-settings';
-import { SettingsProvider, NotificationsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
-const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
 
 // Can't use the settings hook in the global scope so accessing directly
 const isDevelopment = window?.ea11ySettingsData?.isDevelopment;
 const AppWrapper = Boolean( isDevelopment ) ? StrictMode : Fragment;
 
 const root = createRoot( rootNode );
-const topBar = createRoot( topBarNode );
-
-topBar.render(
-	<ThemeProvider colorScheme="light">
-		<AdminTopBar />
-	</ThemeProvider>,
-);
 
 root.render(
 	<AppWrapper>

modules/settings/assets/js/app.js

@@ -1,21 +1,46 @@
 import '../css/style.css';
+import Box from '@elementor/ui/Box';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
+import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications } from './components';
+import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from '@ea11y/components';
+import { useNotificationSettings, useSettings } from '@ea11y/hooks';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
-import { useNotificationSettings } from './hooks';
+import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
 	const { isConnected } = usePluginSettingsContext();
 	const {
 		notificationMessage,
 		notificationType,
 	} = useNotificationSettings();
+	const { selectedMenu } = useSettings();
 
+	// Accessing the selected menu item
+	const selectedParent = MenuItems[ selectedMenu.parent ];
+	const selectedChild = selectedMenu.child ? selectedParent.children[ selectedMenu.child ] : null;
 	return (
 		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
 				{ ! isConnected && <ConnectModal /> }
+				<Grid
+					display="flex"
+					flexDirection="row"
+					height="100%">
+					<Sidebar />
+					<Box
+						width="100%"
+						display="flex"
+						flexDirection="column"
+						justifyContent="space-between"
+					>
+						<AdminTopBar />
+						<Box p={ 1 } height="100%">
+							{ selectedChild ? selectedChild.page : selectedParent?.page }
+						</Box>
+						<BottomBar />
+					</Box>
+				</Grid>
 				<Notifications message={ notificationMessage } type={ notificationType } />
 			</ThemeProvider>
 		</DirectionProvider>

modules/settings/assets/js/components/admin-top-bar/index.js

@@ -1,31 +1,25 @@
 import HelpIcon from '@elementor/icons/HelpIcon';
 import AppBar from '@elementor/ui/AppBar';
-import Grid from '@elementor/ui/Grid';
 import Link from '@elementor/ui/Link';
 import Toolbar from '@elementor/ui/Toolbar';
-import Typography from '@elementor/ui/Typography';
 import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
-import ElementorLogo from '../../icons/elementor-logo';
 
-const AdminTopBar = () => {
+export const AdminTopBar = () => {
+	const toolBarStyle = {
+		justifyContent: 'end',
+		alignItems: 'center',
+		backgroundColor: 'background.default',
+		gap: '10px',
+		borderBottom: '1px solid rgba(0, 0, 0, 0.12)' };
 	return (
-		<AppBar position="static"
-			elevation={ 6 }
-			sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
-			<Toolbar direction="row"
-				sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } }
+		<AppBar position="static">
+			<Toolbar
+				direction="row"
+				sx={ toolBarStyle }
 				padding={ 2 }>
-				<Grid container={ true }
-					alignItems="center"
-					gap={ 1 }>
-					<ElementorLogo size="large" />
-					<Typography color="text.primary">
-						{ __( 'Accessibility', 'pojo-accessibility' ) }
-					</Typography>
-				</Grid>
-
-				<Link color="secondary"
+				<Link
+					color="secondary"
 					underline="hover"
 					href={ HELP_LINK }
 					target="_blank"
@@ -37,5 +31,3 @@ const AdminTopBar = () => {
 		</AppBar>
 	);
 };
-
-export default AdminTopBar;

modules/settings/assets/js/components/alignment-matrix-control/index.js

@@ -31,7 +31,8 @@ const AlignmentMatrixControl = () => {
 					{ __( 'Default Position', 'pojo-accessibility' ) }
 				</Typography>
 			</FormLabel>
-			<Box display="flex"
+			<Box
+				display="flex"
 				justifyContent="center"
 				padding={ 2 }
 				width="100%"
@@ -53,7 +54,8 @@ const AlignmentMatrixControl = () => {
 						width: '100px',
 					} }
 				>
-					{ options.map( ( option, i ) => <FormControlLabel sx={ { margin: 0 } }
+					{ options.map( ( option, i ) => <FormControlLabel
+						sx={ { margin: 0 } }
 						key={ i }
 						value={ option.value }
 						control={ <Radio color="secondary" /> } /> ) }

modules/settings/assets/js/components/bottom-bar/index.js

@@ -0,0 +1,18 @@
+import Box from '@elementor/ui/Box';
+import Button from '@elementor/ui/Button';
+import { __ } from '@wordpress/i18n';
+
+export const BottomBar = () => {
+	return (
+		<Box
+			display="flex"
+			justifyContent="end"
+			p={ 2 }
+			width="100%"
+			borderTop="1px solid rgba(0, 0, 0, 0.12)">
+			<Button variant="contained" color="info">
+				{ __( 'Save Changes', 'pojo-accessibility' ) }
+			</Button>
+		</Box>
+	);
+};

modules/settings/assets/js/components/color-picker/index.js

@@ -18,7 +18,8 @@ const ColorPicker = () => {
 					{ __( 'Color', 'pojo-accessibility' ) }
 				</Typography>
 			</FormLabel>
-			<Grid padding={ 1 }
+			<Grid
+				padding={ 1 }
 				border={ 1 }
 				borderColor="divider"
 				borderRadius={ 1 }
@@ -30,11 +31,13 @@ const ColorPicker = () => {
 					className="widget-settings-color-picker"
 				/>
 				<Grid marginTop={ 2 } display="flex">
-					<Box padding={ 2 }
+					<Box
+						padding={ 2 }
 						sx={ { backgroundColor: color } }
 						borderRadius={ 1 }
 						marginRight={ 1 }></Box>
-					<HexColorInput color={ color }
+					<HexColorInput
+						color={ color }
 						onChange={ setColor }
 						style={ {
 							width: '100%',