feat: add Navigation Bar

src/assets/logo1.svg

+<svg width="222" height="69" viewBox="0 0 222 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M85.4225 25.1582C83.5084 25.2559 81.6041 25.3633 79.7096 25.4805C77.8346 25.5781 75.9401 25.7051 74.026 25.8613L73.9674 28.1758L81.526 27.7363C81.6237 28.4004 81.692 29.0547 81.7311 29.6992C81.7897 30.3438 81.819 30.998 81.819 31.6621C81.819 31.9355 81.8092 32.2188 81.7897 32.5117C81.7897 32.8047 81.7897 33.0879 81.7897 33.3613L74.7584 34.6211L75.1979 38.2539C76.6823 38.1562 78.1569 38.0195 79.6217 37.8438C81.1061 37.6484 82.6002 37.4824 84.1041 37.3457C84.2408 38.3223 84.3776 39.3086 84.5143 40.3047C84.651 41.2812 84.8463 42.2383 85.1002 43.1758C82.3268 43.1562 79.5729 43.1562 76.8385 43.1758C74.1041 43.2148 71.3502 43.2344 68.5768 43.2344C68.6354 40.9492 68.7037 38.6738 68.7819 36.4082C68.86 34.1426 68.899 31.8574 68.899 29.5527V28.9961C68.899 27.668 68.8795 26.3496 68.8405 25.041C68.8014 23.7129 68.7623 22.375 68.7233 21.0273C70.2662 21.0469 71.7994 21.0566 73.3229 21.0566C74.8658 21.0371 76.4186 21.0273 77.9811 21.0273C79.1725 21.0273 80.3541 21.0566 81.526 21.1152C82.7174 21.1543 83.9088 21.2031 85.1002 21.2617L85.4225 25.1582ZM108.128 29.7871C108.128 31.4277 108.069 33.0586 107.952 34.6797C107.835 36.3008 107.717 37.9219 107.6 39.543C105.413 39.7383 103.235 39.9043 101.067 40.041C98.899 40.1777 96.7213 40.2461 94.5338 40.2461C94.3385 40.2461 93.9772 40.2461 93.4498 40.2461C92.9225 40.2266 92.3658 40.207 91.7799 40.1875C91.194 40.1484 90.6373 40.1094 90.11 40.0703C89.5826 40.0117 89.2311 39.9336 89.0553 39.8359C88.4108 39.4844 87.9615 39.0449 87.7076 38.5176C87.4537 37.9707 87.3268 37.3555 87.3268 36.6719C87.3268 36.4375 87.3365 36.125 87.3561 35.7344C87.3756 35.3438 87.4147 34.9336 87.4733 34.5039C87.5319 34.0742 87.61 33.6738 87.7076 33.3027C87.8053 32.9316 87.9225 32.6582 88.0592 32.4824C88.235 32.248 88.6354 32.0527 89.2604 31.8965C89.8854 31.7207 90.6276 31.584 91.4869 31.4863C92.3658 31.3887 93.3033 31.3105 94.2994 31.252C95.3151 31.1934 96.2819 31.1543 97.1998 31.1348C98.1178 31.0957 98.9381 31.0762 99.6608 31.0762C100.383 31.0762 100.901 31.0762 101.214 31.0762C101.272 30.6465 101.301 30.2266 101.301 29.8164C101.301 29.7773 101.301 29.6797 101.301 29.5234C101.301 29.3477 101.292 29.2402 101.272 29.2012C101.214 29.084 101.028 28.9863 100.715 28.9082C100.403 28.8301 100.012 28.7715 99.5436 28.7324C99.0944 28.6934 98.5963 28.6641 98.0494 28.6445C97.5221 28.6055 97.0045 28.5859 96.4967 28.5859C95.9889 28.5859 95.5397 28.5859 95.149 28.5859C94.7584 28.5859 94.4752 28.5859 94.2994 28.5859C93.069 28.5859 91.8385 28.6152 90.608 28.6738C89.3776 28.7129 88.1471 28.752 86.9166 28.791C86.9948 28.0488 87.0533 27.2969 87.0924 26.5352C87.151 25.7734 87.1608 25.0215 87.1217 24.2793C88.5475 24.0254 89.9733 23.8496 91.399 23.752C92.8444 23.6348 94.2994 23.5762 95.7643 23.5762C96.2916 23.5762 96.8678 23.5859 97.4928 23.6055C98.1178 23.6055 98.7428 23.625 99.3678 23.6641C99.9928 23.6836 100.608 23.7227 101.214 23.7812C101.839 23.8398 102.415 23.918 102.942 24.0156C103.489 24.1133 104.026 24.2891 104.553 24.543C105.1 24.7969 105.608 25.1094 106.077 25.4805C106.546 25.8516 106.956 26.2812 107.307 26.7695C107.659 27.2383 107.913 27.7461 108.069 28.293C108.089 28.3516 108.098 28.4492 108.098 28.5859C108.118 28.7227 108.128 28.8789 108.128 29.0547C108.128 29.2109 108.128 29.3574 108.128 29.4941C108.128 29.6309 108.128 29.7285 108.128 29.7871ZM101.594 36.6719V32.9219C101.028 32.9023 100.462 32.8926 99.8951 32.8926C99.3287 32.873 98.7623 32.8633 98.1959 32.8633C98.0787 32.8633 97.7467 32.873 97.1998 32.8926C96.6725 32.8926 96.0963 32.9121 95.4713 32.9512C94.8658 32.9902 94.3092 33.0391 93.8014 33.0977C93.2936 33.1562 93.0006 33.2441 92.9225 33.3613C92.8248 33.5176 92.7565 33.6836 92.7174 33.8594C92.6979 34.0156 92.6881 34.1816 92.6881 34.3574C92.6881 34.4941 92.6979 34.6797 92.7174 34.9141C92.7369 35.1484 92.7662 35.3926 92.8053 35.6465C92.8639 35.9004 92.9225 36.1348 92.9811 36.3496C93.0397 36.5645 93.1178 36.7207 93.2155 36.8184C93.2936 36.916 93.4205 36.9941 93.5963 37.0527C93.7916 37.0918 93.9967 37.1309 94.2115 37.1699C94.4264 37.1895 94.6412 37.209 94.8561 37.2285C95.0709 37.2285 95.2369 37.2285 95.3541 37.2285C95.8229 37.2285 96.3209 37.209 96.8483 37.1699C97.3951 37.1309 97.942 37.0918 98.4889 37.0527C99.0553 36.9941 99.6022 36.9355 100.13 36.877C100.657 36.7988 101.145 36.7305 101.594 36.6719ZM125.53 37.8145L125.032 42.9707C124.407 43.0098 123.782 43.0391 123.157 43.0586C122.532 43.0977 121.907 43.1172 121.282 43.1172C120.95 43.1172 120.51 43.1074 119.964 43.0879C119.417 43.0684 118.85 43.0391 118.264 43C117.678 42.9414 117.122 42.873 116.594 42.7949C116.067 42.6973 115.647 42.5801 115.335 42.4434C114.866 42.2285 114.475 41.9453 114.163 41.5938C113.87 41.2422 113.626 40.8613 113.43 40.4512C113.235 40.0215 113.079 39.5723 112.962 39.1035C112.844 38.6152 112.756 38.1367 112.698 37.668C112.639 37.2188 112.59 36.7402 112.551 36.2324C112.532 35.7051 112.512 35.168 112.493 34.6211C112.493 34.0742 112.493 33.5469 112.493 33.0391C112.493 32.5117 112.493 32.0234 112.493 31.5742V30.6953H110.676C110.755 29.8164 110.794 28.9473 110.794 28.0879C110.813 27.2285 110.862 26.3594 110.94 25.4805L112.698 25.5391V21.2031C113.811 21.418 114.915 21.5352 116.008 21.5547C117.122 21.5547 118.235 21.5938 119.348 21.6719L119.29 26.1543L121.751 26.3008C121.751 26.4375 121.751 26.5645 121.751 26.6816C121.77 26.7988 121.78 26.9258 121.78 27.0625C121.78 27.6094 121.731 28.1465 121.633 28.6738C121.555 29.1816 121.448 29.6992 121.311 30.2266H119.172C119.133 31.125 119.104 32.0234 119.085 32.9219C119.065 33.8203 119.055 34.7188 119.055 35.6172C119.055 36.0469 119.065 36.4375 119.085 36.7891C119.124 37.1211 119.202 37.4043 119.319 37.6387C119.456 37.873 119.671 38.0488 119.964 38.166C120.256 38.2832 120.667 38.3418 121.194 38.3418C121.917 38.3418 122.639 38.293 123.362 38.1953C124.085 38.0977 124.807 37.9707 125.53 37.8145ZM141.936 22.668L141.76 26.4766C141.155 26.4375 140.549 26.4082 139.944 26.3887C139.339 26.3691 138.733 26.3594 138.128 26.3594C137.874 26.3594 137.512 26.3691 137.044 26.3887C136.575 26.3887 136.047 26.3984 135.462 26.418C134.895 26.4375 134.309 26.4668 133.704 26.5059C133.098 26.5449 132.542 26.584 132.034 26.623C131.526 26.6621 131.096 26.7109 130.745 26.7695C130.393 26.8281 130.178 26.8867 130.1 26.9453C129.846 27.1992 129.719 27.4922 129.719 27.8242C129.719 28.0391 129.778 28.2148 129.895 28.3516C129.934 28.4102 130.149 28.459 130.54 28.498C130.93 28.5371 131.409 28.5762 131.975 28.6152C132.542 28.6348 133.157 28.6543 133.821 28.6738C134.505 28.6738 135.149 28.6836 135.755 28.7031C136.38 28.7031 136.926 28.7129 137.395 28.7324C137.883 28.752 138.225 28.7715 138.421 28.791C139.163 28.8887 139.749 29.1035 140.178 29.4355C140.628 29.7676 140.969 30.1875 141.204 30.6953C141.438 31.1836 141.585 31.7402 141.643 32.3652C141.721 32.9902 141.76 33.625 141.76 34.2695C141.76 34.582 141.731 34.9531 141.672 35.3828C141.633 35.8125 141.565 36.2422 141.467 36.6719C141.37 37.1016 141.223 37.502 141.028 37.873C140.852 38.2441 140.637 38.5371 140.383 38.752C140.09 38.9863 139.612 39.1816 138.948 39.3379C138.303 39.4941 137.6 39.6211 136.839 39.7188C136.096 39.8164 135.374 39.8848 134.671 39.9238C133.967 39.9629 133.43 39.9824 133.059 39.9824C131.77 39.9824 130.481 39.9141 129.192 39.7773C127.903 39.6211 126.624 39.4551 125.354 39.2793V33.6836C126.585 33.9375 127.815 34.084 129.046 34.123C130.296 34.1621 131.546 34.2305 132.796 34.3281C133.049 34.3477 133.43 34.3672 133.938 34.3867C134.465 34.3867 134.993 34.377 135.52 34.3574C136.047 34.3184 136.526 34.25 136.956 34.1523C137.385 34.0547 137.649 33.918 137.747 33.7422C137.786 33.6836 137.805 33.6152 137.805 33.5371C137.805 33.459 137.805 33.3906 137.805 33.332C137.805 33.1758 137.786 32.9805 137.747 32.7461C137.727 32.4922 137.669 32.2969 137.571 32.1602C137.551 32.1406 137.483 32.1309 137.366 32.1309C137.249 32.1113 137.18 32.1016 137.161 32.1016C136.067 32.043 134.973 32.0137 133.88 32.0137C132.786 31.9941 131.682 31.9355 130.569 31.8379C130.12 31.7988 129.661 31.7598 129.192 31.7207C128.743 31.6621 128.294 31.584 127.844 31.4863C127.473 31.4082 127.131 31.3203 126.819 31.2227C126.526 31.125 126.262 30.998 126.028 30.8418C125.813 30.6855 125.628 30.4902 125.471 30.2559C125.315 30.002 125.208 29.6699 125.149 29.2598C125.11 29.123 125.09 28.9961 125.09 28.8789C125.09 28.7422 125.09 28.5957 125.09 28.4395C125.09 28.0879 125.11 27.6875 125.149 27.2383C125.188 26.7891 125.256 26.3398 125.354 25.8906C125.471 25.4414 125.608 25.0215 125.764 24.6309C125.94 24.2207 126.165 23.8887 126.438 23.6348C126.614 23.459 126.926 23.3125 127.376 23.1953C127.825 23.0781 128.342 22.9805 128.928 22.9023C129.514 22.8047 130.139 22.7266 130.803 22.668C131.467 22.6094 132.102 22.5703 132.708 22.5508C133.333 22.5117 133.889 22.4922 134.378 22.4922C134.885 22.4727 135.266 22.4629 135.52 22.4629C136.614 22.4629 137.688 22.4824 138.743 22.5215C139.817 22.5605 140.881 22.6094 141.936 22.668ZM168.215 33.5664C168.215 35.2852 168.206 36.9844 168.186 38.6641C168.186 40.3242 168.176 42.0137 168.157 43.7324C166.946 43.6738 165.745 43.6445 164.553 43.6445C163.967 43.6445 163.372 43.6738 162.766 43.7324C162.18 43.791 161.594 43.8691 161.008 43.9668C160.266 42.3457 159.524 40.7441 158.782 39.1621C158.04 37.5605 157.297 35.9492 156.555 34.3281C156.008 33.1367 155.491 31.9453 155.003 30.7539C154.514 29.5625 154.026 28.3613 153.538 27.1504C153.362 29.7871 153.176 32.4141 152.981 35.0312C152.805 37.6289 152.659 40.2461 152.542 42.8828L146.214 42.707C146.116 38.957 146.028 35.2266 145.95 31.5156C145.872 27.8047 145.735 24.0742 145.54 20.3242L156.995 20.2656C157.385 21.2422 157.747 22.2285 158.079 23.2246C158.43 24.2012 158.762 25.1973 159.075 26.2129C159.524 27.7559 160.032 29.2891 160.598 30.8125C161.165 32.3164 161.731 33.8301 162.297 35.3535C162.278 32.9121 162.229 30.4805 162.151 28.0586C162.092 25.6367 162.044 23.1953 162.005 20.7344L167.922 21.4375C168.001 23.4688 168.069 25.4902 168.128 27.502C168.186 29.5137 168.215 31.5352 168.215 33.5664ZM193.587 31.3984C193.587 31.5547 193.587 31.7109 193.587 31.8672C193.587 32.0039 193.577 32.1504 193.557 32.3066C193.538 32.5801 193.489 33.0293 193.411 33.6543C193.333 34.2793 193.225 34.9336 193.089 35.6172C192.952 36.2812 192.786 36.8965 192.59 37.4629C192.395 38.0293 192.18 38.3906 191.946 38.5469C191.829 38.625 191.428 38.6934 190.745 38.752C190.081 38.8105 189.26 38.8691 188.284 38.9277C187.327 38.9863 186.282 39.0352 185.149 39.0742C184.016 39.1133 182.932 39.1523 181.897 39.1914C180.881 39.2109 179.983 39.2305 179.202 39.25C178.44 39.2695 177.932 39.2793 177.678 39.2793C177.561 39.2793 177.356 39.2793 177.063 39.2793C176.79 39.2793 176.497 39.2793 176.184 39.2793C175.872 39.2598 175.579 39.2402 175.305 39.2207C175.032 39.2012 174.837 39.1719 174.719 39.1328C174.446 39.0352 174.172 38.8789 173.899 38.6641C173.626 38.4297 173.372 38.1758 173.137 37.9023C172.903 37.6094 172.688 37.3164 172.493 37.0234C172.317 36.7109 172.19 36.418 172.112 36.1445C172.053 35.9297 172.005 35.6074 171.965 35.1777C171.926 34.7285 171.897 34.2695 171.878 33.8008C171.858 33.3125 171.839 32.8438 171.819 32.3945C171.819 31.9453 171.819 31.6035 171.819 31.3691C171.819 30.998 171.829 30.4902 171.848 29.8457C171.868 29.1816 171.926 28.5078 172.024 27.8242C172.122 27.1406 172.258 26.5059 172.434 25.9199C172.63 25.3145 172.903 24.8945 173.255 24.6602C173.411 24.5625 173.704 24.4746 174.133 24.3965C174.563 24.3184 175.071 24.25 175.657 24.1914C176.243 24.1328 176.868 24.0938 177.532 24.0742C178.196 24.0352 178.84 24.0156 179.465 24.0156C180.11 23.9961 180.706 23.9863 181.253 23.9863C181.799 23.9863 182.239 23.9961 182.571 24.0156C182.864 24.0352 183.284 24.0547 183.831 24.0742C184.378 24.0742 184.983 24.084 185.647 24.1035C186.331 24.123 187.034 24.1621 187.756 24.2207C188.479 24.2598 189.153 24.3184 189.778 24.3965C190.403 24.4746 190.95 24.582 191.419 24.7188C191.907 24.8359 192.229 24.9824 192.385 25.1582C192.639 25.4316 192.844 25.8418 193.001 26.3887C193.157 26.9355 193.274 27.5215 193.352 28.1465C193.45 28.752 193.508 29.3574 193.528 29.9629C193.567 30.5488 193.587 31.0273 193.587 31.3984ZM187.376 32.0137C187.376 31.7793 187.366 31.5059 187.346 31.1934C187.327 30.8809 187.297 30.5684 187.258 30.2559C187.219 29.9238 187.161 29.6113 187.083 29.3184C187.005 29.0059 186.907 28.752 186.79 28.5566C186.633 28.3027 186.331 28.1074 185.881 27.9707C185.432 27.834 184.934 27.7363 184.387 27.6777C183.86 27.5996 183.333 27.5508 182.805 27.5312C182.297 27.5117 181.917 27.502 181.663 27.502C181.526 27.502 181.282 27.5117 180.93 27.5312C180.579 27.5312 180.208 27.541 179.817 27.5605C179.446 27.5801 179.094 27.6191 178.762 27.6777C178.43 27.7168 178.215 27.7656 178.118 27.8242C177.942 27.9414 177.805 28.127 177.708 28.3809C177.61 28.6152 177.532 28.8789 177.473 29.1719C177.434 29.4648 177.405 29.7578 177.385 30.0508C177.385 30.3242 177.385 30.5488 177.385 30.7246C177.385 30.9004 177.395 31.2227 177.415 31.6914C177.454 32.1406 177.493 32.6289 177.532 33.1562C177.59 33.6641 177.659 34.1328 177.737 34.5625C177.815 34.9922 177.913 35.2656 178.03 35.3828C178.167 35.5391 178.421 35.666 178.792 35.7637C179.182 35.8613 179.592 35.9492 180.022 36.0273C180.471 36.0859 180.901 36.1348 181.311 36.1738C181.721 36.1934 182.014 36.2031 182.19 36.2031C182.503 36.2031 182.874 36.1934 183.303 36.1738C183.733 36.1543 184.163 36.1055 184.592 36.0273C185.042 35.9492 185.462 35.8418 185.852 35.7051C186.243 35.5684 186.555 35.3828 186.79 35.1484C186.926 35.0117 187.034 34.8066 187.112 34.5332C187.19 34.2598 187.249 33.9668 187.288 33.6543C187.327 33.3418 187.346 33.0391 187.346 32.7461C187.366 32.4336 187.376 32.1895 187.376 32.0137ZM221.126 23.0195C220.559 25.7734 220.012 28.5176 219.485 31.252C218.977 33.9863 218.43 36.7305 217.844 39.4844L211.751 39.543L209.524 31.6328L204.426 39.543L197.776 40.041C197.62 38.6934 197.454 37.3359 197.278 35.9688C197.102 34.6016 196.907 33.2441 196.692 31.8965C196.477 30.4902 196.262 29.1035 196.047 27.7363C195.833 26.3496 195.618 24.9629 195.403 23.5762L201.438 23.4004L203.372 32.5703C203.762 31.6914 204.163 30.8223 204.573 29.9629C204.983 29.1035 205.393 28.2344 205.803 27.3555C206.233 26.3789 206.702 25.4512 207.21 24.5723L210.52 24.6309C211.087 26.0566 211.633 27.4824 212.161 28.9082C212.708 30.3145 213.294 31.7109 213.919 33.0977C214.27 32.1602 214.573 31.291 214.827 30.4902C215.1 29.6699 215.344 28.8691 215.559 28.0879C215.774 27.2871 215.979 26.4766 216.174 25.6562C216.37 24.8164 216.565 23.9082 216.76 22.9316L221.126 23.0195Z" fill="white"/>
+<path d="M26.2343 59.3178C25.6142 58.7555 24.8003 58.001 23.8504 57.0821C21.6145 54.919 18.6378 51.8573 15.6667 48.258C12.6909 44.6531 9.75333 40.5482 7.56724 36.2998C5.37358 32.0366 4 27.7509 4 23.75C4 11.6531 14.0436 2 26.2487 2C38.4538 2 48.4974 11.6531 48.4974 23.75C48.4974 27.6177 47.1294 31.8374 44.9322 36.085C42.7443 40.3143 39.8041 44.4379 36.8254 48.077C33.8517 51.71 30.8724 54.8206 28.6344 57.0241C27.6766 57.9671 26.8569 58.7418 26.2343 59.3178Z" stroke="#FFA877" stroke-width="4"/>
+<path d="M21.4041 29.01L25.1774 24.765L15.8174 14.25C14.8186 15.377 14.2577 16.9035 14.2577 18.495C14.2577 20.0865 14.8186 21.613 15.8174 22.74L21.4041 29.01ZM30.4441 26.295C32.4841 27.36 35.3508 26.61 37.4708 24.225C40.0174 21.36 40.5108 17.25 38.5508 15.045C36.6041 12.855 32.9508 13.395 30.3908 16.26C28.2708 18.645 27.6041 21.87 28.5508 24.165L15.5374 38.805L17.4174 40.92L26.6041 30.615L35.7774 40.935L37.6574 38.82L28.4841 28.5L30.4441 26.295Z" fill="#FFF177"/>
+<path d="M5.60416 52C-14.8959 73 66.1041 71.5 47.6041 52M11.6041 52C9.10411 59.5 42.6041 60 40.6041 52" stroke="#FFF177" stroke-width="3"/>
+</svg>

