Navbars

Centered with icons and button

0import React, { useState } from "react";
1import Link from "next/link";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const TwitterLogo = ({ className }) => {
70  return (
71    <svg
72      className={className}
73      viewBox="0 0 243 198"
74      fill="none"
75      xmlns="http://www.w3.org/2000/svg"
76    >
77      <path
78        fillRule="evenodd"
79        clipRule="evenodd"
80        d="M154.63 1.05056C147.242 2.89856 137.342 8.97556 131.058 15.5196C120.848 26.1526 116.23 39.0476 117.323 53.8726L117.866 61.2446L110.684 60.5566C78.8396 57.5036 47.9986 42.8166 24.1576 19.3506L13.8136 9.16856L11.4586 14.3346C8.50956 20.8026 6.68856 31.9466 7.50956 38.4996C9.10856 51.2476 15.8126 64.2226 24.8236 72.0086L29.5016 76.0516L25.0016 75.4036C20.9476 74.8196 13.3846 72.5596 8.75156 70.5456C7.27956 69.9066 7.00156 70.3246 7.00156 73.1826C7.00156 78.4056 9.73455 87.7186 13.1456 94.1176C18.8306 104.784 28.2266 112.28 44.0016 118.734C46.3476 119.693 46.2156 119.801 41.8746 120.473C39.3306 120.868 34.4916 121.035 31.1236 120.845C27.7546 120.655 24.9986 120.887 24.9996 121.36C25.0006 121.833 26.4566 124.983 28.2336 128.36C35.1816 141.557 49.0466 151.473 64.5536 154.335L71.4356 155.606L66.9086 158.72C60.4886 163.137 47.6286 169.394 40.0016 171.811C29.1426 175.254 22.0386 176.341 9.88856 176.422C-3.36644 176.511 -3.38744 176.339 10.7356 183.42C21.2786 188.706 33.9256 193.105 46.0016 195.684C58.2316 198.297 92.8956 198.267 104.949 195.633C148.544 186.108 183.262 159.032 202.572 119.5C212.202 99.7846 216.709 82.5116 217.704 61.4996L218.273 49.4996L227.387 40.8846C232.4 36.1456 237.948 30.2446 239.715 27.7716L242.929 23.2746L236.625 25.5626C230.653 27.7306 215.897 31.2276 215.289 30.6196C215.133 30.4636 217.044 28.8726 219.535 27.0826C222.027 25.2936 225.826 21.4976 227.979 18.6466C231.672 13.7546 236.286 4.94956 235.544 4.20856C235.357 4.02156 232.571 5.19556 229.353 6.81656C223.392 9.81956 208.181 14.9996 205.322 14.9996C204.454 14.9996 201.948 13.3766 199.752 11.3926C197.556 9.40856 192.362 6.17256 188.21 4.20056C181.144 0.844556 179.95 0.598556 169.581 0.348556C163.488 0.201556 156.759 0.517556 154.63 1.05056Z"
81      />
82    </svg>
83  );
84};
85
86const FacebookLogo = ({ className }) => {
87  return (
88    <svg
89      className={className}
90      viewBox="0 0 512 514"
91      fill="none"
92      xmlns="http://www.w3.org/2000/svg"
93    >
94      <path
95        fillRule="evenodd"
96        clipRule="evenodd"
97        d="M53.2927 2.77738C30.7051 8.24518 11.1715 26.058 3.33683 48.3306L0.454855 56.5247L0.142311 253.454C-0.20067 469.431 -0.515559 458.932 6.76196 474.119C14.4866 490.24 30.0905 504.124 47.2782 510.17L55.4723 513.052L135.95 513.391L216.428 513.729V423.567V333.405L183.944 333.094L151.46 332.782L151.151 295.616L150.842 258.45H183.635H216.428V218.253C216.428 181.97 216.655 177.153 218.762 168.795C223.555 149.783 235.108 131.732 249.428 120.88C258.25 114.194 272.923 107.056 283.262 104.422C291.92 102.215 340.196 100.763 358.727 102.153L369.774 102.982V136.669V170.357L350.167 170.949C325.429 171.697 317.973 173.742 308.537 182.366C297.553 192.405 296.789 195.334 296.249 229.478L295.791 258.45H332.197H368.603L368.55 261.084C368.52 262.533 365.734 279.258 362.358 298.25L356.221 332.782L326.124 333.095L296.027 333.408V423.568V513.729L376.505 513.391L456.983 513.052L464.591 510.316C486.083 502.585 502.401 486.166 509.191 465.442L512 456.864V257.28V57.6953L509.129 48.9159C501.842 26.6315 483.07 9.03766 460.395 3.23742C451.543 0.973509 446.956 0.924349 255.747 1.01917C91.1084 1.10111 59.0683 1.3797 53.2927 2.77738Z"
98      />
99    </svg>
100  );
101};
102
103const InstagramLogo = ({ className }) => {
104  return (
105    <svg
106      className={className}
107      viewBox="0 0 512 512"
108      fill="none"
109      xmlns="http://www.w3.org/2000/svg"
110    >
111      <path
112        fillRule="evenodd"
113        clipRule="evenodd"
114        d="M132.184 0.178038C103.769 3.09194 81.9677 10.9921 60.2455 26.2445C42.2959 38.848 24.9245 58.8789 15.2227 78.1607C9.08245 90.3627 3.48936 108.284 1.18391 123.141C-0.387942 133.271 -0.397756 377.892 1.17328 388.116C6.05814 419.902 20.0045 447.616 42.2836 469.814C65.1017 492.547 91.7807 505.485 125.87 510.349C139.069 512.232 372.193 512.24 385.48 510.358C419.304 505.567 446.346 492.449 469.066 469.814C491.345 447.616 505.292 419.902 510.177 388.116C511.748 377.892 511.738 133.271 510.166 123.141C507.009 102.8 499.54 82.2858 489.778 67.1471C469.255 35.3191 439.58 13.5715 404.257 4.47488C386.741 -0.0362335 394.488 0.201751 259.764 0.0373683C191.169 -0.0468675 133.758 0.0161088 132.184 0.178038ZM401.656 95.6761C410.069 99.5828 416.772 108.721 418.202 118.234C420.66 134.592 408.888 150.457 392.777 152.498C372.739 155.035 355.963 138.047 358.941 118.234C361.923 98.3863 383.245 87.1265 401.656 95.6761ZM272.031 134.671C296.697 138.161 319.733 148.904 337.457 165.184C358.881 184.86 372.538 210.573 376.675 239.02C377.773 246.568 377.776 264.655 376.681 272.237C371.363 309.057 348.985 342.517 317.421 360.848C282.455 381.154 241.154 383.058 203.79 366.087C182.138 356.252 160.985 336.497 148.826 314.754C133.906 288.075 129.761 254.152 137.754 224.132C145.832 193.791 167.149 165.801 193.929 150.371C218.164 136.408 245.485 130.916 272.031 134.671ZM241.047 174.717C234.42 175.895 222.404 180.116 216.419 183.37C198.795 192.949 184.76 209.545 178.316 228.426C174.59 239.341 173.621 246.552 174.109 259.717C174.713 276.026 178.468 287.649 187.531 301.269C198.813 318.226 216.682 330.806 236.231 335.556C244.606 337.591 266.744 337.591 275.119 335.556C294.596 330.824 312.577 318.166 323.814 301.276C329.154 293.251 331.75 287.695 334.774 277.823C336.759 271.341 336.942 269.543 336.993 256.037C337.041 243.035 336.829 240.564 335.18 234.869C326.652 205.419 305.997 184.694 276.731 176.224C269.92 174.252 248.702 173.357 241.047 174.717Z"
115      />
116    </svg>
117  );
118};
119
120const HamburgerMenu = ({ open, setOpen }) => {
121  return (
122    <button
123      onClick={() => setOpen(!open)}
124      className="flex aspect-square items-center rounded-lg bg-slate-200 p-2"
125    >
126      <div className="flex w-7 cursor-pointer flex-col gap-1">
127        <div
128          className={
129            open
130              ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
131              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
132          }
133        />
134        <div
135          className={
136            open
137              ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
138              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
139          }
140        />
141        <div
142          className={
143            open
144              ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
145              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
146          }
147        />
148      </div>
149    </button>
150  );
151};
152
153const data = [
154  {
155    name: "Product",
156    link: "#",
157  },
158  {
159    name: "Solutions",
160    link: "#",
161  },
162  {
163    name: "Enterprise",
164    link: "#",
165  },
166  {
167    name: "Resources",
168    link: "#",
169  },
170];
171
172const data2 = [
173  {
174    link: "#",
175    Icon: TwitterLogo,
176  },
177  {
178    link: "#",
179    Icon: FacebookLogo,
180  },
181  {
182    link: "#",
183    Icon: InstagramLogo,
184  },
185];
186
187export function Navbars1() {
188  const [open, setOpen] = useState(false);
189  return (
190    <nav className="relative z-30 mx-auto w-full bg-slate-100 p-4 lg:max-w-[1440px]">
191      <div className="flex w-full items-center justify-between gap-x-8">
192        <div className="flex gap-x-12 gap-y-2 max-lg:contents max-sm:flex-col max-sm:text-center lg:gap-x-8">
193          {data.map(({ name, link }, index: number) => {
194            return (
195              <div className="contents" key={index}>
196                <div className="max-lg:hidden lg:contents">
197                  <Link
198                    role="button"
199                    href={link}
200                    className="font-medium capitalize text-slate-900 sm:text-sm"
201                  >
202                    {name}
203                  </Link>
204                </div>
205
206                {index === Math.floor(data.length / 2 - 1) && (
207                  <Link href="/">
208                    <Logo className="h-6 flex-shrink-0" />
209                  </Link>
210                )}
211              </div>
212            );
213          })}
214        </div>
215
216        <div
217          className={`${
218            open ? "" : "max-lg:hidden"
219          } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6 lg:contents`}
220        >
221          <div className="flex gap-x-6 lg:hidden">
222            {data.map(({ name, link }, index2: number) => {
223              return (
224                <Link
225                  key={index2}
226                  role="button"
227                  href={link}
228                  className="font-medium capitalize text-slate-900 sm:text-sm"
229                >
230                  {name}
231                </Link>
232              );
233            })}
234          </div>
235
236          <div className="flex flex-wrap items-center gap-x-12 gap-y-6 lg:order-first lg:flex-1 lg:gap-x-8">
237            {data2.map(({ link, Icon }, index2: number) => {
238              return (
239                <Link
240                  role="button"
241                  key={index2}
242                  href={link}
243                  className="inline-flex h-fit w-fit select-none items-center justify-center text-base outline-1 outline-sky-700 duration-75 active:scale-95 disabled:pointer-events-none"
244                >
245                  <Icon className="h-6 w-6 fill-slate-900" aria-hidden="true" />
246                  <span className="sr-only">...</span>
247                </Link>
248              );
249            })}
250          </div>
251
252          <div className="flex lg:flex-1 lg:justify-end">
253            <Link
254              className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium capitalize text-slate-100 duration-75 hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
255              role="button"
256              href="#"
257            >
258              Pricing & FAQ
259            </Link>
260          </div>
261        </div>
262        <div className="lg:hidden">
263          <HamburgerMenu open={open} setOpen={setOpen} />
264        </div>
265      </div>
266    </nav>
267  );
268}
269

