Merge pull request #547 from preetamm/develop

1] sidebar toggle feature 2] ask for confirmation before delete operation

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,5 @@
 import { Element } from 'react-scroll';
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useContext } from 'react';
 import * as styles from './LeftSidebar.module.css';
 import Awards from './sections/Awards';
 import Certifications from './sections/Certifications';
@@ -15,6 +15,7 @@ import Skills from './sections/Skills';
 import Social from './sections/Social';
 import Work from './sections/Work';
 import sections from '../../../data/leftSections';
+import SettingsContext from '../../../contexts/SettingsContext';
 
 const getComponent = (id) => {
   switch (id) {
@@ -60,14 +61,17 @@ const SidebarSection = ({ id, event }) => {
   );
 };
 
-const LeftSidebar = () => (
-  <div className="flex">
-    <LeftNavbar />
-
-    <div id="LeftSidebar" className={styles.container}>
-      {sections.map(SidebarSection)}
+const LeftSidebar = () => {
+  const { isSideBarOpen } = useContext(SettingsContext);
+  return (
+    <div className="flex">
+      <LeftNavbar />
+      {isSideBarOpen && (
+        <div id="LeftSidebar" className={styles.container}>
+          {sections.map(SidebarSection)}
+        </div>
+      )}
     </div>
-  </div>
-);
-
+  );
+};
 export default memo(LeftSidebar);

src/components/builder/lists/ListItem.js

@@ -24,6 +24,7 @@ const ListItem = ({
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const [anchorEl, setAnchorEl] = useState(null);
+  const [deleteClickCount, setDeleteClickCount] = useState(0);
 
   const handleClick = (event) => setAnchorEl(event.currentTarget);
   const toggleSwitchState = 'isVisible' in data ? data.isVisible : true;
@@ -81,6 +82,14 @@ const ListItem = ({
     });
   };
 
+  const checkConfirmationAndDelte = () => {
+    if (deleteClickCount === 1) {
+      handleDelete();
+    } else if (deleteClickCount < 1) {
+      setDeleteClickCount(deleteClickCount + 1);
+    }
+  };
+
   return (
     <Draggable draggableId={data.id} index={index}>
       {(dragProvided) => (
@@ -126,7 +135,10 @@ const ListItem = ({
               <Menu
                 keepMounted
                 anchorEl={anchorEl}
-                onClose={handleClose}
+                onClose={() => {
+                  setDeleteClickCount(0);
+                  handleClose();
+                }}
                 open={Boolean(anchorEl)}
               >
                 <div className="flex items-center space-around">
@@ -140,9 +152,11 @@ const ListItem = ({
                 <MenuItem onClick={handleEdit}>
                   {t('shared.buttons.edit')}
                 </MenuItem>
-                <MenuItem onClick={handleDelete}>
+                <MenuItem onClick={checkConfirmationAndDelte}>
                   <span className="text-red-600 font-medium">
-                    {t('shared.buttons.delete')}
+                    {deleteClickCount
+                      ? t('shared.buttons.confirmation')
+                      : t('shared.buttons.delete')}
                   </span>
                 </MenuItem>
               </Menu>

src/components/builder/right/RightNavbar.js

@@ -1,9 +1,23 @@
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
+import { BsBoxArrowRight, BsBoxArrowLeft } from 'react-icons/bs';
 import * as styles from './RightNavbar.module.css';
 import SectionIcon from '../../shared/SectionIcon';
 import SyncIndicator from './SyncIndicator';
 import sections from '../../../data/rightSections';
+import SettingsContext from '../../../contexts/SettingsContext';
 
+const SideBarToggleIcon = ({ className }) => {
+  const { isSideBarOpen, setSideBarToggle } = useContext(SettingsContext);
+  const ToggleIcon = isSideBarOpen ? BsBoxArrowRight : BsBoxArrowLeft;
+  return (
+    <button
+      className={className}
+      onClick={() => setSideBarToggle(!isSideBarOpen)}
+    >
+      <ToggleIcon size="18px" />
+    </button>
+  );
+};
 const RightNavbar = () => (
   <div className={styles.container}>
     <div className="grid grid-cols-1 gap-4 text-primary-500">
@@ -16,9 +30,8 @@ const RightNavbar = () => (
         />
       ))}
     </div>
-
-    <hr className="mt-auto my-6" />
-
+    <SideBarToggleIcon className="mt-auto" />
+    <hr className=" my-6" />
     <SyncIndicator />
   </div>
 );

src/components/builder/right/RightSidebar.js

@@ -1,5 +1,5 @@
 import { Element } from 'react-scroll';
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useContext } from 'react';
 import * as styles from './RightSidebar.module.css';
 import About from './sections/About';
 import Actions from './sections/Actions';
@@ -11,6 +11,7 @@ import RightNavbar from './RightNavbar';
 import Settings from './sections/Settings';
 import Templates from './sections/Templates';
 import sections from '../../../data/rightSections';
+import SettingsContext from '../../../contexts/SettingsContext';
 
 const getComponent = (id) => {
   switch (id) {
@@ -37,7 +38,6 @@ const getComponent = (id) => {
 
 const SidebarSection = ({ id, event }) => {
   const Component = getComponent(id);
-
   return (
     <Fragment key={id}>
       <Element name={id}>
@@ -48,14 +48,18 @@ const SidebarSection = ({ id, event }) => {
   );
 };
 
-const RightSidebar = () => (
-  <div className="flex">
-    <div id="RightSidebar" className={styles.container}>
-      {sections.map(SidebarSection)}
+const RightSidebar = () => {
+  const { isSideBarOpen } = useContext(SettingsContext);
+  return (
+    <div className="flex">
+      {isSideBarOpen && (
+        <div id="RightSidebar" className={styles.container}>
+          {sections.map(SidebarSection)}
+        </div>
+      )}
+      <RightNavbar />
     </div>
-
-    <RightNavbar />
-  </div>
-);
+  );
+};
 
 export default memo(RightSidebar);