adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Menu In progress 

Links and some movimetation done.

thin fixes in menu yet be make.
pull/2/head
RenatoDiGiacomo 2022-07-13 17:02:37 -03:00
parent 62631cf874
commit 5ca38e84a3
22 changed files with 208 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/assets/icons/Menu/Accounttree.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 8.25V2.25H11.25V4.5H6.75V2.25H1.5V8.25H6.75V6H8.25V13.5H11.25V15.75H16.5V9.75H11.25V12H9.75V6H11.25V8.25H16.5ZM5.25 6.75H3V3.75H5.25V6.75ZM12.75 11.25H15V14.25H12.75V11.25ZM12.75 3.75H15V6.75H12.75V3.75Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

5
frontend/src/assets/icons/Menu/Configuration.svg 100644
View File

@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 9C14.625 9.255 14.6025 9.495 14.5725 9.735L16.155 10.9725C16.2975 11.085 16.335 11.2875 16.245 11.4525L14.745 14.0475C14.6775 14.1675 14.55 14.235 14.4225 14.235C14.3775 14.235 14.3325 14.2275 14.2875 14.2125L12.42 13.4625C12.03 13.755 11.61 14.01 11.1525 14.1975L10.8675 16.185C10.845 16.365 10.6875 16.5 10.5 16.5H7.5C7.3125 16.5 7.155 16.365 7.1325 16.185L6.8475 14.1975C6.39 14.01 5.97 13.7625 5.58 13.4625L3.7125 14.2125C3.675 14.2275 3.63 14.235 3.585 14.235C3.45 14.235 3.3225 14.1675 3.255 14.0475L1.755 11.4525C1.665 11.2875 1.7025 11.085 1.845 10.9725L3.4275 9.735C3.3975 9.495 3.375 9.2475 3.375 9C3.375 8.7525 3.3975 8.505 3.4275 8.265L1.845 7.0275C1.7025 6.915 1.6575 6.7125 1.755 6.5475L3.255 3.9525C3.3225 3.8325 3.45 3.765 3.5775 3.765C3.6225 3.765 3.6675 3.7725 3.7125 3.7875L5.58 4.5375C5.97 4.245 6.39 3.99 6.8475 3.8025L7.1325 1.815C7.155 1.635 7.3125 1.5 7.5 1.5H10.5C10.6875 1.5 10.845 1.635 10.8675 1.815L11.1525 3.8025C11.61 3.99 12.03 4.2375 12.42 4.5375L14.2875 3.7875C14.325 3.7725 14.37 3.765 14.415 3.765C14.55 3.765 14.6775 3.8325 14.745 3.9525L16.245 6.5475C16.335 6.7125 16.2975 6.915 16.155 7.0275L14.5725 8.265C14.6025 8.505 14.625 8.745 14.625 9ZM13.125 9C13.125 8.8425 13.1175 8.685 13.0875 8.4525L12.9825 7.605L13.65 7.08L14.4525 6.4425L13.9275 5.535L12.975 5.9175L12.18 6.24L11.4975 5.715C11.1975 5.49 10.8975 5.3175 10.575 5.1825L9.78 4.86L9.66 4.0125L9.5175 3H8.475L8.325 4.0125L8.205 4.86L7.41 5.1825C7.1025 5.31 6.795 5.49 6.4725 5.73L5.7975 6.24L5.0175 5.925L4.065 5.5425L3.54 6.45L4.35 7.08L5.0175 7.605L4.9125 8.4525C4.89 8.6775 4.875 8.85 4.875 9C4.875 9.15 4.89 9.3225 4.9125 9.555L5.0175 10.4025L4.35 10.9275L3.54 11.5575L4.065 12.465L5.0175 12.0825L5.8125 11.76L6.495 12.285C6.795 12.51 7.095 12.6825 7.4175 12.8175L8.2125 13.14L8.3325 13.9875L8.475 15H9.525L9.675 13.9875L9.795 13.14L10.59 12.8175C10.8975 12.69 11.205 12.51 11.5275 12.27L12.2025 11.76L12.9825 12.075L13.935 12.4575L14.46 11.55L13.65 10.92L12.9825 10.395L13.0875 9.5475C13.11 9.3225 13.125 9.1575 13.125 9Z" fill="#F6F6F6"/>
<path d="M9 10.5C8.175 10.5 7.5 9.825 7.5 9C7.5 8.175 8.175 7.5 9 7.5C9.825 7.5 10.5 8.175 10.5 9C10.5 9.825 9.825 10.5 9 10.5Z" fill="#F6F6F6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0875 8.4525C13.1175 8.685 13.125 8.8425 13.125 9C13.125 9.1575 13.11 9.3225 13.0875 9.5475L12.9825 10.395L13.65 10.92L14.46 11.55L13.935 12.4575L12.9825 12.075L12.2025 11.76L11.5275 12.27C11.205 12.51 10.8975 12.69 10.59 12.8175L9.795 13.14L9.675 13.9875L9.525 15H8.475L8.3325 13.9875L8.2125 13.14L7.4175 12.8175C7.095 12.6825 6.795 12.51 6.495 12.285L5.8125 11.76L5.0175 12.0825L4.065 12.465L3.54 11.5575L4.35 10.9275L5.0175 10.4025L4.9125 9.555C4.89 9.3225 4.875 9.15 4.875 9C4.875 8.85 4.89 8.6775 4.9125 8.4525L5.0175 7.605L4.35 7.08L3.54 6.45L4.065 5.5425L5.0175 5.925L5.7975 6.24L6.4725 5.73C6.795 5.49 7.1025 5.31 7.41 5.1825L8.205 4.86L8.325 4.0125L8.475 3H9.5175L9.66 4.0125L9.78 4.86L10.575 5.1825C10.8975 5.3175 11.1975 5.49 11.4975 5.715L12.18 6.24L12.975 5.9175L13.9275 5.535L14.4525 6.4425L13.65 7.08L12.9825 7.605L13.0875 8.4525ZM6 9C6 7.3425 7.3425 6 9 6C10.6575 6 12 7.3425 12 9C12 10.6575 10.6575 12 9 12C7.3425 12 6 10.6575 6 9Z" fill="#F6F6F6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