Justified with button and divider

0import React, { useState } from "react";
1import Link from "next/link";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const HamburgerMenu = ({ open, setOpen }) => {
70  return (
71    <button
72      onClick={() => setOpen(!open)}
73      className="flex aspect-square items-center rounded-lg bg-slate-200 p-2"
74    >
75      <div className="flex w-7 cursor-pointer flex-col gap-1">
76        <div
77          className={
78            open
79              ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
80              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
81          }
82        />
83        <div
84          className={
85            open
86              ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
87              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
88          }
89        />
90        <div
91          className={
92            open
93              ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
94              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
95          }
96        />
97      </div>
98    </button>
99  );
100};
101
102const data = [
103  {
104    name: "Product",
105    link: "#",
106  },
107  {
108    name: "Solutions",
109    link: "#",
110  },
111  {
112    name: "Enterprise",
113    link: "#",
114  },
115  {
116    name: "Resources",
117    link: "#",
118  },
119  {
120    name: "Pricing",
121    link: "#",
122  },
123];
124
125export function Navbars2() {
126  const [open, setOpen] = useState(false);
127  return (
128    <nav className="relative z-30 mx-auto w-full bg-slate-100 p-4 lg:max-w-[1440px]">
129      <div className="flex w-full items-center justify-between gap-x-8">
130        <Link href="/">
131          <Logo className="h-6 flex-shrink-0 border-slate-300 lg:border-r lg:pr-8" />
132        </Link>
133
134        <div
135          className={`${
136            open ? "" : "max-lg:hidden"
137          } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6`}
138        >
139          <div className="flex gap-x-12 gap-y-2 max-sm:flex-col max-sm:text-center lg:gap-x-8">
140            {data.map(({ name, link }, index: number) => {
141              return (
142                <Link
143                  key={index}
144                  role="button"
145                  href={link}
146                  className="font-medium capitalize text-slate-900 sm:text-sm"
147                >
148                  {name}
149                </Link>
150              );
151            })}
152          </div>
153
154          <Link
155            className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium capitalize text-slate-100 duration-75 hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
156            role="button"
157            href="/pricing"
158          >
159            Pricing & FAQ
160          </Link>
161        </div>
162        <div className="lg:hidden">
163          <HamburgerMenu open={open} setOpen={setOpen} />
164        </div>
165      </div>
166    </nav>
167  );
168}
169

Justified with search and options

