update: sidebar layout

elementor · Nov 14, 2024 · f39d57d · f39d57d
1 parent aeb12f2
commit f39d57d
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>