10
frontend/src/assets/icons/Menu/Contact.svg 100644
View File

@ -0,0 +1,10 @@
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3_608)">
<path d="M15 0H3V1.50146H15V0ZM3 18.0176H15V16.5161H3V18.0176ZM15 3.00293H3C2.175 3.00293 1.5 3.67859 1.5 4.50439V13.5132C1.5 14.339 2.175 15.0146 3 15.0146H15C15.825 15.0146 16.5 14.339 16.5 13.5132V4.50439C16.5 3.67859 15.825 3.00293 15 3.00293ZM9 5.06744C9.93 5.06744 10.6875 5.82568 10.6875 6.75659C10.6875 7.6875 9.93 8.44574 9 8.44574C8.07 8.44574 7.3125 7.6875 7.3125 6.75659C7.3125 5.82568 8.07 5.06744 9 5.06744ZM12.75 12.7625H5.25V11.6364C5.25 10.3826 7.7475 9.75952 9 9.75952C10.2525 9.75952 12.75 10.3826 12.75 11.6364V12.7625Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3_608">
<rect width="18" height="18.0176" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 802 B

3
frontend/src/assets/icons/Menu/Dashboard.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.25 3.75V5.25H11.25V3.75H14.25ZM6.75 3.75V8.25H3.75V3.75H6.75ZM14.25 9.75V14.25H11.25V9.75H14.25ZM6.75 12.75V14.25H3.75V12.75H6.75ZM15.75 2.25H9.75V6.75H15.75V2.25ZM8.25 2.25H2.25V9.75H8.25V2.25ZM15.75 8.25H9.75V15.75H15.75V8.25ZM8.25 11.25H2.25V15.75H8.25V11.25Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

8
frontend/src/assets/icons/Menu/Graph.svg 100644
View File

@ -0,0 +1,8 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="12.8572" width="3.21405" height="5.14286" fill="white"/>
<rect x="4.82104" y="9.42859" width="3.21405" height="8.57143" fill="white"/>
<rect x="8.83862" y="10.2858" width="3.21405" height="7.71429" fill="white"/>
<rect x="13.6597" y="6.85718" width="3.21405" height="11.1429" fill="white"/>
<path d="M1.52958 10.4316L6.2278 5.30322L9.99732 8.15878L14.9687 3.26353" stroke="white"/>
<path d="M16.3949 1.58979L15.7113 5.3475L12.9312 2.5939L16.3949 1.58979Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 583 B

