✨ add icons to nav

public/assets/sidebar/summaryOperationsIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.375 5.23013L12.375 3.49831C12.261 3.43248 12.1317 3.39783 12 3.39783C11.8683 3.39783 11.739 3.43248 11.625 3.49831L8.625 5.23013C8.51101 5.29594 8.41635 5.3906 8.35052 5.50458C8.2847 5.61856 8.25003 5.74786 8.25 5.87948V8.93445L5.32913 14.7762C5.30706 14.8305 5.29167 14.8872 5.2833 14.9452L2.625 16.4801C2.51101 16.5459 2.41635 16.6406 2.35052 16.7546C2.2847 16.8686 2.25003 16.9978 2.25 17.1295V20.5945C2.24998 20.7261 2.28462 20.8555 2.35045 20.9695C2.41628 21.0836 2.51097 21.1783 2.625 21.2441L5.625 22.9759C5.73904 23.0417 5.86836 23.0763 6 23.0763C6.13164 23.0763 6.26096 23.0417 6.375 22.9759L9.375 21.2441C9.48903 21.1783 9.58372 21.0836 9.64955 20.9695C9.71538 20.8555 9.75002 20.7261 9.75 20.5945V19.612H14.25V20.5945C14.25 20.7261 14.2846 20.8555 14.3504 20.9695C14.4163 21.0836 14.511 21.1783 14.625 21.2441L17.625 22.9759C17.739 23.0417 17.8684 23.0763 18 23.0763C18.1316 23.0763 18.261 23.0417 18.375 22.9759L21.375 21.2441C21.489 21.1783 21.5837 21.0836 21.6496 20.9695C21.7154 20.8555 21.75 20.7261 21.75 20.5945V17.1295C21.75 16.9978 21.7154 16.8684 21.6496 16.7544C21.5837 16.6404 21.489 16.5457 21.375 16.4798L18.7167 14.9452C18.7083 14.8872 18.6929 14.8305 18.6709 14.7762L15.75 8.93475V5.87948C15.75 5.74786 15.7153 5.61856 15.6495 5.50458C15.5837 5.3906 15.489 5.29594 15.375 5.23013ZM9.75 6.31306L12 5.01406L14.25 6.31306V8.9109L12 10.2099L9.75 8.9109V6.31306ZM8.25 20.1609L6 21.4599L3.75 20.1609V17.563L6 16.264L8.25 17.563V20.1609ZM9.75 18.112V17.1295C9.75002 16.9978 9.71538 16.8684 9.64955 16.7544C9.58372 16.6404 9.48903 16.5457 9.375 16.4798L6.87585 15.0374L9.225 10.34L11.625 11.7257C11.739 11.7914 11.8684 11.826 12 11.826C12.1316 11.826 12.261 11.7914 12.375 11.7257L14.7754 10.34L17.1241 15.0374L14.625 16.4801C14.511 16.546 14.4163 16.6407 14.3504 16.7547C14.2846 16.8687 14.25 16.9981 14.25 17.1298V18.112H9.75ZM20.25 20.1609L18 21.4599L15.75 20.1609V17.563L18 16.264L20.25 17.563V20.1609Z" fill="#969BA0"/>
+</svg>

src/components/sidebar/Sidebar.tsx

@@ -25,22 +25,22 @@ export default function Sidebar() {
         <Image src='/assets/logo.svg' width={100} height={100} />
       </div>
       <ul>
-        <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li></Link>
+        <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
-        <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li></Link>
+        <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
-        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} >{'Resumo de Op. '}</li></Link>
+        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
-        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}</li>
+        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
         <div className='economiaDrawer drawer' >
         <Link href='/grossSavings'><li>Economia Bruta</li></Link>
         <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
         <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
         <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
         </div>
-        <Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}>{'Notícias >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
-        <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}>{'Info Setorial >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
-        <Link href='#'><li className={router.pathname=='/saq'? 'actualPath' : null}>{'SAQ >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/saq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'SAQ >'}</li></Link>
-        <Link href='#'><li className={router.pathname=='/aboutus'? 'actualPath' : null}>{'Sobre Nós >'}</li></Link>
+        <Link href='#'><li className={router.pathname=='/aboutus'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
-        <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}>{'Notificação >'}</li></Link>
+        <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='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}>{'Telemetria >'}</li></Link>
+        <Link href='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
       </ul>
       <aside>
         <p>Nossos Gerentes estão prontos para atendê-los</p>

src/components/sidebar/SidebarView.ts

@@ -32,6 +32,11 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     line-height: 27px;
 
     color: #254F7F;
+
+    stop-color: #254F7F;
+    .svg {
+      background-color: red;
+    }
   }
 
   ul {
@@ -55,19 +60,18 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
       width: 100%;
       height: 60px;
 
+      gap: 15px;
+
       font-style: normal;
       font-weight: 500;
       font-size: 16px;
       line-height: 27px;
-      /* identical to box height */
 
       color: #969BA0;
 
       cursor: pointer;
 
       padding-left: 40px;
-
-
     }
 
     .economiaDrawer {