0import React, { useState } from "react";
1import Link from "next/link";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const SearchIcon = ({ className }) => {
70  return (
71    <svg
72      xmlns="http://www.w3.org/2000/svg"
73      viewBox="0 0 24 24"
74      preserveAspectRatio="xMidYMid meet"
75      className={className}
76    >
77      <path
78        fillRule="evenodd"
79        d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
80        clipRule="evenodd"
81      />
82    </svg>
83  );
84};
85
86const UploadIcon = ({ className }) => {
87  return (
88    <svg
89      xmlns="http://www.w3.org/2000/svg"
90      viewBox="0 0 24 24"
91      preserveAspectRatio="xMidYMid meet"
92      className={className}
93    >
94      <path d="M11.47 1.72a.75.75 0 011.06 0l3 3a.75.75 0 01-1.06 1.06l-1.72-1.72V7.5h-1.5V4.06L9.53 5.78a.75.75 0 01-1.06-1.06l3-3zM11.25 7.5V15a.75.75 0 001.5 0V7.5h3.75a3 3 0 013 3v9a3 3 0 01-3 3h-9a3 3 0 01-3-3v-9a3 3 0 013-3h3.75z" />
95    </svg>
96  );
97};
98
99const BookmarkIcon = ({ className }) => {
100  return (
101    <svg
102      xmlns="http://www.w3.org/2000/svg"
103      viewBox="0 0 24 24"
104      preserveAspectRatio="xMidYMid meet"
105      className={className}
106    >
107      <path
108        fillRule="evenodd"
109        d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z"
110        clipRule="evenodd"
111      />
112    </svg>
113  );
114};
115
116const SettingsIcon = ({ className }) => {
117  return (
118    <svg
119      xmlns="http://www.w3.org/2000/svg"
120      viewBox="0 0 24 24"
121      preserveAspectRatio="xMidYMid meet"
122      className={className}
123    >
124      <path
125        fillRule="evenodd"
126        d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
127        clipRule="evenodd"
128      />
129    </svg>
130  );
131};
132
133const HamburgerMenu = ({ open, setOpen }) => {
134  return (
135    <button
136      onClick={() => setOpen(!open)}
137      className="flex aspect-square items-center rounded-lg bg-slate-200 p-2"
138    >
139      <div className="flex w-7 cursor-pointer flex-col gap-1">
140        <div
141          className={
142            open
143              ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
144              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
145          }
146        />
147        <div
148          className={
149            open
150              ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
151              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
152          }
153        />
154        <div
155          className={
156            open
157              ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
158              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
159          }
160        />
161      </div>
162    </button>
163  );
164};
165
166const data = [
167  {
168    name: "Upload",
169    link: "#",
170    Icon: UploadIcon,
171  },
172  {
173    link: "#",
174    Icon: BookmarkIcon,
175  },
176  {
177    link: "#",
178    Icon: SettingsIcon,
179  },
180];
181
182export function Navbars3() {
183  const [open, setOpen] = useState(false);
184  return (
185    <nav className="relative z-30 mx-auto w-full bg-slate-100 p-4 lg:max-w-[1440px]">
186      <div className="flex w-full items-center justify-between gap-x-8">
187        <Link href="/">
188          <Logo className="h-6 flex-shrink-0" />
189        </Link>
190
191        <div
192          className={`${
193            open ? "" : "max-lg:hidden"
194          } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6 lg:contents`}
195        >
196          {/* wdawdwad */}
197
198          <div className="relative w-full sm:w-96">
199            <div className="absolute right-3 top-0 flex h-full place-items-center">
200              <SearchIcon className={"h-6 w-6 fill-slate-500"} />
201            </div>
202
203            <input
204              className="placeholder:text-gray h-full w-full rounded-md bg-slate-200  px-4 py-2.5 text-slate-700 caret-slate-700 focus:outline-none focus:ring-0 "
205              placeholder="Search..."
206            />
207          </div>
208          {/* wdawdwad */}
209          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6 max-lg:order-first lg:gap-x-8">
210            {data.map(({ name, link, Icon }, index: number) => {
211              return (
212                <Link
213                  key={index}
214                  role="button"
215                  href={link}
216                  className="group inline-flex h-fit w-fit select-none items-center justify-center gap-x-2.5 text-base outline-1 outline-sky-700 duration-75 active:scale-95 disabled:pointer-events-none"
217                >
218                  <Icon
219                    className="h-6 w-6 group-first:-ml-1.5 group-first:h-5 group-first:w-5"
220                    aria-hidden="true"
221                  />
222                  <span className="sr-only">...</span>
223                  {name}
224                </Link>
225              );
226            })}
227
228            <Link href="#">
229              <img
230                src="https://picsum.photos/40"
231                alt=""
232                className="aspect-square h-10 w-10 rounded-full bg-sky-100 object-cover"
233              />
234            </Link>
235          </div>
236        </div>
237        <div className="lg:hidden">
238          <HamburgerMenu open={open} setOpen={setOpen} />
239        </div>
240      </div>
241    </nav>
242  );
243}
244

Justified with buttons and links

0import Link from "next/link";
1import React, { useState } from "react";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const data = [
70  {
71    name: "Product",
72    link: "#",
73  },
74  {
75    name: "Solutions",
76    link: "#",
77  },
78  {
79    name: "Enterprise",
80    link: "#",
81  },
82  {
83    name: "Resources",
84    link: "#",
85  },
86];
87
88const Links = () => {
89  return (
90    <div className="flex flex-nowrap gap-10">
91      {data.map(({ name, link }, index: number) => {
92        return (
93          <Link key={index} className="w-fit font-medium text-slate-700" href={link}>
94            {name}
95          </Link>
96        );
97      })}
98    </div>
99  );
100};
101
102const CTAButtons = () => {
103  return (
104    <div className="flex items-center gap-x-8 gap-y-4 max-sm:flex-col lg:flex-1 lg:justify-end">
105      <Link
106        role="button"
107        href="#"
108        className=" font-medium capitalize text-sky-700 sm:text-sm"
109      >
110        Sign In
111      </Link>
112      <Link
113        className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium capitalize text-slate-100 duration-75 hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
114        role="button"
115        href="#"
116      >
117        Pricing & FAQ
118      </Link>
119    </div>
120  );
121};
122
123const MobileNav = ({ setOpen, open }) => {
124  return (
125    <div
126      className={`${
127        open ? "" : "hidden"
128      } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6 lg:contents`}
129    >
130      {/* wdawdwad */}
131
132      <div className="flex flex-nowrap gap-10">
133        {data.map(({ name, link }, index: number) => {
134          return (
135            <Link
136              key={index}
137              className="w-fit font-medium text-slate-700"
138              href={link}
139            >
140              {name}
141            </Link>
142          );
143        })}
144      </div>
145      <CTAButtons />
146    </div>
147  );
148};
149
150const HamburgerMenu = ({ setOpen, open }) => {
151  return (
152    <div
153      onClick={() => setOpen(!open)}
154      className="flex h-min w-[50px] cursor-pointer flex-wrap gap-[6px]"
155    >
156      <div
157        className={
158          open
159            ? "h-[6px] w-full origin-center translate-y-[12px] -rotate-45 rounded-full bg-slate-200 duration-150"
160            : "h-[6px] w-full rounded-full bg-slate-200 duration-150"
161        }
162      />
163      <div
164        className={
165          open
166            ? "h-[6px] w-full scale-0 rounded-full bg-slate-200 duration-150"
167            : "h-[6px] w-full scale-100 rounded-full bg-slate-200 duration-150"
168        }
169      />
170      <div
171        className={
172          open
173            ? "h-[6px] w-full origin-center -translate-y-[12px] rotate-45 rounded-full bg-slate-200 duration-150"
174            : "h-[6px] w-full rounded-full bg-slate-200 duration-150"
175        }
176      />
177    </div>
178  );
179};
180
181export function Navbars4() {
182  const [search, setSearch] = useState("");
183
184  const [open, setOpen] = useState(false);
185  return (
186    <div className="relative z-20 mx-auto flex w-full max-w-[1440px] justify-between p-4">
187      <Logo className="h-6 flex-shrink-0" />
188      {/* nav links */}
189      <div className="hidden lg:block">
190        <Links />
191      </div>
192      <div className="hidden lg:block">
193        <CTAButtons />
194      </div>
195      <div className="flex w-full justify-end lg:hidden">
196        <div className="h-min lg:hidden">
197          <HamburgerMenu open={open} setOpen={setOpen} />
198        </div>
199      </div>
200
201      <div className="lg:hidden">
202        <MobileNav open={open} setOpen={setOpen} />
203      </div>
204
205      {/* other links */}
206    </div>
207  );
208}
209

Product Solutions Enterprise Resources

Justified with icons and menu