src/components/Navbar.tsx

+import { Box, Link, VStack, Flex } from '@chakra-ui/react';
+import { Link as RouterLink, useLocation} from 'react-router-dom';
+import logoImage from '../assets/logo1.svg';
+
+function Navbar() {
+    let location = useLocation();
+    const boxStyle = {
+        width: '100%',
+        height: '66px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '18px',
+        fontWeight: 'bold',
+        cursor: 'pointer',
+        background: '#1C1C1C',
+    };
+
+    const getBoxStyleForPath = (path: string) => {
+        const baseStyle = {
+            background: '#1C1C1C',
+            color: 'white',
+        };
+    
+        if (location.pathname === path) {
+            return {
+            ...baseStyle,
+            background: '#FFF177', 
+            color: 'black',
+            };
+        }
+        return baseStyle;
+        };
+
+    return (
+    <Flex
+        as="nav"
+        align="center"
+        justify="space-between"
+        p="4"
+        bg="transparent"
+        color="white"
+        position="fixed"
+        width="100%"
+    >
+        <Box bg="#1C1C1C" color="white" w="64" h="100vh" pt="4" position="fixed" left="0" top="0">
+            <VStack spacing="4" align="stretch">
+            <Link as={RouterLink} to="/" mb="40px" pl='4' pr='4'>
+                <img src={logoImage} alt="logo" />
+            </Link>
+            <Link as={RouterLink} to="/" display="flex" alignItems="center">
+            <div style={{ ...boxStyle, ...getBoxStyleForPath('/') }}>
+                    List Restaurant
+                </div>
+            </Link>
+            <Link as={RouterLink} to="/redeem-voucher" display="flex" alignItems="center">
+                <div style={{ ...boxStyle, ...getBoxStyleForPath('/redeem-voucher') }}>
+                    Redeem Voucher
+                </div>
+            </Link>
+            <Link as={RouterLink} to="/my-voucher" display="flex" alignItems="center">
+                <div style={{ ...boxStyle, ...getBoxStyleForPath('/my-voucher') }}>
+                    My Voucher
+                </div>
+            </Link>
+            <Link as={RouterLink} to="/logout" display="flex" alignItems="center">
+                <div style={{ ...boxStyle, ...getBoxStyleForPath('/logout') }}>
+                    Logout
+                </div>
+            </Link>
+            </VStack>
+        </Box>
+    </Flex>
+    );
+};
+
+export default Navbar;
\ No newline at end of file