From f39d57d87c586df99257410e3e96937da136b51b Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Thu, 14 Nov 2024 11:52:35 +0530
Subject: [PATCH] update: sidebar layout

---
 modules/settings/assets/js/app.js             |  2 +-
 modules/settings/assets/js/icons/index.js     |  1 +
 modules/settings/assets/js/icons/widget.js    | 30 ++++++++++
 modules/settings/assets/js/layouts/sidebar.js | 57 ++++++++++++-------
 4 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 modules/settings/assets/js/icons/widget.js

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 61a4850..399490c 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -18,7 +18,7 @@ const App = () => {
 	return (
 		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
-				{ isConnected && <ConnectModal /> }
+				{ ! isConnected && <ConnectModal /> }
 				<Grid display="flex"
 					flexDirection="row">
 					<Sidebar />
diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js
index d683d1c..85e89e2 100644
--- a/modules/settings/assets/js/icons/index.js
+++ b/modules/settings/assets/js/icons/index.js
@@ -1,2 +1,3 @@
 export { ElementorLogo } from './elementor-logo';
 export { SquareRoundedChevronsLeft } from './square-rounded-chevrons-left';
+export { WidgetIcon } from './widget';
diff --git a/modules/settings/assets/js/icons/widget.js b/modules/settings/assets/js/icons/widget.js
new file mode 100644
index 0000000..95455e8
--- /dev/null
+++ b/modules/settings/assets/js/icons/widget.js
@@ -0,0 +1,30 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+export const WidgetIcon = ( { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 20 20" fontSize={ size }>
+			<g id="widget">
+				<path id="Vector"
+					d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+					fill="white"
+					stroke="black"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round" />
+				<path id="Vector_2"
+					d="M8.33333 13.75L10 11.25M10 11.25L11.6667 13.75M10 11.25V9.58333M10 9.58333L12.5 8.75M10 9.58333L7.5 8.75"
+					stroke="black"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round" />
+				<path id="Vector_3"
+					d="M9.9987 6.66683C10.2288 6.66683 10.4154 6.48028 10.4154 6.25016C10.4154 6.02004 10.2288 5.8335 9.9987 5.8335C9.76858 5.8335 9.58203 6.02004 9.58203 6.25016C9.58203 6.48028 9.76858 6.66683 9.9987 6.66683Z"
+					fill="black"
+					stroke="black"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round" />
+			</g>
+		</SvgIcon>
+	);
+};
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index 19f402e..b28429f 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -11,25 +11,28 @@ import ListItemButton from '@elementor/ui/ListItemButton';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
 import Paper from '@elementor/ui/Paper';
+import Popover from '@elementor/ui/Popover';
 import Toolbar from '@elementor/ui/Toolbar';
 import Typography from '@elementor/ui/Typography';
 import { styled } from '@elementor/ui/styles';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ElementorLogo, SquareRoundedChevronsLeft } from '../icons';
+import { ElementorLogo, SquareRoundedChevronsLeft, WidgetIcon } from '../icons';
 
 export const Sidebar = () => {
 	const [ showWidgetMenu, setShowWidgetMenu ] = useState( true );
 	const [ openDrawer, setOpenDrawer ] = useState( true );
+	const [ openMyAccountMenu, setOpenMyAccountMenu ] = useState( false );
+	const anchorEl = useRef( null );
 
 	const StyledDrawer = styled( Drawer )
 	` & .MuiDrawer-paper {
-    margin-left: 160px;
-    margin-top: 30px;
-    min-width: 80px;
-    max-width: 260px;
-    width: ${ openDrawer ? '100%' : '0' }px;
-    transition: all 0.3s;
+		position: static;
+    	min-width: 90px;
+    	max-width: 260px;
+    	width: ${ openDrawer ? '100%' : '0' }px;
+    	transition: all 0.3s;
+		height: 600px;
 }`;
 
 	return (
@@ -38,7 +41,7 @@ export const Sidebar = () => {
 		>
 			<Box>
 				<AppBar position="static" color="transparent" >
-					<Toolbar disableGutters>
+					<Toolbar disableGutters sx={ { justifyContent: 'space-between' } } >
 						<Box display="flex"
 							alignItems="center"
 							justifyContent="center"
@@ -57,13 +60,13 @@ export const Sidebar = () => {
 				</AppBar>
 				<List>
 					<ListItem disableGutters>
-						<ListItemButton onClick={ () => setShowWidgetMenu( ! showWidgetMenu ) }>
+						<ListItemButton onClick={ () => setShowWidgetMenu( ! showWidgetMenu ) } sx={ { justifyContent: 'center' } } >
 							<ListItemIcon>
-								<CheckedCircleIcon />
+								<WidgetIcon />
 							</ListItemIcon>
 							<ListItemText primary="Widget" hidden={ ! openDrawer } />
-							<ListItemIcon>
-								<ChevronDownIcon />
+							<ListItemIcon sx={ { display: ! openDrawer ? 'none' : 'default' } }>
+								<ChevronDownIcon sx={ { rotate: showWidgetMenu ? '180deg' : '0' } } />
 							</ListItemIcon>
 						</ListItemButton>
 					</ListItem>
@@ -83,25 +86,41 @@ export const Sidebar = () => {
 							</>
 						) }
 					<ListItem disableGutters>
-						<ListItemButton >
+						<ListItemButton sx={ { justifyContent: 'center' } }>
 							<ListItemIcon>
-								<PagesIcon />
+								<PagesIcon sx={ { color: 'common.black' } } />
 							</ListItemIcon>
 							<ListItemText primary="Accessibility Statement" hidden={ ! openDrawer } />
 						</ListItemButton>
 					</ListItem>
 				</List>
-				<List sx={ { position: 'absolute', bottom: 0 } }>
+				<List sx={ { position: 'absolute', bottom: 0 } } ref={ anchorEl } >
 					<ListItem>
-						<ListItemButton>
+						<ListItemButton onClick={ () => setOpenMyAccountMenu( ! openMyAccountMenu ) }>
 							<ListItemIcon>
 								<UserIcon />
 							</ListItemIcon>
-							<ListItemText primary="My Account" hidden={ ! openDrawer } />
+							<ListItemText primary="My Account"
+								hidden={ ! openDrawer } />
 							<ListItemIcon>
-								<ChevronDownIcon />
+								<ChevronDownIcon sx={ { rotate: '180deg', display: ! openDrawer ? 'none' : 'inherit' } } />
 							</ListItemIcon>
 						</ListItemButton>
+						<Popover
+							open={ openMyAccountMenu }
+							anchorOrigin={ {
+								vertical: 'bottom',
+								horizontal: 'left',
+							} }
+							transformOrigin={ {
+								vertical: 'top',
+								horizontal: 'left',
+							} }
+							anchorEl={ anchorEl.current }
+							hideBackdrop={ true }
+							anchorReference="anchorEl">
+							Testing
+						</Popover>
 					</ListItem>
 				</List>
 			</Box>