Slicing UI/UX

src/components/Sidebar/Profile.jsx

@@ -1,37 +1,228 @@
-// src/components/Profile.js
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { ProfileImage } from '../../assets/images';
+import { FaUserCircle, FaBuilding } from 'react-icons/fa';
 
-const Profile = () => (
-  <div className="profile-section" style={styles.container}>
-    <img
-      src={ProfileImage}
-      alt="Profile"
-      className="profile-image"
-      style={styles.image}
-    />
-    <span className="profile-name" style={styles.name}>Alexander Pierce</span>
-  </div>
-);
+const Profile = () => {
+  const [show, setShow] = useState(false);
+  const [modalPosition, setModalPosition] = useState({});
+  const [isMobile, setIsMobile] = useState(false);
+  const navigate = useNavigate();
+
+  const handleClose = () => setShow(false);
+
+  const handleShow = (event) => {
+    if (!isMobile) {
+      const rect = event.currentTarget.getBoundingClientRect();
+      setModalPosition({
+        top: rect.bottom + window.scrollY - 31,
+        left: rect.left + rect.width / 2 + 274,
+      });
+    } else {
+      setModalPosition({
+        top: window.scrollY + window.innerHeight / 2 - 150,
+        left: window.innerWidth / 2 - 2,
+      });
+    }
+    setShow(true);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleNavigation = (path) => {
+    setShow(false);
+    navigate(path);
+  };
+
+  return (
+    <>
+      <div
+        className="profile-section"
+        style={styles.container}
+        onClick={handleShow}
+      >
+        <img
+          src={ProfileImage}
+          alt="Profile"
+          className="profile-image"
+          style={styles.image}
+        />
+        <span className="profile-name" style={styles.name}>
+          Alexander Pierce
+        </span>
+      </div>
+
+      {show && (
+        <div
+          style={{
+            ...styles.modalContainer,
+            ...modalPosition,
+          }}
+        >
+          <div style={styles.modal}>
+            <button
+              style={styles.closeButton}
+              onClick={handleClose}
+            >
+              ×
+            </button>
+            <div style={styles.modalContent}>
+              <img
+                src={ProfileImage}
+                alt="Profile"
+                style={styles.modalImage}
+              />
+              <h5>Murtadi Mujaidi</h5>
+              <p>Mujaidi@gmail.com</p>
+              <hr />
+              <div
+                style={styles.navItem}
+                onClick={() => handleNavigation('/my-account')}
+              >
+                <FaUserCircle style={styles.icon} />
+                <p style={styles.navText}>My Account</p>
+              </div>
+              <div
+                style={styles.navItem}
+                onClick={() => handleNavigation('/company-access')}
+              >
+                <FaBuilding style={styles.icon} />
+                <p style={styles.navText}>Company Access</p>
+              </div>
+              <div style={styles.accessButtons}>
+                <button
+                  style={styles.productionButton}
+                  onClick={() => handleNavigation('/production')}
+                >
+                  PRODUCTION
+                </button>
+                <button
+                  style={styles.trialButton}
+                  onClick={() => handleNavigation('/trial')}
+                >
+                  TRIAL
+                </button>
+              </div>
+            </div>
+            <button
+              style={styles.logoutButton}
+              onClick={handleClose}
+            >
+              Log Out
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
 
 export default Profile;
 
-
 const styles = {
-    container: {
-      padding: '10px',
-      display: 'flex',
-      alignItems: 'center',
-      marginTop: '2vh'
-    },
-    image: {
-      width: '40px',
-      height: '40px',
-      borderRadius: '50%',
-      marginRight: '10px',
-    },
-    name: {
-      fontWeight: 'bold',
-    },
+  container: {
+    padding: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '2vh',
+    cursor: 'pointer',
+  },
+  image: {
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    marginRight: '10px',
+  },
+  name: {
+    fontWeight: 'bold',
+  },
+  modalContainer: {
+    position: 'absolute',
+    zIndex: 1050,
+    transform: 'translateX(-50%)',
+    width: '300px',
+  },
+  modal: {
+    backgroundColor: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    padding: '20px',
+    textAlign: 'center',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: '10px',
+    right: '10px',
+    background: 'transparent',
+    border: 'none',
+    fontSize: '18px',
+    cursor: 'pointer',
+  },
+  modalContent: {
+    textAlign: 'center',
+  },
+  modalImage: {
+    width: '80px',
+    height: '80px',
+    borderRadius: '50%',
+    marginBottom: '15px',
+  },
+  navItem: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    borderBottom: '1px solid #ddd',
+  },
+  icon: {
+    marginRight: '10px',
+    fontSize: '20px',
+    color: '#4F75FF',    
+  },
+  navText: {
+    fontSize: '16px',
+    color: '#333',
+    marginTop: '0.8rem'
+  },
+  accessButtons: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '10px',
+    marginTop: '20px',
+  },
+  productionButton: {
+    backgroundColor: '#8BE8AB',
+    color: '#000',
+    border: 'none',
+    borderRadius: '4px',
+    padding: '8px 20px',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+  },
+  trialButton: {
+    backgroundColor: '#ddd',
+    color: '#333',
+    border: 'none',
+    borderRadius: '4px',
+    padding: '8px 20px',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+  },
+  logoutButton: {
+    marginTop: '20px',
+    width: '100%',
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '4px',
+    padding: '10px 0',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+  },
 };
-  

src/components/Sidebar/dataMenu.js

@@ -149,7 +149,7 @@ const dataMenu = [
                     subMenus: [
                         { name: 'Settings', link: '/wa-settings'}, // Changed the name
                         { name: 'Activity Summary', link: '/wa-summary'}, // Changed the name
-                        { name: 'Transaction Logs', link: '/wa-transaction'},
+                        { name: 'WA Transaction Logs', link: '/wa-transaction'},
                         { name: 'Bulk Sending', link: '/wa-bulk'}, // Changed the name
                     ],
                 },
@@ -176,39 +176,39 @@ const dataMenu = [
                         name: 'Electronic Certificate Verification', // Changed the name
                         target: 'collapseElectro',
                         subMenus: [
-                            { name: 'Verify Certificate', link: '/identify-electro-verify'}, // Changed the name
-                            { name: 'Transaction Logs', link: '/identify-electro-transaction'},
+                            { name: 'Verify Certificate', link: '/identity-electro-verify'}, // Changed the name
+                            { name: 'Electronic Transaction', link: '/identity-electro-transaction'},
                         ],
                     },
                     {
                         name: 'NPWP Verification', // Changed the name
                         target: 'collapseIdentifyNpwp',
                         subMenus: [
-                            { name: 'Transaction Logs', link: '/identify-npwp-transaction'}
+                            { name: 'Npwp Transaction', link: '/identity-npwp-transaction'}
                         ],
                     },
                     {
                         name: 'Tax Number Verification', // Changed the name
                         target: 'collapseTax',
                         subMenus: [
-                            { name: 'Verify Tax Number', link: '/identify-tax-verify'}, // Changed the name
-                            { name: 'Transaction Logs', link: '/identify-tax-transaction'}
+                            { name: 'Verify Tax Number', link: '/identity-tax-verify'}, // Changed the name
+                            { name: 'Tax Transaction', link: '/identity-tax-transaction'}
                         ],
                     },
                     {
                         name: 'Income Verification', // Changed the name
                         target: 'collapseIncome',
                         subMenus: [
-                            { name: 'Verify Income', link: '/identify-income-verify'}, // Changed the name
-                            { name: 'Transaction Logs', link: '/identify-income-transaction'}
+                            { name: 'Verify Income', link: '/identity-income-verify'}, // Changed the name
+                            { name: 'Income Transaction', link: '/identity-income-transaction'}
                         ],
                     },
                     {
                         name: 'ID Verification', // Changed the name
                         target: 'collapseIdVerification',
                         subMenus: [
-                            { name: 'Verify ID', link: '/identify-id-verify'}, // Changed the name
-                            { name: 'Transaction Logs', link: '/identify-id-transaction'}
+                            { name: 'Verify ID', link: '/identity-id-verify'}, // Changed the name
+                            { name: 'Verify ID Transaction', link: '/identity-id-transaction'}
                         ],
                     },
                 ],

src/components/index.js

@@ -7,5 +7,5 @@ export {
     Navbar,
     Sidebar,
     Main,
-    Footer
+    Footer,
 }