diff --git a/src/components/Estilo/Toggle.css b/src/components/Estilo/Toggle.css
new file mode 100644
index 0000000..53827c6
--- /dev/null
+++ b/src/components/Estilo/Toggle.css
@@ -0,0 +1,9 @@
+.toggle-title{
+    color:#25396f;
+    font-weight: 1000;
+    font-size: 20px;
+}
+
+.container-title{
+    display: flex;
+}
\ No newline at end of file
diff --git a/src/components/ToggleSidebar.jsx b/src/components/ToggleSidebar.jsx
new file mode 100644
index 0000000..fc8e103
--- /dev/null
+++ b/src/components/ToggleSidebar.jsx
@@ -0,0 +1,104 @@
+import React from 'react'
+import {useState} from 'react'
+import { Link } from 'react-router-dom'
+import "./Estilo/Toggle.css"
+
+const ToggleSidebar = ({perfil, items}) => {
+    const [isOpen, setOpen] = useState(false)
+
+    const [openSubmenu, setOpenSubmenu] = useState(null);
+
+    console.log(items)
+
+     const renderLink = (item) => {
+    if (item.url && item.url.startsWith("/")) {
+      return (
+        <Link to={item.url} className="sidebar-link">
+          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+          <span>{item.name}</span>
+        </Link>
+      );
+    }
+    return (
+      <a href={item.url} className="sidebar-link" target="_blank" rel="noreferrer">
+        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+        <span>{item.name}</span>
+      </a>
+    );
+  };
+
+    const OpenClose = () => {
+        if(isOpen){
+            setOpen(false)
+        }else if(!isOpen){
+            setOpen(true)
+        }
+    }
+
+  return (
+    <div>
+        <div className='container-title'>
+            <p onClick={() => OpenClose()} className='toggle-title' > {perfil}</p>
+            
+            {isOpen ? <i class="bi bi-caret-down"></i> : <i class="bi bi-caret-left"></i>}
+        </div>
+    {isOpen &&
+    <div>
+        {items.map((item, index) => {
+
+             if (item.isTitle)
+                    return (
+                      <li key={index} className="sidebar-title">
+                        {null}
+                      </li>
+                    );
+
+                  if (item.submenu)
+                    return (
+                      <li
+                        key={index}
+                        className={`sidebar-item has-sub ${
+                          openSubmenu === item.key ? "active" : ""
+                        }`}
+                      >
+                        <button
+                          type="button"
+                          className="sidebar-link btn"
+                          //onClick={() => handleSubmenuClick(item.key)}
+                        >
+                          <i className={`bi bi-${item.icon}`}></i>
+                          <span>{item.name}</span>
+                        </button>
+                        <ul
+                          className={`submenu ${
+                            openSubmenu === item.key ? "active" : ""
+                          }`}
+                        >
+                          {item.submenu.map((subItem, subIndex) => (
+                            <li key={subIndex} className="submenu-item">
+                              {renderLink(subItem)}
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                    );
+
+                  return (
+                    <li key={index} className="sidebar-item">
+                      {renderLink(item)}
+                    </li>
+                  );
+
+})}
+      
+
+    </div>
+    
+
+
+    }
+    </div>
+  )
+}
+
+export default ToggleSidebar
\ No newline at end of file