3
frontend/src/assets/icons/Menu/Mensage.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 1.5H3C2.175 1.5 1.5075 2.175 1.5075 3L1.5 16.5L4.5 13.5H15C15.825 13.5 16.5 12.825 16.5 12V3C16.5 2.175 15.825 1.5 15 1.5ZM13.5 10.5H4.5V9H13.5V10.5ZM13.5 8.25H4.5V6.75H13.5V8.25ZM13.5 6H4.5V4.5H13.5V6Z" fill="current"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 337 B

3
frontend/src/assets/icons/Menu/Notifications.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.5C9.825 16.5 10.5 15.825 10.5 15H7.5C7.5 15.825 8.1675 16.5 9 16.5ZM13.5 12V8.25C13.5 5.9475 12.27 4.02 10.125 3.51V3C10.125 2.3775 9.6225 1.875 9 1.875C8.3775 1.875 7.875 2.3775 7.875 3V3.51C5.7225 4.02 4.5 5.94 4.5 8.25V12L3 13.5V14.25H15V13.5L13.5 12Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

6
frontend/src/assets/icons/Menu/Peoplealt.svg 100644
View File

@ -0,0 +1,6 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5024 9.84747C13.5299 10.545 14.2499 11.49 14.2499 12.75V15H17.2499V12.75C17.2499 11.115 14.5724 10.1475 12.5024 9.84747Z" fill="white"/>
<path d="M6.75 9C8.40685 9 9.75 7.65685 9.75 6C9.75 4.34315 8.40685 3 6.75 3C5.09315 3 3.75 4.34315 3.75 6C3.75 7.65685 5.09315 9 6.75 9Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2499 9C12.9074 9 14.2499 7.6575 14.2499 6C14.2499 4.3425 12.9074 3 11.2499 3C10.8974 3 10.5674 3.075 10.2524 3.18C10.8749 3.9525 11.2499 4.935 11.2499 6C11.2499 7.065 10.8749 8.0475 10.2524 8.82C10.5674 8.925 10.8974 9 11.2499 9Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 9.75C4.7475 9.75 0.75 10.755 0.75 12.75V15H12.75V12.75C12.75 10.755 8.7525 9.75 6.75 9.75Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 908 B

9
frontend/src/assets/icons/Menu/Send.svg 100644
View File

