Add ProfilePage component and integrate with navigation and sidebar

Introduced `ProfilePage` to display user profile details, including name, email, and role. Updated navigation logic in `App.js` to support the new "profile" view and added click-to-navigate functionality in the sidebar user section. Enhanced sidebar user actions with improved logout interactions.

src/components/Profile/ProfilePage.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import '../../styles/components.css';
+
+const ProfileRow = ({ label, value, icon }) => (
+  <div className="form-row">
+    <div className="form-group" style={{ flex: 1 }}>
+      <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {icon && <i className={icon} aria-hidden="true"></i>}
+        {label}
+      </label>
+      <div className="input" style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', color: 'var(--text)' }}>
+        {value}
+      </div>
+    </div>
+  </div>
+);
+
+const ProfilePage = () => {
+  // En esta versión demo, la información del usuario es estática.
+  // En una integración real, estos datos vendrían del backend o del contexto de autenticación.
+  const user = {
+    initials: 'JP',
+    name: 'Juan Pérez',
+    role: 'Administrador',
+    email: 'juan.perez@empresa.com',
+  };
+
+  return (
+    <section className="content-wrapper">
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-user" style={{ marginRight: 8 }}></i>
+            Perfil de usuario
+          </h3>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          <div className="user-avatar" aria-hidden="true">{user.initials}</div>
+          <div>
+            <div className="user-name" style={{ margin: 0 }}>{user.name}</div>
+            <div className="user-role" style={{ margin: 0 }}>{user.role}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-id-card" style={{ marginRight: 8 }}></i>
+            Información
+          </h3>
+        </div>
+        <div>
+          <ProfileRow label="Nombre" value={user.name} icon="fas fa-user" />
+          <ProfileRow label="Correo" value={user.email} icon="fas fa-envelope" />
+          <ProfileRow label="Rol" value={user.role} icon="fas fa-user-shield" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProfilePage;