✨

public/assets/logout.svg

@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="#FFF" stroke-width="2" d="M13,9 L13,2 L1,2 L1,22 L13,22 L13,15 M22,12 L5,12 M17,7 L22,12 L17,17"/>
+</svg>

src/components/sidebar/Sidebar.tsx

@@ -41,6 +41,7 @@ export default function Sidebar() {
         <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</li></Link>
         <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
         <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
+        <Link href='/'><button><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button></Link>
       </ul>
       <aside>
         <p>Nossos Gerentes estão prontos para atendê-los</p>

src/components/sidebar/SidebarView.ts

@@ -122,6 +122,27 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     display: none;
   }
 
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 10rem;
+    height: 3rem;
+
+    background-color: red;
+    border-style: none;
+
+    border-radius: 6px;
+
+    font-family: 'Poppins';
+    font-weight: 600;
+    font-size: 99.98%;
+    color: #fff;
+
+    cursor: pointer;
+  }
+
   @media (max-width: 1008px) {
     align-items: flex-start;