added sidebar toggle feature and confirmation prompt before deleting any list-item

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);

src/contexts/SettingsContext.js

@@ -9,6 +9,8 @@ const defaultState = {
   setTheme: () => {},
   language: 'en',
   setLanguage: () => {},
+  isSideBarOpen: true,
+  setSideBarToggle: () => {},
 };
 
 const SettingsContext = createContext(defaultState);
@@ -16,7 +18,9 @@ const SettingsContext = createContext(defaultState);
 const SettingsProvider = ({ children }) => {
   const [theme, setTheme] = useState(defaultState.theme);
   const [language, setLanguage] = useState(defaultState.theme);
-
+  const [isSideBarOpen, setSideBarToggle] = useState(
+    defaultState.isSideBarOpen,
+  );
   useEffect(() => {
     const prefTheme = localStorage.getItem('theme') || defaultState.theme;
     const prefLanguage =
@@ -45,6 +49,8 @@ const SettingsProvider = ({ children }) => {
         setTheme,
         language,
         setLanguage,
+        isSideBarOpen,
+        setSideBarToggle,
       }}
     >
       {children}

src/pages/app/builder.js

@@ -10,12 +10,14 @@ import DatabaseContext from '../../contexts/DatabaseContext';
 import LeftSidebar from '../../components/builder/left/LeftSidebar';
 import LoadingScreen from '../../components/router/LoadingScreen';
 import RightSidebar from '../../components/builder/right/RightSidebar';
+import SettingsContext from '../../contexts/SettingsContext';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
   const { getResume } = useContext(DatabaseContext);
+  const { isSideBarOpen } = useContext(SettingsContext);
 
   const handleLoadDemoData = () => {
     dispatch({ type: 'load_demo_data' });
@@ -58,7 +60,7 @@ const Builder = ({ id }) => {
         <div className={styles.left}>
           <LeftSidebar />
         </div>
-        <div className={styles.center}>
+        <div className={`${styles.center} ${!isSideBarOpen && 'flex-1'}`}>
           <Artboard />
         </div>
         <div className={styles.right}>
@@ -66,7 +68,7 @@ const Builder = ({ id }) => {
         </div>
       </div>
     );
-  }, [loading]);
+  }, [loading, isSideBarOpen]);
 };
 
 export default memo(Builder);

src/pages/app/builder.module.css

@@ -3,21 +3,24 @@
 }
 
 .left {
-  width: calc(100vw / 4);
   box-shadow: var(--left-shadow);
+  max-width: calc(100vw / 4);
+  flex-shrink: 1;
 
   @apply bg-primary-50 absolute top-0 bottom-0 left-0 z-10;
 }
 
 .center {
+  flex-shrink: 1;
   width: calc(100vw / 2);
 
   @apply relative z-0 h-screen overflow-scroll flex flex-col justify-items-center;
 }
 
 .right {
-  width: calc(100vw / 4);
+  max-width: calc(100vw / 4);
   box-shadow: var(--right-shadow);
+  flex-shrink: 1;
 
   @apply bg-primary-50 absolute top-0 bottom-0 right-0 z-10;
 }

src/styles/global.css

@@ -7,6 +7,22 @@ body {
   @apply transition-colors duration-200 ease-in-out;
 }
 
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: white;
+}
+
+*::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px grey;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  border-radius: 20px;
+  outline: 1px solid slategrey;
+}
+
 a {
   @apply font-semibold;
 }