0import React, { useState } from "react";
1import Link from "next/link";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const TwitterLogo = ({ className }) => {
70  return (
71    <svg
72      className={className}
73      viewBox="0 0 243 198"
74      fill="none"
75      xmlns="http://www.w3.org/2000/svg"
76    >
77      <path
78        fillRule="evenodd"
79        clipRule="evenodd"
80        d="M154.63 1.05056C147.242 2.89856 137.342 8.97556 131.058 15.5196C120.848 26.1526 116.23 39.0476 117.323 53.8726L117.866 61.2446L110.684 60.5566C78.8396 57.5036 47.9986 42.8166 24.1576 19.3506L13.8136 9.16856L11.4586 14.3346C8.50956 20.8026 6.68856 31.9466 7.50956 38.4996C9.10856 51.2476 15.8126 64.2226 24.8236 72.0086L29.5016 76.0516L25.0016 75.4036C20.9476 74.8196 13.3846 72.5596 8.75156 70.5456C7.27956 69.9066 7.00156 70.3246 7.00156 73.1826C7.00156 78.4056 9.73455 87.7186 13.1456 94.1176C18.8306 104.784 28.2266 112.28 44.0016 118.734C46.3476 119.693 46.2156 119.801 41.8746 120.473C39.3306 120.868 34.4916 121.035 31.1236 120.845C27.7546 120.655 24.9986 120.887 24.9996 121.36C25.0006 121.833 26.4566 124.983 28.2336 128.36C35.1816 141.557 49.0466 151.473 64.5536 154.335L71.4356 155.606L66.9086 158.72C60.4886 163.137 47.6286 169.394 40.0016 171.811C29.1426 175.254 22.0386 176.341 9.88856 176.422C-3.36644 176.511 -3.38744 176.339 10.7356 183.42C21.2786 188.706 33.9256 193.105 46.0016 195.684C58.2316 198.297 92.8956 198.267 104.949 195.633C148.544 186.108 183.262 159.032 202.572 119.5C212.202 99.7846 216.709 82.5116 217.704 61.4996L218.273 49.4996L227.387 40.8846C232.4 36.1456 237.948 30.2446 239.715 27.7716L242.929 23.2746L236.625 25.5626C230.653 27.7306 215.897 31.2276 215.289 30.6196C215.133 30.4636 217.044 28.8726 219.535 27.0826C222.027 25.2936 225.826 21.4976 227.979 18.6466C231.672 13.7546 236.286 4.94956 235.544 4.20856C235.357 4.02156 232.571 5.19556 229.353 6.81656C223.392 9.81956 208.181 14.9996 205.322 14.9996C204.454 14.9996 201.948 13.3766 199.752 11.3926C197.556 9.40856 192.362 6.17256 188.21 4.20056C181.144 0.844556 179.95 0.598556 169.581 0.348556C163.488 0.201556 156.759 0.517556 154.63 1.05056Z"
81      />
82    </svg>
83  );
84};
85
86const FacebookLogo = ({ className }) => {
87  return (
88    <svg
89      className={className}
90      viewBox="0 0 512 514"
91      fill="none"
92      xmlns="http://www.w3.org/2000/svg"
93    >
94      <path
95        fillRule="evenodd"
96        clipRule="evenodd"
97        d="M53.2927 2.77738C30.7051 8.24518 11.1715 26.058 3.33683 48.3306L0.454855 56.5247L0.142311 253.454C-0.20067 469.431 -0.515559 458.932 6.76196 474.119C14.4866 490.24 30.0905 504.124 47.2782 510.17L55.4723 513.052L135.95 513.391L216.428 513.729V423.567V333.405L183.944 333.094L151.46 332.782L151.151 295.616L150.842 258.45H183.635H216.428V218.253C216.428 181.97 216.655 177.153 218.762 168.795C223.555 149.783 235.108 131.732 249.428 120.88C258.25 114.194 272.923 107.056 283.262 104.422C291.92 102.215 340.196 100.763 358.727 102.153L369.774 102.982V136.669V170.357L350.167 170.949C325.429 171.697 317.973 173.742 308.537 182.366C297.553 192.405 296.789 195.334 296.249 229.478L295.791 258.45H332.197H368.603L368.55 261.084C368.52 262.533 365.734 279.258 362.358 298.25L356.221 332.782L326.124 333.095L296.027 333.408V423.568V513.729L376.505 513.391L456.983 513.052L464.591 510.316C486.083 502.585 502.401 486.166 509.191 465.442L512 456.864V257.28V57.6953L509.129 48.9159C501.842 26.6315 483.07 9.03766 460.395 3.23742C451.543 0.973509 446.956 0.924349 255.747 1.01917C91.1084 1.10111 59.0683 1.3797 53.2927 2.77738Z"
98      />
99    </svg>
100  );
101};
102
103const InstagramLogo = ({ className }) => {
104  return (
105    <svg
106      className={className}
107      viewBox="0 0 512 512"
108      fill="none"
109      xmlns="http://www.w3.org/2000/svg"
110    >
111      <path
112        fillRule="evenodd"
113        clipRule="evenodd"
114        d="M132.184 0.178038C103.769 3.09194 81.9677 10.9921 60.2455 26.2445C42.2959 38.848 24.9245 58.8789 15.2227 78.1607C9.08245 90.3627 3.48936 108.284 1.18391 123.141C-0.387942 133.271 -0.397756 377.892 1.17328 388.116C6.05814 419.902 20.0045 447.616 42.2836 469.814C65.1017 492.547 91.7807 505.485 125.87 510.349C139.069 512.232 372.193 512.24 385.48 510.358C419.304 505.567 446.346 492.449 469.066 469.814C491.345 447.616 505.292 419.902 510.177 388.116C511.748 377.892 511.738 133.271 510.166 123.141C507.009 102.8 499.54 82.2858 489.778 67.1471C469.255 35.3191 439.58 13.5715 404.257 4.47488C386.741 -0.0362335 394.488 0.201751 259.764 0.0373683C191.169 -0.0468675 133.758 0.0161088 132.184 0.178038ZM401.656 95.6761C410.069 99.5828 416.772 108.721 418.202 118.234C420.66 134.592 408.888 150.457 392.777 152.498C372.739 155.035 355.963 138.047 358.941 118.234C361.923 98.3863 383.245 87.1265 401.656 95.6761ZM272.031 134.671C296.697 138.161 319.733 148.904 337.457 165.184C358.881 184.86 372.538 210.573 376.675 239.02C377.773 246.568 377.776 264.655 376.681 272.237C371.363 309.057 348.985 342.517 317.421 360.848C282.455 381.154 241.154 383.058 203.79 366.087C182.138 356.252 160.985 336.497 148.826 314.754C133.906 288.075 129.761 254.152 137.754 224.132C145.832 193.791 167.149 165.801 193.929 150.371C218.164 136.408 245.485 130.916 272.031 134.671ZM241.047 174.717C234.42 175.895 222.404 180.116 216.419 183.37C198.795 192.949 184.76 209.545 178.316 228.426C174.59 239.341 173.621 246.552 174.109 259.717C174.713 276.026 178.468 287.649 187.531 301.269C198.813 318.226 216.682 330.806 236.231 335.556C244.606 337.591 266.744 337.591 275.119 335.556C294.596 330.824 312.577 318.166 323.814 301.276C329.154 293.251 331.75 287.695 334.774 277.823C336.759 271.341 336.942 269.543 336.993 256.037C337.041 243.035 336.829 240.564 335.18 234.869C326.652 205.419 305.997 184.694 276.731 176.224C269.92 174.252 248.702 173.357 241.047 174.717Z"
115      />
116    </svg>
117  );
118};
119
120const LinkedInLogo = ({ className }) => {
121  return (
122    <svg
123      className={className}
124      viewBox="0 0 512 512"
125      fill="none"
126      xmlns="http://www.w3.org/2000/svg"
127    >
128      <path
129        fillRule="evenodd"
130        clipRule="evenodd"
131        d="M31.351 1.92325C17.386 6.89125 6.739 17.6712 1.897 31.7452C0.0569999 37.0922 0 43.8353 0 255.945C0 468.959 0.0500001 474.777 1.919 480.21C6.816 494.442 17.527 505.138 31.8 510.048C37.147 511.888 43.89 511.945 256 511.945C469.014 511.945 474.832 511.895 480.265 510.026C494.497 505.129 505.193 494.418 510.103 480.145C511.943 474.798 512 468.055 512 255.945C512 43.8353 511.943 37.0922 510.103 31.7452C505.193 17.4722 494.497 6.76125 480.265 1.86425C474.829 -0.00575399 469.11 -0.052754 255.593 0.018246C45.849 0.088246 36.28 0.169246 31.351 1.92325ZM134.015 60.1502C171.626 73.8662 182.201 120.815 154.018 148.952C132.683 170.251 99.895 170.075 78.417 148.545C70.185 140.293 65.774 132.185 63.403 120.945C57.702 93.9182 76.074 65.4742 103.782 58.4312C111.991 56.3432 125.717 57.1242 134.015 60.1502ZM382.295 186.437C419.18 192.869 442.43 216.499 452.041 257.323C456.855 277.771 457.216 284.725 457.711 366.516C458.227 451.924 458.435 448.881 451.81 452.919C448.664 454.838 446.843 454.937 415 454.935C384.089 454.932 381.283 454.789 378.695 453.082C372.117 448.745 372.557 454.093 371.938 370.945C371.323 288.339 371.556 291.566 365.23 278.109C361.887 270.998 353.912 262.885 347.451 260.023C340.219 256.82 328.558 255.391 320.517 256.724C301.44 259.885 289.68 272.469 282.92 296.956C280.59 305.394 280.573 305.869 280.038 376.445C279.455 453.417 279.734 449.899 273.928 453.329C271.559 454.728 266.843 454.944 238.846 454.941C208.529 454.938 206.299 454.815 203.299 452.985C196.567 448.881 197 457.934 197 321.399C197 208.733 197.145 197.508 198.636 194.985C202.16 189.018 202.647 188.945 238.939 188.945C268.031 188.945 272.377 189.146 274.586 190.593C279.081 193.538 280 196.816 280 209.895C280 216.523 280.337 221.923 280.75 221.897C281.163 221.871 283.3 219.337 285.5 216.267C296.868 200.405 315.813 189.703 339 186.046C348.26 184.586 372.958 184.809 382.295 186.437ZM151.81 190.971C158.35 194.958 158 187.539 158 322.178C158 438.713 157.914 444.637 156.173 447.883C152.498 454.735 151.302 454.945 115.913 454.945C84.657 454.945 84.257 454.919 80.912 452.665C79.052 451.411 76.967 449.273 76.279 447.915C75.3 445.979 75.026 418.554 75.015 321.077L75 196.71L78.882 192.827L82.765 188.945L115.632 188.949C146.835 188.952 148.668 189.055 151.81 190.971Z"
132      />
133    </svg>
134  );
135};
136
137const HamburgerMenu = ({ open, setOpen }) => {
138  return (
139    <button
140      onClick={() => setOpen(!open)}
141      className="flex aspect-square items-center rounded-lg bg-slate-200 p-2"
142    >
143      <div className="flex w-7 cursor-pointer flex-col gap-1">
144        <div
145          className={
146            open
147              ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
148              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
149          }
150        />
151        <div
152          className={
153            open
154              ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
155              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
156          }
157        />
158        <div
159          className={
160            open
161              ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
162              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
163          }
164        />
165      </div>
166    </button>
167  );
168};
169
170const data = [
171  {
172    name: "Product",
173    link: "#",
174  },
175  {
176    name: "Solutions",
177    link: "#",
178  },
179  {
180    name: "Enterprise",
181    link: "#",
182  },
183  {
184    name: "Resources",
185    link: "#",
186  },
187  {
188    name: "Pricing",
189    link: "#",
190  },
191];
192
193const data2 = [
194  {
195    link: "#",
196    Icon: TwitterLogo,
197  },
198  {
199    link: "#",
200    Icon: FacebookLogo,
201  },
202  {
203    link: "#",
204    Icon: InstagramLogo,
205  },
206  {
207    link: "#",
208    Icon: LinkedInLogo,
209  },
210];
211
212export function Navbars5() {
213  const [open, setOpen] = useState(false);
214  return (
215    <nav className="relative z-30 mx-auto w-full bg-slate-100 p-4 lg:max-w-[1440px]">
216      <div className="flex w-full items-center justify-between gap-x-8">
217        <Link href="/">
218          <Logo className="h-6 flex-shrink-0" />
219        </Link>
220
221        <div className="flex gap-x-8">
222          <div
223            className={`${
224              open ? "" : "max-lg:hidden"
225            } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6 lg:contents`}
226          >
227            <div
228              className={`${
229                open ? "" : "hidden"
230              } absolute inset-x-0 top-full h-fit w-full bg-slate-100 p-6 max-lg:contents`}
231            >
232              <div className="flex gap-x-12 gap-y-2 max-sm:flex-col max-sm:text-center lg:gap-x-8">
233                {data.map(({ name, link }, index: number) => {
234                  return (
235                    <Link
236                      key={index}
237                      role="button"
238                      href={link}
239                      className="font-medium capitalize text-slate-900 sm:text-sm"
240                    >
241                      {name}
242                    </Link>
243                  );
244                })}
245              </div>
246            </div>
247
248            <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6 lg:gap-x-8">
249              {data2.map(({ link, Icon }, linkIndex: number) => {
250                return (
251                  <Link
252                    role="button"
253                    key={linkIndex}
254                    href={link}
255                    className="inline-flex h-fit w-fit select-none items-center justify-center text-base outline-1 outline-sky-700 duration-75 active:scale-95 disabled:pointer-events-none"
256                  >
257                    <Icon
258                      className="h-6 w-6 fill-slate-900"
259                      aria-hidden="true"
260                    />
261                    <span className="sr-only">...</span>
262                  </Link>
263                );
264              })}
265            </div>
266          </div>
267
268          <div>
269            <HamburgerMenu open={open} setOpen={setOpen} />
270          </div>
271        </div>
272      </div>
273    </nav>
274  );
275}
276