@ -0,0 +1,9 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="18" height="18" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3_609" transform="scale(0.0104167)"/>
</pattern>
<image id="image0_3_609" width="96" height="96" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAADHUlEQVR4nO3cP4xMURgF8POhIAoRFdHTKFVarUqv1Cq1KiESyRKymyhkExJUQlRKq0GBxip2GwWFYsVm/wRHMW52Ynfmvdm57333z/k12+zu/d49mdk5s28uICIiIiIiIiIi8g/JtyQvkNznPUuVuGWJ5GWSh7xnqgq3WyE5Q/K492xV2CGAYIPkY5KnvWcs2pgAhr0ieY6kec9bnJYBBIskL5Hc7z13MSYMIPhK8grJI97zZ2+XAQRrJOdJnvS+jmxNGUDwm+Qzkme9ryc7kQIYpmI3pPFVC0l2tPYygDkAs2a20tEa+evgEfA/FbtxegggqLLYeT4FjbMA4DqA52bmsX5vUg0g+AzgLoA5M1t3nKMzqQcQfAMwC+C2mX33HiamXAII1gE8AXDVzD55DxNDbgEEfwC8ADBjZi+9h5lGrgEMewfgFoCHZvbLe5hJlRBAkGWxKymA4AeA+wBumNkX72GalBhAsAngKQZBvPEeZpSSAxiWbLGrJYAguWJXWwBBMsWu1gAC92JXewCBW7FTANv1WuwUwGi9FDsF0KzTYtcmgAMAjgI41vD1cOzhEtNJsYt2K2FlQUUrdr3fy1lYUFMXu2Rvps0sqF0Xu2QDaCuxoCYudtkH0FbPQbUudnsiLCajrTV9Q/aPgMSeglYBPABw08wW2/xAsgEktrFN8vkjnNnGNvkA4A6AefeXoYVtbJP+ilhlGzvOJoBHGLwV8THWL9Wbcc06fTNOn1IZbRnADIB7Zrba1SIKYLte/yGjAAZCc71mZgt9Llx7ABMXp9hqDSCZ21JqC2Dq4hRbLQEke2tiyQF0UpxiKzGArG5PLymAXopTbCUEkPVHlHINwK04xZZbAO7FKbZcAkimOMWWegDJFafYUg0g2eIUW0oBZFGcYkshgKyKU++iH8u0ZYmDM0YPel9j0jrYeB3aN4lImx6OrTzjfT3ZmXLjf5KcI3nC+zqytcuN19HFsUy48e9JXqQO746n5cbr+PqujNn0DQ4O5j7lPWPRdth4nXTbp6GNV3HyQPI1yfMk93rPIiIiIiIiIiIikrO/46QeFPLNZ5MAAAAASUVORK5CYII="/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
frontend/src/assets/icons/Menu/Signoff.svg 100644
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6257 4.41706C14.3603 4.15175 13.9303 4.15175 13.6648 4.41706C13.3995 4.68238 13.3995 5.11246 13.6648 5.37778C14.9115 6.62446 15.598 8.28202 15.598 10.0451C15.598 11.8081 14.9115 13.4656 13.6648 14.7122C12.3783 15.9988 10.6886 16.642 8.99843 16.6418C7.30826 16.6417 5.61773 15.9983 4.33101 14.7116C1.75803 12.1386 1.7583 7.95194 4.33146 5.37877C4.59678 5.11346 4.59678 4.68328 4.33146 4.41806C4.06615 4.15275 3.63606 4.15275 3.37066 4.41806C0.267772 7.52095 0.267501 12.5697 3.37021 15.6724C4.92206 17.2243 6.96015 18.0001 8.99852 18C11.0363 17.9999 13.0744 17.2243 14.6257 15.673C16.129 14.1698 16.9568 12.1712 16.9568 10.0452C16.9569 7.91915 16.1289 5.92036 14.6257 4.41706Z" fill="white"/>
<path d="M8.99772 8.80131C9.37301 8.80131 9.67709 8.49713 9.67709 8.12194V0.679365C9.67709 0.304174 9.37301 0 8.99772 0C8.62244 0 8.31836 0.304174 8.31836 0.679365V8.12194C8.31836 8.49722 8.62244 8.80131 8.99772 8.80131Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
frontend/src/assets/icons/Menu/Super.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 10H2V8H0V10ZM0 14H2V12H0V14ZM0 6H2V4H0V6ZM4 10H18V8H4V10ZM4 14H18V12H4V14ZM4 4V6H18V4H4Z" fill="current"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 222 B

3
frontend/src/assets/icons/Menu/Swap.svg 100644
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99 7.71429L0 12.8571L3.99 18V14.1429H11V11.5714H3.99V7.71429ZM18 5.14286L14.01 0V3.85714H7V6.42857H14.01V10.2857L18 5.14286Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 256 B

4
frontend/src/assets/icons/Menu/Warning.svg 100644
View File

