formatted profile menu

This commit was merged in pull request #1.
This commit is contained in:
victorAnumudu
2023-04-21 00:53:05 +01:00
parent 58702ade71
commit 456436a917
4 changed files with 319 additions and 15 deletions
+88
View File
@@ -0,0 +1,88 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<rect y="0.235" style="fill:#F5F5F5;" width="511.53" height="511.53"/>
<g>
<rect y="0.235" style="fill:#FF4B55;" width="512" height="39.34"/>
<rect y="157.63" style="fill:#FF4B55;" width="512" height="39.34"/>
<rect y="78.935" style="fill:#FF4B55;" width="512" height="39.34"/>
<rect y="236.32" style="fill:#FF4B55;" width="512" height="39.34"/>
<rect y="393.71" style="fill:#FF4B55;" width="512" height="39.34"/>
<rect y="472.41" style="fill:#FF4B55;" width="512" height="39.34"/>
<rect y="315.02" style="fill:#FF4B55;" width="512" height="39.34"/>
</g>
<rect y="0.235" style="fill:#41479B;" width="275.44" height="275.44"/>
<g>
<path style="fill:#F5F5F5;" d="M35.219,20.814l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C33.779,19.99,34.945,19.99,35.219,20.814z"/>
<path style="fill:#F5F5F5;" d="M35.219,73.902l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C33.779,73.077,34.945,73.077,35.219,73.902z"/>
<path style="fill:#F5F5F5;" d="M35.219,132.78l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.632l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.632l6.708-0.052l2.122-6.364C33.779,131.956,34.945,131.956,35.219,132.78z"/>
<path style="fill:#F5F5F5;" d="M35.219,186.876l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C33.779,186.052,34.945,186.052,35.219,186.876z"/>
<path style="fill:#F5F5F5;" d="M35.219,236.102l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.631l6.708-0.052l2.122-6.364C33.779,235.278,34.945,235.278,35.219,236.102z"/>
<path style="fill:#F5F5F5;" d="M61.058,45.953l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 L49.98,54c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C59.618,45.129,60.784,45.129,61.058,45.953z"/>
<path style="fill:#F5F5F5;" d="M61.058,104.832l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C59.618,104.008,60.784,104.008,61.058,104.832z"/>
<path style="fill:#F5F5F5;" d="M61.058,160.771l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C59.618,159.948,60.784,159.948,61.058,160.771z"/>
<path style="fill:#F5F5F5;" d="M61.058,211.007l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C59.618,210.182,60.784,210.182,61.058,211.007z"/>
<path style="fill:#F5F5F5;" d="M86.898,20.814l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C85.458,19.99,86.623,19.99,86.898,20.814z"/>
<path style="fill:#F5F5F5;" d="M86.898,73.902l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C85.458,73.077,86.623,73.077,86.898,73.902z"/>
<path style="fill:#F5F5F5;" d="M86.898,132.78l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.632l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.632l6.708-0.052l2.122-6.364C85.458,131.956,86.623,131.956,86.898,132.78z"/>
<path style="fill:#F5F5F5;" d="M86.898,186.876l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.456-3.902l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C85.458,186.052,86.623,186.052,86.898,186.876z"/>
<path style="fill:#F5F5F5;" d="M86.898,236.102l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.631l6.708-0.052l2.122-6.364C85.458,235.278,86.623,235.278,86.898,236.102z"/>
<path style="fill:#F5F5F5;" d="M112.737,45.953l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 L101.659,54c-0.698-0.516-0.339-1.624,0.53-1.631l6.711-0.052l2.122-6.364C111.297,45.129,112.462,45.129,112.737,45.953z"/>
<path style="fill:#F5F5F5;" d="M112.737,104.832l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C111.297,104.008,112.462,104.008,112.737,104.832z"/>
<path style="fill:#F5F5F5;" d="M112.737,160.771l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C111.297,159.948,112.462,159.948,112.737,160.771z"/>
<path style="fill:#F5F5F5;" d="M112.737,211.007l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C111.297,210.182,112.462,210.182,112.737,211.007z"/>
<path style="fill:#F5F5F5;" d="M138.576,20.814l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C137.136,19.99,138.301,19.99,138.576,20.814z"/>
<path style="fill:#F5F5F5;" d="M138.576,73.902l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C137.136,73.077,138.301,73.077,138.576,73.902z"/>
<path style="fill:#F5F5F5;" d="M138.576,132.78l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.632l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.632l6.708-0.052l2.122-6.364C137.136,131.956,138.301,131.956,138.576,132.78z"/>
<path style="fill:#F5F5F5;" d="M138.576,186.876l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C137.136,186.052,138.301,186.052,138.576,186.876z"/>
<path style="fill:#F5F5F5;" d="M138.576,236.102l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.631l6.708-0.052l2.122-6.364C137.136,235.278,138.301,235.278,138.576,236.102z"/>
<path style="fill:#F5F5F5;" d="M164.415,45.953l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 L153.337,54c-0.698-0.516-0.339-1.624,0.529-1.631l6.708-0.052l2.122-6.364C162.975,45.129,164.14,45.129,164.415,45.953z"/>
<path style="fill:#F5F5F5;" d="M164.415,104.832l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.529-1.631l6.708-0.052l2.122-6.364C162.975,104.008,164.14,104.008,164.415,104.832z"/>
<path style="fill:#F5F5F5;" d="M164.415,160.771l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.529-1.631l6.708-0.052l2.122-6.364C162.975,159.948,164.14,159.948,164.415,160.771z"/>
<path style="fill:#F5F5F5;" d="M164.415,211.007l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.529-1.631l6.708-0.052l2.122-6.364C162.975,210.182,164.14,210.182,164.415,211.007z"/>
<path style="fill:#F5F5F5;" d="M190.254,20.814l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C188.814,19.99,189.979,19.99,190.254,20.814z"/>
<path style="fill:#F5F5F5;" d="M190.254,73.902l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C188.814,73.077,189.979,73.077,190.254,73.902z"/>
<path style="fill:#F5F5F5;" d="M190.254,132.78l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.632l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.632l6.708-0.052l2.122-6.364C188.814,131.956,189.979,131.956,190.254,132.78z"/>
<path style="fill:#F5F5F5;" d="M190.254,186.876l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C188.814,186.052,189.979,186.052,190.254,186.876z"/>
<path style="fill:#F5F5F5;" d="M190.254,236.102l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.631l6.708-0.052l2.122-6.364C188.814,235.278,189.979,235.278,190.254,236.102z"/>
<path style="fill:#F5F5F5;" d="M216.094,45.953l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 L205.016,54c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C214.653,45.129,215.819,45.129,216.094,45.953z"/>
<path style="fill:#F5F5F5;" d="M216.094,104.832l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C214.653,104.008,215.819,104.008,216.094,104.832z"/>
<path style="fill:#F5F5F5;" d="M216.094,160.771l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C214.653,159.948,215.819,159.948,216.094,160.771z"/>
<path style="fill:#F5F5F5;" d="M216.094,211.007l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C214.653,210.182,215.819,210.182,216.094,211.007z"/>
<path style="fill:#F5F5F5;" d="M241.933,20.814l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C240.492,19.99,241.658,19.99,241.933,20.814z"/>
<path style="fill:#F5F5F5;" d="M241.933,73.902l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C240.492,73.077,241.658,73.077,241.933,73.902z"/>
<path style="fill:#F5F5F5;" d="M241.933,132.78l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.632l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.632l6.708-0.052l2.122-6.364C240.492,131.956,241.658,131.956,241.933,132.78z"/>
<path style="fill:#F5F5F5;" d="M241.933,186.876l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.624,0.53-1.631l6.708-0.052l2.122-6.364C240.492,186.052,241.658,186.052,241.933,186.876z"/>
<path style="fill:#F5F5F5;" d="M241.933,236.102l2.122,6.364l6.708,0.052c0.868,0.007,1.229,1.115,0.53,1.631l-5.396,3.985 l2.023,6.396c0.262,0.828-0.68,1.513-1.388,1.008l-5.458-3.901l-5.458,3.901c-0.706,0.506-1.649-0.18-1.388-1.008l2.023-6.396 l-5.396-3.985c-0.698-0.516-0.339-1.625,0.53-1.631l6.708-0.052l2.122-6.364C240.492,235.278,241.658,235.278,241.933,236.102z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