Justified with button

0import React, { useState } from "react";
1import Link from "next/link";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const HamburgerMenu = ({ open, setOpen }) => {
70  return (
71    <button
72      onClick={() => setOpen(!open)}
73      className="flex aspect-square items-center rounded-lg bg-slate-200 p-2"
74    >
75      <div className="flex w-7 cursor-pointer flex-col gap-1">
76        <div
77          className={
78            open
79              ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
80              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
81          }
82        />
83        <div
84          className={
85            open
86              ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
87              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
88          }
89        />
90        <div
91          className={
92            open
93              ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
94              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
95          }
96        />
97      </div>
98    </button>
99  );
100};
101
102const data = [
103  {
104    name: "Product",
105    link: "#",
106  },
107  {
108    name: "Solutions",
109    link: "#",
110  },
111  {
112    name: "Enterprise",
113    link: "#",
114  },
115  {
116    name: "Resources",
117    link: "#",
118  },
119  {
120    name: "Pricing",
121    link: "#",
122  },
123];
124
125export function Navbars6() {
126  const [open, setOpen] = useState(false);
127  return (
128    <nav className="relative z-30 mx-auto w-full bg-slate-100 p-4 lg:max-w-[1440px]">
129      <div className="flex w-full items-center justify-between gap-x-8">
130        <Link href="/">
131          <Logo className="h-6 flex-shrink-0" />
132        </Link>
133
134        <div
135          className={`${
136            open ? "" : "max-lg:hidden"
137          } flex h-fit w-full items-center justify-end gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6`}
138        >
139          <div className="flex gap-x-12 gap-y-2 max-sm:flex-col max-sm:text-center lg:gap-x-8">
140            {data.map(({ name, link }, index: number) => {
141              return (
142                <Link
143                  key={index}
144                  role="button"
145                  href={link}
146                  className="font-medium capitalize text-slate-900 sm:text-sm"
147                >
148                  {name}
149                </Link>
150              );
151            })}
152          </div>
153
154          <Link
155            className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium capitalize text-slate-100 duration-75 hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
156            role="button"
157            href="/pricing"
158          >
159            Pricing & FAQ
160          </Link>
161        </div>
162        <div className="lg:hidden">
163          <HamburgerMenu open={open} setOpen={setOpen} />
164        </div>
165      </div>
166    </nav>
167  );
168}
169

Centered with buttons

0import React, { useState } from "react";
1import Link from "next/link";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const HamburgerMenu = ({ open, setOpen }) => {
70  return (
71    <button
72      onClick={() => setOpen(!open)}
73      className="flex aspect-square items-center rounded-lg bg-slate-200 p-2"
74    >
75      <div className="flex w-7 cursor-pointer flex-col gap-1">
76        <div
77          className={
78            open
79              ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
80              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
81          }
82        />
83        <div
84          className={
85            open
86              ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
87              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
88          }
89        />
90        <div
91          className={
92            open
93              ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
94              : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
95          }
96        />
97      </div>
98    </button>
99  );
100};
101
102const data = [
103  {
104    name: "Product",
105    link: "#",
106  },
107  {
108    name: "Solutions",
109    link: "#",
110  },
111  {
112    name: "Enterprise",
113    link: "#",
114  },
115];
116
117export function Navbars7() {
118  const [open, setOpen] = useState(false);
119  return (
120    <nav className="relative z-30 mx-auto w-full bg-slate-100 p-4 lg:max-w-[1440px]">
121      <div className="flex w-full items-center justify-between gap-x-8">
122        <Link href="/">
123          <Logo className="h-6 flex-shrink-0" />
124        </Link>
125
126        {/* mobile nav fixes */}
127        <div
128          className={`${
129            open ? "" : "max-lg:hidden"
130          } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6 lg:contents`}
131        >
132          <div className="flex gap-x-12 gap-y-2 max-sm:flex-col max-sm:text-center lg:order-first lg:flex-1 lg:gap-x-8">
133            {data.map(({ name, link }, index: number) => {
134              return (
135                <Link
136                  key={index}
137                  role="button"
138                  href={link}
139                  className="font-medium capitalize text-slate-900 sm:text-sm"
140                >
141                  {name}
142                </Link>
143              );
144            })}
145          </div>
146
147          <div className="flex items-center gap-x-8 gap-y-4 max-sm:flex-col lg:flex-1 lg:justify-end">
148            <Link
149              role="button"
150              href="#"
151              className=" font-medium capitalize text-sky-700 sm:text-sm"
152            >
153              Sign In
154            </Link>
155            <Link
156              className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium capitalize text-slate-100 duration-75 hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
157              role="button"
158              href="#"
159            >
160              Pricing & FAQ
161            </Link>
162          </div>
163        </div>
164        <div className="lg:hidden">
165          <HamburgerMenu open={open} setOpen={setOpen} />
166        </div>
167      </div>
168    </nav>
169  );
170}
171