@ -0,0 +1,4 @@
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.24655 1.56501L9 1.42527L8.75345 1.56501L4.83845 3.78403L4.83842 3.78398L4.83157 3.78801L0.952337 6.06899L0.70804 6.21263L0.705787 6.49603L0.670016 10.996H0.669953L0.670016 11.004L0.705787 15.504L0.70804 15.7874L0.952337 15.931L4.83157 18.212L4.83153 18.212L4.83845 18.216L8.75345 20.435L9 20.5747L9.24655 20.435L13.1616 18.216L13.1616 18.216L13.1684 18.212L17.0477 15.931L17.292 15.7874L17.2942 15.504L17.33 11.004H17.33L17.33 10.996L17.2942 6.49603L17.292 6.21263L17.0477 6.06899L13.1684 3.78801L13.1685 3.78795L13.1616 3.78403L9.24655 1.56501Z" stroke="white"/>
<path d="M9.75556 5L9.64444 13.5581H8.35556L8.24444 5H9.75556ZM9 17C8.72593 17 8.49074 16.8973 8.29444 16.6919C8.09815 16.4864 8 16.2403 8 15.9535C8 15.6667 8.09815 15.4205 8.29444 15.2151C8.49074 15.0097 8.72593 14.907 9 14.907C9.27407 14.907 9.50926 15.0097 9.70556 15.2151C9.90185 15.4205 10 15.6667 10 15.9535C10 16.1434 9.9537 16.3178 9.86111 16.4767C9.77222 16.6357 9.65185 16.7636 9.5 16.8605C9.35185 16.9535 9.18519 17 9 17Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
frontend/src/assets/icons/Menu/Whatsapp.svg 100644
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.319 10.343C13.284 10.3262 11.9717 9.68 11.7385 9.59607C11.6433 9.56189 11.5413 9.52852 11.4329 9.52852C11.2557 9.52852 11.1068 9.61682 10.9909 9.79028C10.8598 9.98512 10.463 10.449 10.3404 10.5875C10.3244 10.6058 10.3025 10.6277 10.2894 10.6277C10.2777 10.6277 10.0746 10.5441 10.0131 10.5173C8.60542 9.90587 7.53693 8.43543 7.39042 8.18746C7.3695 8.15181 7.36862 8.13562 7.36844 8.13562C7.37359 8.11674 7.42092 8.06929 7.44535 8.0448C7.51683 7.97409 7.59426 7.88087 7.66918 7.7907C7.70466 7.74798 7.74019 7.7052 7.77508 7.66487C7.88378 7.53841 7.93217 7.44022 7.98828 7.3265L8.01767 7.26741C8.15466 6.99525 8.03766 6.76557 7.99985 6.69141C7.96881 6.62935 7.41473 5.29209 7.35582 5.15159C7.21416 4.81257 7.02697 4.65472 6.76685 4.65472C6.74271 4.65472 6.76685 4.65472 6.66563 4.65899C6.54237 4.66419 5.87117 4.75256 5.57441 4.93963C5.2597 5.13804 4.72729 5.77049 4.72729 6.88275C4.72729 7.8838 5.36255 8.82897 5.6353 9.18845C5.64208 9.1975 5.65453 9.21591 5.67259 9.24233C6.71711 10.7678 8.01925 11.8983 9.33927 12.4256C10.6101 12.9332 11.2119 12.9919 11.554 12.9919C11.554 12.9919 11.554 12.9919 11.554 12.9919C11.6978 12.9919 11.8129 12.9806 11.9144 12.9706L11.9788 12.9645C12.4178 12.9255 13.3825 12.4256 13.602 11.8158C13.7749 11.3355 13.8205 10.8107 13.7054 10.6202C13.6267 10.4907 13.4909 10.4255 13.319 10.343Z" fill="current" />
<path d="M9.16001 0C4.28505 0 0.318971 3.93627 0.318971 8.77459C0.318971 10.3395 0.737763 11.8713 1.53111 13.2119L0.0126202 17.6912C-0.0156655 17.7747 0.00537342 17.867 0.0671462 17.9299C0.111737 17.9755 0.172224 18 0.233997 18C0.257666 18 0.28151 17.9964 0.30477 17.989L4.97542 16.5048C6.25354 17.1877 7.69809 17.5482 9.16007 17.5482C14.0346 17.5482 18.0002 13.6124 18.0002 8.77459C18.0002 3.93627 14.0346 0 9.16001 0ZM9.16001 15.7204C7.78435 15.7204 6.45195 15.3232 5.30661 14.5716C5.26809 14.5463 5.22339 14.5334 5.17839 14.5334C5.1546 14.5334 5.13076 14.537 5.10756 14.5443L2.76785 15.2881L3.52315 13.0598C3.54757 12.9876 3.53536 12.9081 3.49036 12.8466C2.61818 11.6549 2.15713 10.2469 2.15713 8.77459C2.15713 4.94416 5.2986 1.82782 9.15995 1.82782C13.0208 1.82782 16.162 4.94416 16.162 8.77459C16.162 12.6046 13.021 15.7204 9.16001 15.7204Z" fill="current" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

11
frontend/src/components/IconsComponents/Icons.jsx 100644
View File

@ -0,0 +1,11 @@
//Choice Icon by name in list
import React from "react";
const Icons = ({ icon }) => {
console.log(icon);
return null;
};
export default Icons;

59
frontend/src/components/Menu/MenuComponent.jsx
View File