+214 -14
View File
@@ -13,12 +13,16 @@ import SearchCom from "../Helpers/SearchCom";
import WalletHeader from "../MyWallet/WalletHeader";
import usersService from "../../services/UsersService";
import siteLogo from '../../assets/images/wrenchboard.png'
import Flag from '../../assets/images/united-states.svg'
export default function Header({ logoutModalHandler, sidebarHandler }) {
const [balanceDropdown, setbalanceValue] = useToggle(false);
const [notificationDropdown, setNotificationValue] = useToggle(false);
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
const [moneyPopup, setPopup] = useToggle(false);
const [toggleNotification, setToggleNotification] = useToggle(false)
const darkMode = useContext(DarkModeContext);
const [myWalletList, setMyWalletList] = useState([]);
@@ -79,6 +83,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
setPopup.toggle();
setbalanceValue.set(false);
};
const setNotification = ()=> {
setToggleNotification.toggle()
}
return (
<>
<div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
@@ -470,18 +478,22 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</div>
</div>
<div
className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white absolute lg:right-16 -right-[16px] rounded-lg cursor-pointer ${
className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white absolute lg:right-16 -right-[16px] rounded-lg ${
userProfileDropdown ? "active" : ""
}`}
>
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
My Profile
</h3>
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-2">
<img src={siteLogo} alt="Logo" className="w-[150px]" />
</div>
<div className="content px-7">
<ul>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-2">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
Surname
</h3>
<p className="text-sm text-gray-400 dark:text-white hover:text-sky-blue cursor-pointer">broklinslam_75@gamil.com</p>
</div>
<div className="content">
<ul className="px-7">
{/* <li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<Link
to="/profile"
className="notifications flex space-x-4 items-center"
@@ -517,8 +529,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</p>
</div>
</Link>
</li>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
</li> */}
{/* <li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<Link
to="/history"
className="notifications flex space-x-4 items-center"
@@ -558,8 +570,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</p>
</div>
</Link>
</li>
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
</li> */}
{/* <li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
<Link
to="/settings"
className="notifications flex space-x-4 items-center"
@@ -591,8 +603,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</p>
</div>
</Link>
</li>
<li className="content-item py-5">
</li> */}
{/* <li className="content-item py-5">
<div className="notifications flex space-x-4 items-center">
<div className="icon">
<svg
@@ -625,8 +637,196 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
</p>
</div>
</div>
</li> */}
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="/profile"
className="notifications"
>
<div className="name">
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
My Profile
</p>
</div>
</Link>
</li>
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="/my-wallet"
className="notifications"
>
<div className="name">
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
My Wallet
</p>
</div>
</Link>
</li>
<li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
<span>Reports</span> <span>&gt;</span>
</p>
</div>
</Link>
{/* report list items*/}
<div className="inner-list-items absolute rounded-lg" onClick={setNotification}>
<ul className="p-3">
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Referrals
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Billing
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Payments
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Completed Jobs
</p>
</div>
</Link>
</li>
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Previous Task
</p>
</div>
</Link>
</li>
</ul>
<hr />
<div className="px-7 py-3 cursor-pointer flex items-center">
<div className={`h-6 w-8 mr-1 p-1 ${toggleNotification ? 'bg-sky-blue flex justify-end items-center': 'bg-slate-200'} rounded-full transition`}>
<div className="w-4 h-full bg-white rounded-full"></div>
</div>
<p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
Notifications
</p>
</div>
</div>
{/* end report list items*/}
</li>
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white font-medium">
My Statements
</p>
</div>
</Link>
</li>
</ul>
<hr />
<ul className="px-7">
<li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<div className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
<p>Language</p>
<div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm">
<p className="text-[10px]">English </p>
<img className="w-[10px] h-[10px]" src={Flag} alt="U.S.A Flag" />
</div>
</div>
</div>
</Link>
{/* langauge list items*/}
<div className="inner-list-items absolute rounded-lg">
<ul className="p-3">
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
<img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
<p className="text-sm">English </p>
</div>
</div>
{/* <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
<img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
<p className="text-sm">English </p>
</div> */}
</Link>
</li>
</ul>
</div>
{/* end Language list items*/}
</li>
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
<Link
to="#"
className="notifications"
>
<div className="name">
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Account Settings
</p>
</div>
</Link>
</li>
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
<div className="name" onClick={logoutModalHandler}>
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
Sign Out
</p>
</div>
</li>
</ul>
<hr className="mb-3"/>
</div>
</div>
</div>
+15
View File
@@ -458,6 +458,21 @@ input[type="number"] {
background-size: cover;
}
.content-item .inner-list-items {
top: 0;
right: -100%;
opacity: 0;
transition: all .5s;
background-color: white;
}
.content-item:hover .inner-list-items {
right: -30%;
opacity: 1;
z-index: 2;
}
/* TODO: =================================upload product end================================ */
/* TODO: =================================setting ================================ */
.notification-page .content-item .notifications {
+2 -1
View File
@@ -16,7 +16,8 @@ module.exports = {
"light-red": "#EB5757",
"white-opacity": "#7B7EFC",
"dark-white":"#1D1F2F",
"dark-light-purple":"#5356fb29"
"dark-light-purple":"#5356fb29",
'sky-blue': '#009ef7'
},
},
},