Centered with buttons and menu

0import Link from "next/link";
1import React, { useState } from "react";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69
70const OtherLinks = () => {
71  return (
72    <div className='gap-5 justify-self-end'>
73      <Link
74        href={"/cta"}
75        className='rounded-lg  px-6 py-3 font-medium text-slate-700 duration-150  '
76      >
77        Log In
78      </Link>
79      <Link
80        href={"/cta"}
81        className='rounded-lg bg-sky-700 px-6 py-3 font-medium text-slate-50 duration-150 hover:bg-sky-700Hover '
82      >
83        Sign Up
84      </Link>
85    </div>
86  );
87};
88
89export function Navbars8() {
90  const [open, setOpen] = useState(false);
91  return (
92    <div className='z-20 relative mx-auto grid h-auto w-full max-w-[1440px] grid-cols-2 place-items-center bg-slate-50 p-4 md:grid-cols-3'>
93      <div
94        onClick={() => setOpen(!open)}
95        className='mr-auto flex aspect-square place-items-center justify-start rounded-lg bg-slate-200 p-2'
96      >
97        <div className='flex w-7 cursor-pointer flex-col gap-1'>
98          <div
99            className={
100              open
101                ? "h-[3px] w-full translate-y-[7px] rotate-45 rounded-full bg-sky-700 duration-150"
102                : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
103            }
104          />
105          <div
106            className={
107              open
108                ? "h-[3px] w-full scale-0 rounded-full bg-sky-700 duration-150"
109                : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
110            }
111          />
112          <div
113            className={
114              open
115                ? "h-[3px] w-full -translate-y-[7px] -rotate-45 rounded-full bg-sky-700 duration-150"
116                : "h-[3px] w-full rounded-full bg-sky-700 duration-150"
117            }
118          />
119        </div>
120      </div>
121
122      <Logo className='w-[150px] justify-self-end md:justify-self-center' />
123      <div className='hidden justify-self-end lg:block'>
124        <OtherLinks />
125      </div>
126
127
128      <div
129      className={`${
130        open ? "" : "hidden"
131      } flex h-fit w-full items-center justify-between gap-x-8 gap-y-6 bg-slate-100 max-lg:absolute max-lg:inset-x-0 max-lg:top-full max-lg:flex-col max-lg:p-6 lg:contents`}
132    >
133      {/* wdawdwad */}
134
135      {/* <div className="flex flex-nowrap gap-10">
136        {data.map(({ name, link }) => {
137          return (
138            <Link className="w-fit font-medium text-slate-700" href={link}>
139              {name}
140            </Link>
141          );
142        })}
143      </div> */}
144  <div className="lg:hidden"> <OtherLinks /></div>
145    </div>
146
147
148
149
150    </div>
151  );
152}
153

Two-level With search and utilities

0import Link from "next/link";
1import React, { useState } from "react";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const SearchIcon = ({ className }) => {
70  return (
71    <svg
72      xmlns="http://www.w3.org/2000/svg"
73      viewBox="0 0 24 24"
74      className={className}
75    >
76      <path
77        fillRule="evenodd"
78        d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
79        clipRule="evenodd"
80      />
81    </svg>
82  );
83};
84
85const BellIcon = ({ className }) => {
86  return (
87    <svg
88      xmlns="http://www.w3.org/2000/svg"
89      viewBox="0 0 24 24"
90      className={className}
91    >
92      <path
93        fillRule="evenodd"
94        d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
95        clipRule="evenodd"
96      />
97    </svg>
98  );
99};
100
101const navLinks = [
102  {
103    title: "Dashboard",
104    link: "/dashboard",
105  },
106  {
107    title: "Calendar",
108    link: "/dashboard",
109  },
110  {
111    title: "Projects",
112    link: "/dashboard",
113  },
114  {
115    title: "Team",
116    link: "/dashboard",
117  },
118  {
119    title: "Projects",
120    link: "/dashboard",
121  },
122  {
123    title: "Team",
124    link: "/dashboard",
125  },
126];
127
128const OtherLinks = () => {
129  return (
130    <div className="flex flex-nowrap place-items-center gap-7">
131      <Link href={"/"}>
132        <BellIcon className={"h-6 w-6 fill-slate-700"} />
133      </Link>
134      <img
135        src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
136        className="aspect-square h-12 w-12 rounded-full object-cover"
137      />
138    </div>
139  );
140};
141
142const Links = () => {
143  return (
144    <div className="flex flex-wrap justify-center gap-x-5 pb-4 pt-2 md:justify-start">
145      {navLinks.map(({ title, link }, index: number) => {
146        return (
147          <Link
148            href={link}
149            key={index}
150            className="rounded-lg px-3 py-2 font-medium text-slate-700 duration-150 hover:bg-slate-200"
151          >
152            {title}
153          </Link>
154        );
155      })}
156    </div>
157  );
158};
159
160const SearchBar = ({ search, setSearch }) => {
161  return (
162    <div className="relative w-full place-self-center">
163      <SearchIcon
164        className={
165          "fill-gray absolute left-0 h-6 w-6 translate-x-3 translate-y-3"
166        }
167      />
168      <input
169        className="placeholder:text-gray h-full w-full rounded-lg border-2 border-slate-200 bg-slate-50 bg-transparent px-10 py-3 text-slate-700 caret-slate-700 focus:outline-none focus:ring-0"
170        placeholder="Search..."
171        value={search}
172        onChange={(e) => setSearch(e.target.value)}
173      />
174    </div>
175  );
176};
177const HamburgerMenu = ({ set, val }) => {
178  return (
179    <div
180      onClick={() => set(!val)}
181      className="flex h-min w-[50px] cursor-pointer flex-wrap gap-[6px]"
182    >
183      <div
184        className={
185          val
186            ? "h-[6px] w-full origin-center translate-y-[12px] -rotate-45 rounded-full bg-slate-200 duration-150"
187            : "h-[6px] w-full rounded-full bg-slate-200 duration-150"
188        }
189      />
190      <div
191        className={
192          val
193            ? "h-[6px] w-full scale-0 rounded-full bg-slate-200 duration-150"
194            : "h-[6px] w-full scale-100 rounded-full bg-slate-200 duration-150"
195        }
196      />
197      <div
198        className={
199          val
200            ? "h-[6px] w-full origin-center -translate-y-[12px] rotate-45 rounded-full bg-slate-200 duration-150"
201            : "h-[6px] w-full rounded-full bg-slate-200 duration-150"
202        }
203      />
204    </div>
205  );
206};
207
208export function Navbars9() {
209  const [search, setSearch] = useState("");
210  const [val, set] = useState(false);
211  return (
212    <div className="z-20 mx-auto flex w-full max-w-[1440px] flex-wrap  p-4 pb-0">
213      <div className="flex w-full flex-nowrap place-items-center justify-between border-slate-200 pb-4 sm:border-b">
214        <Logo className="w-[150px]" />
215        {/* search bar */}
216        <div className="hidden w-1/2 sm:block md:w-1/3">
217          <SearchBar search={search} setSearch={setSearch} />
218        </div>
219        <div className="h-min sm:hidden">
220          <HamburgerMenu val={val} set={set} />
221        </div>
222        {/* other links */}
223        <div className="hidden md:block">
224          <OtherLinks />
225        </div>
226      </div>
227      <div className={val ? " sm:block" : "hidden sm:block"}>
228        <Links />
229      </div>
230      <div className={val ? "block w-full py-4 sm:hidden" : "hidden"}>
231        <SearchBar search={search} setSearch={setSearch} />
232      </div>
233    </div>
234  );
235}
236

