search

phlask / phlask-map

Code behind the Phlask Web Map
https://beta.phlask.me
34 stars 36 forks source link

Create V.2 PHLASK Toolbar #213

Closed dibleauzah closed 2 years ago

dibleauzah commented 2 years ago

Is your feature request related to a problem? Please describe. As a PHLASK user, I need to be able to access the PHLASK "map tools."

Describe the solution you'd like

Describe alternatives you've considered This should be built using the Material-UI: https://mui.com/components/bottom-navigation/

Additional context See "Home" on Figma

gcardonag commented 2 years ago

In order to add the necessary toolbar icons, add the following to the src/components/icons folder (take a look at how other icons are implemented in this folder to learn how we can add them): Resources Icon:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 17C18.2091 17 20 15.2091 20 13C20 10.7909 18.2091 9 16 9C13.7909 9 12 10.7909 12 13C12 15.2091 13.7909 17 16 17Z" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26 13C26 22 16 29 16 29C16 29 6 22 6 13C6 10.3478 7.05357 7.8043 8.92893 5.92893C10.8043 4.05357 13.3478 3 16 3C18.6522 3 21.1957 4.05357 23.0711 5.92893C24.9464 7.8043 26 10.3478 26 13V13Z" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

PHLASK Water Icon:

<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="42.5" cy="42.5" r="38.5" fill="#5286E9" stroke="#FAFAFA" stroke-width="8"/>
<path d="M56.5688 47.2471C56.1679 45.0432 55.2494 43.0302 54.336 41.203C51.5907 35.6235 48.2872 30.5602 45.0344 25.8736L44.6285 25.2181C44.0703 24.4232 43.4055 24 42.6443 24C41.5279 24 40.8175 24.9342 40.6145 25.2181C40.6145 25.2181 40.6145 25.2181 40.6145 25.2645L39.9041 26.2968C38.6355 28.1704 37.311 30.1421 36.0373 32.1086C34.0532 35.2003 31.5616 39.3294 29.7348 43.7321C29.1259 45.1877 28.5677 46.638 28.5169 48.2329C28.314 52.3569 29.9378 55.8254 33.2971 58.5455C35.8902 60.6513 39.1937 61.8281 42.5987 61.8281C47.5818 61.8281 52.1083 59.4848 54.6963 55.5002C56.4165 52.873 57.0762 50.0549 56.5688 47.2471ZM53.0623 54.6073C50.8244 58.0758 46.912 60.0887 42.5885 60.0887C39.6453 60.0887 36.7427 59.1029 34.5099 57.2757C31.6073 54.9325 30.1864 51.8872 30.3438 48.3207C30.3894 47.0097 30.8512 45.7451 31.4601 44.3825C33.2413 40.0727 35.6821 36.0365 37.6104 32.9912C38.8334 31.0712 40.1528 29.0995 41.4721 27.2259L42.1318 26.2401C42.1318 26.1936 42.1826 26.1936 42.1826 26.1472C42.2841 26.0078 42.487 25.7704 42.5885 25.7239C42.5885 25.7239 42.7408 25.7704 42.9945 26.1472L43.4004 26.7562C46.5517 31.3499 49.8603 36.3668 52.5498 41.8534C53.4124 43.6341 54.2751 45.5077 54.6303 47.4793C55.1479 49.9155 54.5897 52.3053 53.0623 54.6073ZM43.507 55.6344C43.507 56.1041 43.101 56.4809 42.5885 56.4809C37.9657 56.4809 34.2562 53.0124 34.2562 48.7903C34.2562 48.3207 34.6621 47.949 35.1696 47.949C35.6821 47.949 36.0881 48.3207 36.0881 48.7903C36.1388 52.073 39.0364 54.7466 42.5885 54.7466C43.101 54.7466 43.507 55.1699 43.507 55.6344Z" fill="#FAFAFA" stroke="#FAFAFA" stroke-width="0.538463"/>
</svg>

PHLASK Food Icon:

<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="42.5" cy="42.5" r="38.5" fill="#FF9A55" stroke="#FAFAFA" stroke-width="8"/>
<path d="M58.2347 38.3549C58.1055 37.9939 57.8697 37.6807 57.5585 37.4568C57.2474 37.2329 56.8755 37.1089 56.4922 37.1011H55.6847C55.531 35.991 55.3111 34.8912 55.0259 33.8074C54.648 32.4863 54.4409 31.1223 54.4097 29.7486C54.4097 28.9624 54.4097 28.3249 54.4097 27.8149C54.6521 27.7449 54.8684 27.6046 55.0311 27.4117C55.1937 27.2188 55.2955 26.9819 55.3234 26.7311L55.4297 25.6474C55.4592 25.3067 55.353 24.9682 55.1341 24.7055C54.9152 24.4428 54.6013 24.2772 54.2609 24.2449L48.6934 23.6924H48.5659C48.2524 23.696 47.9513 23.8151 47.72 24.0268C47.4887 24.2384 47.3435 24.5279 47.3122 24.8399L47.2059 25.9449C47.1766 26.1828 47.2172 26.424 47.3229 26.6392C47.4286 26.8543 47.5947 27.034 47.8009 27.1561C47.8009 27.6449 47.5884 28.2399 47.4609 28.9836C47.3438 29.6111 47.1805 30.229 46.9722 30.8324L46.8447 30.1736L45.8034 24.3299C45.7851 24.2065 45.7417 24.0882 45.6759 23.9822C45.6102 23.8762 45.5234 23.7848 45.4209 23.7136C44.7861 23.2852 44.0696 22.9923 43.3164 22.8534C42.5632 22.7144 41.7894 22.7324 41.0434 22.9061C38.8909 23.4257 36.8232 24.2485 34.9022 25.3499C34.168 25.7653 33.4086 26.1343 32.6284 26.4549C31.0181 27.0073 29.3038 27.1889 27.6134 26.9861C27.4634 26.9664 27.3108 26.981 27.1673 27.0288C27.0237 27.0767 26.8929 27.1566 26.7847 27.2624C26.6769 27.3686 26.5971 27.4999 26.5526 27.6446C26.5081 27.7892 26.5002 27.9427 26.5297 28.0911L28.1022 37.1011H27.7834C27.3951 37.1087 27.0175 37.2294 26.6967 37.4483C26.3759 37.6672 26.1258 37.9748 25.9772 38.3336L22.8747 45.0911C22.7372 45.3773 22.6766 45.6944 22.699 46.0112C22.7214 46.3279 22.8258 46.6333 23.0022 46.8974C23.1381 47.1205 23.3282 47.3056 23.5548 47.4356C23.7814 47.5657 24.0372 47.6363 24.2984 47.6411H27.1247V57.3099C27.0841 58.0844 27.352 58.8434 27.8697 59.4209C28.3874 59.9984 29.1129 60.3472 29.8872 60.3911H55.2172C55.9915 60.3472 56.7169 59.9984 57.2347 59.4209C57.7524 58.8434 58.0203 58.0844 57.9797 57.3099V47.6411H59.6584C59.9092 47.6377 60.1552 47.5717 60.3741 47.4493C60.593 47.3269 60.778 47.1518 60.9122 46.9399C61.0931 46.6753 61.2071 46.3707 61.2441 46.0524C61.2811 45.734 61.2401 45.4114 61.1247 45.1124L58.2347 38.3549ZM47.8647 33.5736C48.5243 32.2239 49.0099 30.7958 49.3097 29.3236C49.4372 28.5586 49.5647 27.9636 49.6497 27.4749L52.4547 27.7511C52.4547 28.2611 52.4547 28.9199 52.4547 29.8761C52.4836 31.3941 52.7122 32.9016 53.1347 34.3599C53.3472 35.2311 53.5597 36.1236 53.7297 37.2074H46.5259C46.7987 36.2493 47.1395 35.3119 47.5459 34.4024L47.8647 33.5736ZM29.2497 39.0136H49.7984L46.7809 45.7499H24.7659L27.8047 39.0349L29.2497 39.0136ZM33.3297 28.2399C34.1826 27.8878 35.013 27.4833 35.8159 27.0286C37.5737 26.0034 39.4704 25.2376 41.4472 24.7549C42.2943 24.5595 43.1834 24.6725 43.9547 25.0736L44.6134 28.7499C43.7971 28.5474 42.9436 28.5474 42.1272 28.7499C39.9858 29.3027 37.9327 30.154 36.0284 31.2786C35.3037 31.698 34.5511 32.0672 33.7759 32.3836C32.3283 32.9089 30.7851 33.119 29.2497 32.9999L28.6334 28.9836C30.2327 29.0496 31.8291 28.7967 33.3297 28.2399ZM29.6747 34.9124C31.3022 34.9886 32.9284 34.7356 34.4559 34.1686C35.3116 33.8392 36.1425 33.4486 36.9422 32.9999C38.7096 31.9791 40.6127 31.2136 42.5947 30.7261C43.3886 30.4999 44.236 30.5524 44.9959 30.8749L45.5484 34.0199C45.1535 35.002 44.8269 36.0102 44.5709 37.0374H30.0572L29.6747 34.9124ZM50.4997 58.4999H29.8447C29.3772 58.4999 28.9947 57.9686 28.9947 57.3311V47.6411H46.7809C47.1669 47.6349 47.5424 47.5145 47.86 47.2952C48.1777 47.0758 48.4233 46.7673 48.5659 46.4086L50.4784 42.1586L50.4997 58.4999ZM56.0884 57.3311C56.0884 57.9686 55.7059 58.4999 55.2384 58.4999H52.3909V41.6486L54.3672 46.3874C54.4323 46.5751 54.5333 46.7483 54.6647 46.8974L54.7922 47.0249C54.8733 47.1273 54.966 47.22 55.0684 47.3011H55.2384C55.3284 47.3673 55.429 47.4177 55.5359 47.4499H55.7484H56.0672L56.0884 57.3311ZM58.0009 45.7499H56.1522L53.3684 39.1199H55.2597H56.4922L59.2547 45.7499H58.0009ZM59.3184 45.9199H59.5097L60.1047 45.6649L59.3184 45.9199Z" fill="#FAFAFA"/>
</svg>