@ -1,16 +1,38 @@
import React from "react"; import React from "react";
import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style";
import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../../context/Auth/AuthContext";
import VideoComponent from "../VideoTag/VideoComponent"; import VideoComponent from "../VideoTag/VideoComponent";
import { ReactComponent as Tickets } from "../../assets/icons/Menu/Whatsapp.svg";
import { ReactComponent as Contact } from "../../assets/icons/Menu/Contact.svg";
import { ReactComponent as Reminder } from "../../assets/icons/Menu/Send.svg";
import { ReactComponent as FastAanswer } from "../../assets/icons/Menu/Mensage.svg";
import { ReactComponent as Users } from "../../assets/icons/Menu/Peoplealt.svg";
import { ReactComponent as Rows } from "../../assets/icons/Menu/Accounttree.svg";
import { ReactComponent as Conetions } from "../../assets/icons/Menu/Swap.svg";
import { ReactComponent as Dashboard } from "../../assets/icons/Menu/Dashboard.svg";
import { ReactComponent as FastResumes } from "../../assets/icons/Menu/Graph.svg";
import { ReactComponent as Super } from "../../assets/icons/Menu/Super.svg";
import { ReactComponent as Configuration } from "../../assets/icons/Menu/Configuration.svg";
import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style";
import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../../context/Auth/AuthContext";
import img from "../../assets/images/Logo.png";
import MenuItem from "./MenuItem";
const MenuComponent = () => { const MenuComponent = () => {
const [hover, setHover] = React.useState(false);
const { whatsApps } = React.useContext(WhatsAppsContext); const { whatsApps } = React.useContext(WhatsAppsContext);
const { user } = React.useContext(AuthContext); const { user } = React.useContext(AuthContext);
const [connectionWarning, setConnectionWarning] = React.useState(false); const [connectionWarning, setConnectionWarning] = React.useState(false);
const HoverMenu = () => {
setHover(!hover);
};
React.useEffect(() => { React.useEffect(() => {
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
if (whatsApps.length > 0) { if (whatsApps.length > 0) {
@ -34,13 +56,32 @@ const MenuComponent = () => {
}, [whatsApps]); }, [whatsApps]);
return ( return (
<MenuStyled> <MenuStyled onMouseEnter={HoverMenu} onMouseLeave={HoverMenu} hover={hover}>
<VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} /> <VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
{/*Menu Top Header*/}
<div style={{ display: "flex", flexDirection: "row", width: "100%" }}>
<div style={{ width: "76px", backgroundColor: "white" }}>
<img src={img} alt="" style={{ width: "100%" }} />
</div>
</div>
{/*Menu Top Header*/}
<MenuListStyled> <MenuListStyled>
<MenuListItemStyled>link</MenuListItemStyled> {/* <MenuItem icon={<Whatsapp />} to="/tickets" text="Tickets" hover={hover} /> */}
<MenuListItemStyled>link</MenuListItemStyled> <MenuItem icon={<Tickets />} text="Tickets" to="" hover={hover} />
<MenuListItemStyled>link</MenuListItemStyled> <MenuItem icon={<Contact />} text="Contatos" to="" hover={hover} />
<MenuListItemStyled>link</MenuListItemStyled> <MenuItem icon={<Reminder />} text="Lembretes" to="" hover={hover} />
<MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} />
<br />
<MenuItem icon={<Users />} text="Usuários" to="" hover={hover} />
<MenuItem icon={<Rows />} text="Filas" to="" hover={hover} />
<MenuItem icon={<Conetions />} text="Conexões" to="" hover={hover} />
<MenuItem icon={<Dashboard />} text="Dashboard" to="" hover={hover} />
<MenuItem icon={<FastResumes />} text="Relatórios" to="" hover={hover} />
<MenuItem icon={<Super />} text="Supervisão" to="" hover={hover} />
<br />
<MenuItem icon={<Configuration />} text="Configurações" to="" hover={hover} />
</MenuListStyled> </MenuListStyled>
</MenuStyled> </MenuStyled>
); );

51
frontend/src/components/Menu/MenuComponent.style.jsx
View File

@ -8,9 +8,28 @@ const MenuStyled = styled.nav`
height: 100vh; height: 100vh;
background: ${color.pricinpal.grisOscuro}; //Same background login background: ${color.pricinpal.grisOscuro}; //Same background login
z-index: 10; z-index: 10;
animation: ${(props) => (props.hover ? "hover" : "hoveroff")} 0.5s forwards;
@keyframes hover {
from {
width: 76px;
}
to {
width: 218px;
}
}
@keyframes hoveroff {
from {
width: 218px;
}
to {
width: 76px;
}
}
`; `;
//UL //UL
const MenuListStyled = styled.ul` const MenuListStyled = styled.ul`
margin-top: 16px;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -20,15 +39,43 @@ const MenuListStyled = styled.ul`
//LI //LI
const MenuListItemStyled = styled.li` const MenuListItemStyled = styled.li`
cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; margin: 12px 28px;
gap: 6px; gap: 6px;
color: ${color.pricinpal.blanco}; color: ${color.pricinpal.blanco};
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
color: ${color.pricinpal.naranja}; color: ${color.pricinpal.naranja};
transition: all 0.2s linear; }
& a {
display: flex;
align-items: center;
color: ${color.pricinpal.blanco};
gap: 12px;
text-decoration: none;
& :hover {
color: ${color.pricinpal.naranja};
transition: all 0.2s linear;
}
p {
text-transform: capitalize;
font-family: "HelveticaRoman";
font-size: 14px;
opacity: ${(props) => (props.hover ? "1" : "0")};
display: ${(props) => (props.hover ? "block" : "none")};
}
svg {
width: 18px;
height: 18px;
fill: ${color.pricinpal.blanco};
transition: all 0.2s linear;
& :hover {
fill: ${color.pricinpal.naranja};
transition: all 0.2s linear;
}
}
} }
`; `;

22
frontend/src/components/Menu/MenuItem.jsx 100644
View File

@ -0,0 +1,22 @@
import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { MenuListItemStyled } from "./MenuComponent.style";
const MenuItem = ({ icon, text, to, hover }) => {
const RenderLink = React.useMemo(
() => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
[to]
);
return (
<MenuListItemStyled hover={hover}>
<RenderLink>
{icon ? icon : ""}
<p>{text ? text : ""}</p>
</RenderLink>
</MenuListItemStyled>
);
};
export default MenuItem;

1
frontend/src/index.js
View File

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import GlobalStyled from "./style/GlobalStyle"; import GlobalStyled from "./style/GlobalStyle";
import App from "./App"; import App from "./App";

2
frontend/src/layout/index.js
View File

@ -22,7 +22,7 @@ const LoggedInLayout = ({ children }) => {
<> <>
<MenuComponent/> <MenuComponent/>
<MainContainer> <MainContainer>
<main style={{ padding: "16px", marginLeft: "90px",marginBottom: "16px", width: "100%", height:"100vh", justifyItem: "right" }}> <main>
{children ? children : null} {children ? children : null}
</main> </main>
</MainContainer> </MainContainer>

7
frontend/src/routes/Route.js
View File

@ -3,6 +3,7 @@ import { Route as RouterRoute, Redirect } from "react-router-dom";
import { AuthContext } from "../context/Auth/AuthContext"; import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading"; import BackdropLoading from "../components/BackdropLoading";
import Loading from "../components/LoadingScreen/Loading"
const Route = ({ component: Component, isPrivate = false, ...rest }) => { const Route = ({ component: Component, isPrivate = false, ...rest }) => {
const { isAuth, loading } = useContext(AuthContext); const { isAuth, loading } = useContext(AuthContext);
@ -10,7 +11,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
if (!isAuth && isPrivate) { if (!isAuth && isPrivate) {
return ( return (
<> <>
{loading && <BackdropLoading />} {loading && <Loading />}
<Redirect to={{ pathname: "/login", state: { from: rest.location } }} /> <Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
</> </>
); );
@ -19,7 +20,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
if (isAuth && !isPrivate) { if (isAuth && !isPrivate) {
return ( return (
<> <>
{loading && <BackdropLoading />} {loading && <Loading />}
<Redirect to={{ pathname: "/", state: { from: rest.location } }} />; <Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
</> </>
); );
@ -27,7 +28,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
return ( return (
<> <>
{loading && <BackdropLoading />} {loading && <Loading />}
<RouterRoute {...rest} component={Component} /> <RouterRoute {...rest} component={Component} />
</> </>
); );

3
frontend/src/style/GlobalStyle.jsx
View File

@ -88,6 +88,9 @@ table {
} }
//Patterns //Patterns
html{
overflow: hidden;
}
h1{ h1{
${texts.h1} ${texts.h1}
color: ${color.pricinpal.blanco} color: ${color.pricinpal.blanco}