Dashboard Calendar Projects Team Projects Team

Justified with nested links

0import Link from "next/link";
1import React, { useState } from "react";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 1050 154"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M377.596 19.0674H351.906V104.784C351.906 108.706 351.325 112.007 350.165 114.688C349.004 117.369 347.304 119.41 345.063 120.811C342.862 122.171 340.161 122.852 336.959 122.852C333.918 122.852 331.277 122.251 329.036 121.051C326.835 119.81 325.094 118.05 323.814 115.769C322.573 113.448 321.913 110.667 321.833 107.425H295.962C295.922 115.589 297.662 122.372 301.184 127.774C304.705 133.136 309.467 137.138 315.47 139.779C321.513 142.38 328.235 143.681 335.639 143.681C343.962 143.681 351.265 142.1 357.548 138.939C363.831 135.777 368.733 131.275 372.254 125.433C375.816 119.59 377.596 112.707 377.596 104.784V19.0674Z"
13        fill="#0C4A6E"
14      />
15      <path
16        fillRule="evenodd"
17        clipRule="evenodd"
18        d="M416.133 138.038C422.976 141.88 431.139 143.801 440.623 143.801C448.227 143.801 454.93 142.64 460.732 140.319C466.575 137.958 471.337 134.677 475.018 130.475C478.74 126.233 481.201 121.271 482.401 115.589L458.751 114.028C457.871 116.349 456.59 118.31 454.91 119.91C453.229 121.511 451.208 122.712 448.847 123.512C446.486 124.312 443.885 124.713 441.044 124.713C436.762 124.713 433.06 123.812 429.939 122.011C426.818 120.211 424.397 117.65 422.676 114.328C420.995 111.007 420.155 107.065 420.155 102.503L482.942 102.443V95.42C482.942 87.5767 481.841 80.7337 479.64 74.8913C477.439 69.0087 474.358 64.1266 470.396 60.245C466.475 56.3633 461.873 53.4621 456.59 51.5413C451.348 49.5804 445.686 48.6 439.603 48.6C430.559 48.6 422.676 50.6009 415.953 54.6026C409.27 58.6043 404.088 64.1867 400.406 71.3497C396.725 78.5128 394.884 86.8363 394.884 96.3204C394.884 106.045 396.725 114.468 400.406 121.591C404.088 128.674 409.33 134.157 416.133 138.038ZM458.871 86.5963H420.179C420.219 83.8 421.055 80.4936 422.736 77.5324C424.417 74.5311 426.738 72.1501 429.699 70.3893C432.7 68.5886 436.142 67.6882 440.023 67.6882C443.745 67.6882 447.006 68.5085 449.807 70.1492C452.649 71.7499 454.87 73.9709 456.47 76.8121C458.071 79.6533 458.871 82.9147 458.871 86.5963Z"
19        fill="#0C4A6E"
20      />
21      <path
22        d="M548.67 49.8005V69.0087H531.322V113.668C531.322 116.029 531.682 117.87 532.403 119.19C533.123 120.471 534.123 121.371 535.404 121.891C536.725 122.412 538.245 122.672 539.966 122.672C541.166 122.672 542.367 122.572 543.567 122.372C544.768 122.131 545.688 121.951 546.329 121.831L550.35 140.859C549.07 141.26 547.269 141.72 544.948 142.24C542.627 142.8 539.806 143.14 536.484 143.26C530.322 143.501 524.919 142.68 520.277 140.799C515.676 138.919 512.094 135.997 509.533 132.036C506.972 128.074 505.711 123.072 505.751 117.029V69.0087H493.146V49.8005H505.751V27.7111H531.322V49.8005H548.67Z"
23        fill="#0C4A6E"
24      />
25      <path
26        d="M614.368 69.0087V49.8005H597.02V27.7111H571.449V49.8005H558.844V69.0087H571.449V117.029C571.409 123.072 572.67 128.074 575.231 132.036C577.792 135.997 581.374 138.919 585.976 140.799C590.618 142.68 596.02 143.501 602.182 143.26C605.504 143.14 608.325 142.8 610.646 142.24C612.967 141.72 614.768 141.26 616.048 140.859L612.027 121.831C611.386 121.951 610.466 122.131 609.266 122.372C608.065 122.572 606.865 122.672 605.664 122.672C603.943 122.672 602.423 122.412 601.102 121.891C599.822 121.371 598.821 120.471 598.101 119.19C597.38 117.87 597.02 116.029 597.02 113.668V69.0087H614.368Z"
27        fill="#0C4A6E"
28      />
29      <path
30        d="M649.213 142L624.122 49.8005H649.993L664.279 111.747H665.119L680.006 49.8005H705.397L720.523 111.387H721.303L735.349 49.8005H761.16L736.13 142H709.058L693.211 84.0152H692.071L676.224 142H649.213Z"
31        fill="#0C4A6E"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        d="M785.366 140.679C789.968 142.72 795.21 143.741 801.093 143.741C805.654 143.741 809.676 143.14 813.158 141.94C816.639 140.699 819.62 138.999 822.102 136.838C824.583 134.637 826.563 132.096 828.044 129.214H828.764V142H853.015V79.8134C853.015 74.331 851.954 69.629 849.833 65.7073C847.712 61.7456 844.811 58.5042 841.13 55.9832C837.488 53.4621 833.306 51.6013 828.584 50.4008C823.902 49.2003 819 48.6 813.878 48.6C806.515 48.6 800.032 49.7205 794.43 51.9614C788.867 54.1624 784.325 57.3237 780.804 61.4455C777.282 65.5272 774.921 70.3693 773.721 75.9717L797.371 77.8925C798.251 74.8512 800.052 72.3302 802.773 70.3293C805.494 68.2884 809.156 67.268 813.758 67.268C818.12 67.268 821.481 68.3084 823.842 70.3893C826.243 72.4702 827.444 75.4115 827.444 79.2131V79.5732C827.444 81.5341 826.703 83.0147 825.223 84.0152C823.742 85.0156 821.361 85.7759 818.08 86.2961C814.798 86.7763 810.477 87.2965 805.114 87.8568C800.552 88.297 796.19 89.0573 792.029 90.1378C787.907 91.2182 784.225 92.8189 780.984 94.9398C777.743 97.0607 775.181 99.8619 773.301 103.343C771.42 106.825 770.479 111.127 770.479 116.249C770.479 122.332 771.8 127.414 774.441 131.495C777.122 135.537 780.764 138.598 785.366 140.679ZM818.38 123.872C815.499 125.353 812.177 126.093 808.416 126.093C804.494 126.093 801.253 125.193 798.691 123.392C796.17 121.551 794.91 118.89 794.91 115.409C794.91 113.008 795.53 111.007 796.771 109.406C798.011 107.765 799.752 106.465 801.993 105.504C804.234 104.544 806.855 103.844 809.856 103.403C811.257 103.203 812.818 102.983 814.538 102.743C816.259 102.463 817.98 102.163 819.701 101.843C821.421 101.483 822.962 101.102 824.322 100.702C825.723 100.262 826.824 99.7819 827.624 99.2617V109.046C827.624 112.287 826.804 115.188 825.163 117.75C823.522 120.311 821.261 122.352 818.38 123.872Z"
37        fill="#0C4A6E"
38      />
39      <path
40        d="M955.509 49.8005L923.275 142H894.462L862.229 49.8005H889.24L908.388 115.769H909.349L928.437 49.8005H955.509Z"
41        fill="#0C4A6E"
42      />
43      <path
44        fillRule="evenodd"
45        clipRule="evenodd"
46        d="M983.15 138.038C989.993 141.88 998.157 143.801 1007.64 143.801C1015.24 143.801 1021.95 142.64 1027.75 140.319C1033.59 137.958 1038.35 134.677 1042.04 130.475C1045.76 126.233 1048.22 121.271 1049.42 115.589L1025.77 114.028C1024.89 116.349 1023.61 118.31 1021.93 119.91C1020.25 121.511 1018.23 122.712 1015.86 123.512C1013.5 124.312 1010.9 124.713 1008.06 124.713C1003.78 124.713 1000.08 123.812 996.956 122.011C993.835 120.211 991.414 117.65 989.693 114.328C988.012 111.007 987.172 107.065 987.172 102.503V102.443H1049.96V95.42C1049.96 87.5767 1048.86 80.7337 1046.66 74.8913C1044.46 69.0087 1041.38 64.1266 1037.41 60.245C1033.49 56.3633 1028.89 53.4621 1023.61 51.5413C1018.37 49.5804 1012.7 48.6 1006.62 48.6C997.576 48.6 989.693 50.6009 982.97 54.6026C976.287 58.6043 971.105 64.1867 967.424 71.3497C963.742 78.5128 961.901 86.8363 961.901 96.3204C961.901 106.045 963.742 114.468 967.424 121.591C971.105 128.674 976.347 134.157 983.15 138.038ZM987.196 86.5963C987.35 83.2855 988.203 80.2642 989.753 77.5324C991.434 74.5311 993.755 72.1501 996.716 70.3893C999.717 68.5886 1003.16 67.6882 1007.04 67.6882C1010.76 67.6882 1014.02 68.5085 1016.82 70.1492C1019.67 71.7499 1021.89 73.9709 1023.49 76.8121C1025.09 79.6533 1025.89 82.9147 1025.89 86.5963H987.196Z"
47        fill="#0C4A6E"
48      />
49      <path
50        d="M248.882 3.90138C244.111 -0.739585 232.246 0.128442 232.246 0.128442H181.581C181.581 0.128442 173.145 -0.552912 169.482 2.76946C164.737 7.07196 164.566 20.125 164.566 20.125L156.627 132.936C156.627 132.936 156.493 138.544 154.859 143.282L147.929 142.304C147.929 142.304 150.075 150.921 152.845 147.273C153.691 146.159 154.348 144.763 154.859 143.282L230.732 154C230.732 154 233.68 153.088 237.539 149.159C239.489 147.174 241.32 143.123 241.32 143.123L251.529 23.8979C251.529 23.8979 253.653 8.54234 248.882 3.90138Z"
51        fill="#0C4A6E"
52      />
53      <path
54        d="M133.228 143.562C128.043 132.072 120.632 108.078 120.329 106.56L155.233 33.8207C155.233 33.8207 157.509 24.9655 170.409 24.9655C176.451 24.9655 180.273 33.8207 180.273 33.8207C180.273 33.8207 210.624 125.536 222.386 148.306C224.076 151.578 230.732 154 230.732 154L149.921 153.999C149.921 153.999 141.314 154.144 137.022 150.52C134.461 148.358 133.228 143.562 133.228 143.562Z"
55        fill="#075985"
56      />
57      <path
58        d="M170.237 24.9655H61.3458L90.8372 140.999L97.6429 152.697C97.6429 152.697 104.947 154.261 108.23 153.962C112.564 153.566 113.145 152.697 115.791 149.535C115.791 149.535 153.223 44.5678 160.407 33.1858C162.941 29.1707 170.237 24.9655 170.237 24.9655Z"
59        fill="#0369A1"
60      />
61      <path
62        d="M3.11789 3.83726C7.88851 -0.803695 19.754 0.0643317 19.754 0.0643317H70.4194C70.4194 0.0643317 78.855 -0.617023 82.5184 2.70535C87.2625 7.00785 87.4336 20.0608 87.4336 20.0608L95.3729 132.872C95.3729 132.872 95.6046 142.533 99.1546 147.209C101.925 150.857 108.228 154 108.228 154H27.694C27.694 154 18.3198 153.024 14.4607 149.095C12.5105 147.11 10.6798 143.059 10.6798 143.059L0.471223 23.8338C0.471223 23.8338 -1.65274 8.47822 3.11789 3.83726Z"
63        fill="#0284C7"
64      />
65    </svg>
66  );
67};
68
69const ShoppingBagIcon = ({ className }) => {
70  return (
71    <svg
72      xmlns="http://www.w3.org/2000/svg"
73      viewBox="0 0 24 24"
74      className={className}
75    >
76      <path
77        fillRule="evenodd"
78        d="M7.5 6v.75H5.513c-.96 0-1.764.724-1.865 1.679l-1.263 12A1.875 1.875 0 004.25 22.5h15.5a1.875 1.875 0 001.865-2.071l-1.263-12a1.875 1.875 0 00-1.865-1.679H16.5V6a4.5 4.5 0 10-9 0zM12 3a3 3 0 00-3 3v.75h6V6a3 3 0 00-3-3zm-3 8.25a3 3 0 106 0v-.75a.75.75 0 011.5 0v.75a4.5 4.5 0 11-9 0v-.75a.75.75 0 011.5 0v.75z"
79        clipRule="evenodd"
80      />
81    </svg>
82  );
83};
84
85const navLinks = [
86  {
87    title: "Dashboard",
88    link: "/dashboard",
89  },
90  {
91    title: "Calendar",
92    link: "/dashboard",
93  },
94  {
95    title: "Projects",
96    link: "/dashboard",
97  },
98  {
99    title: "Team",
100    link: "/dashboard",
101  },
102];
103
104const Links = () => {
105  return (
106    <>
107      {navLinks.map(({ title, link }, index: number) => {
108        return (
109          <Link
110            href={link}
111            key={index}
112            className="rounded-lg px-3 py-2 font-medium text-slate-700 duration-150 hover:bg-slate-300"
113          >
114            {title}
115          </Link>
116        );
117      })}
118    </>
119  );
120};
121const HamburgerMenu = ({ set, val }) => {
122  return (
123    <div
124      onClick={() => set(!val)}
125      className="flex h-min w-[30px] cursor-pointer flex-wrap gap-[4px]"
126    >
127      <div
128        className={
129          val
130            ? "bg-gray h-[4px] w-full origin-center translate-y-[8px] -rotate-45 rounded-full duration-150"
131            : "bg-gray h-[4px] w-full rounded-full duration-150"
132        }
133      />
134      <div
135        className={
136          val
137            ? "bg-gray h-[4px] w-full scale-0 rounded-full duration-150"
138            : "bg-gray h-[4px] w-full scale-100 rounded-full duration-150"
139        }
140      />
141      <div
142        className={
143          val
144            ? "bg-gray h-[4px] w-full origin-center -translate-y-[8px] rotate-45 rounded-full duration-150"
145            : "bg-gray h-[4px] w-full rounded-full duration-150"
146        }
147      />
148    </div>
149  );
150};
151
152export function Navbars10() {
153  const [val, set] = useState(false);
154  return (
155    <div className="z-20 mx-auto flex w-full max-w-[1440px] flex-wrap justify-between gap-y-6 bg-slate-50 p-4 max-md:flex-col max-md:justify-center ">
156      <Logo className="w-[150px]" />
157      <div className="flex flex-nowrap place-items-center justify-center gap-1 rounded-lg bg-slate-200 p-2">
158        <div className="  flex flex-nowrap place-items-center gap-1">
159          <Links />
160        </div>
161        <div className="h-min p-2 lg:hidden">
162          <HamburgerMenu val={val} set={set} />
163        </div>
164        <Link
165          className="rounded-lg bg-slate-300 p-2 duration-150 hover:bg-slate-400"
166          href={"/"}
167        >
168          <ShoppingBagIcon className={"h-6 w-6 fill-slate-700"} />
169        </Link>
170      </div>
171    </div>
172  );
173}
174

Dashboard Calendar Projects Team