PHLASK Foraging Icon:

<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="42.5" cy="42.5" r="38.5" fill="#5DA694" stroke="#FAFAFA" stroke-width="8"/>
<path d="M34.7774 62.0001H50.6737" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M59.2289 38.8142C58.6214 36.7533 56.8955 35.2659 54.6928 34.6073C54.9766 33.5684 54.9993 32.484 54.6871 31.4337C53.7787 28.351 50.3724 26.5513 46.6027 26.8976C46.3472 25.4954 45.683 24.2407 44.593 23.3323C41.6862 20.9138 36.8889 21.879 33.88 25.4897C33.159 26.3526 32.614 27.295 32.2279 28.2545C29.8038 29.2423 28.0722 31.1839 27.8338 33.5684C27.7089 34.8287 28.0211 36.0437 28.6626 37.1337C27.056 38.1102 26 39.7225 26 41.5449C26 44.5255 28.7932 46.9383 32.245 46.9383C32.7502 46.9383 33.2385 46.8815 33.7097 46.785C34.3626 47.8864 35.6854 48.6415 37.2182 48.6415C38.1152 48.6415 38.9441 48.3803 39.6083 47.9432C40.4429 48.3803 41.4818 48.6415 42.6116 48.6415C44.1218 48.6415 45.4729 48.1759 46.3813 47.4492C48.2605 48.3122 50.6335 48.4995 53.0066 47.8012C57.5144 46.4614 60.3019 42.4419 59.2289 38.8142Z" stroke="#FAFAFA" stroke-width="2" stroke-miterlimit="10"/>
<path d="M43.0262 32.7451V61.4152" stroke="#FAFAFA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M35.0779 36.1515C35.0779 36.1515 35.6457 43.5319 43.0261 42.3965" stroke="#FAFAFA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M48.7033 32.7451C48.7033 32.7451 48.34 37.4913 43.5938 36.7589" stroke="#FAFAFA" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
</svg>

PHLASK Restroom Icon:

<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="42.5" cy="42.5" r="38.5" fill="#9E9E9E" stroke="#FAFAFA" stroke-width="8"/>
<path d="M39.9024 27.3903H30.1463V44.4634H39.9024V27.3903Z" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M59.9023 44.4634H39.9023V38.1219H56.7559C58.4925 38.1219 59.9023 39.5317 59.9023 41.2683V44.4634Z" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47.2193 56.6586H34.5363V63H47.2193V56.6586Z" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42.8049 23H27V27.3902H42.8049V23Z" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.1024 56.6585H34.078C31.9073 56.6585 30.1463 54.8975 30.1463 52.7268V45.117C30.1463 44.7561 30.439 44.4634 30.8 44.4634H56.8048C57.1658 44.4634 57.4585 44.7561 57.4585 45.117V47.2975C57.4634 52.4683 53.2731 56.6585 48.1024 56.6585Z" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Contribute Icon:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" stroke="#2D3748" stroke-width="2" stroke-miterlimit="10"/>
<path d="M11 16H21" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 11V21" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Once these are added, we can add some logic to the toolbar to change the middle button's appearance based on the tap type selected in the Resources button. For that, we can reuse the switchType logic in the existing Toolbar: https://github.com/phlask/phlask-map/blob/develop/src/components/Toolbar/Toolbar.js#L85-L90