fixed mobile menu design
This commit is contained in:
Steven Sarmiento
GitHub
parent
1615a48b65
commit
c31ca8b1bb
|
|
@ -426,7 +426,7 @@ const NavBarBeta = () => {
|
|||
!mobileMenuVisible && 'hidden'
|
||||
} absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-10`}
|
||||
>
|
||||
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-th-bkg-3 divide-y-2 divide-gray-50">
|
||||
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-th-bkg-3 divide-y-2 divide-gray-700">
|
||||
<div className="pt-5 pb-6 px-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
|
|
@ -575,29 +575,96 @@ const NavBarBeta = () => {
|
|||
href="#"
|
||||
className="text-base font-medium text-white hover:bg-th-bkg-4"
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 28 28"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.78874 23C5.55374 23 2.53817 22.0591 0 20.4356C2.15499 20.5751 5.95807 20.2411 8.32358 17.9848C4.76508 17.8215 3.16026 15.0923 2.95094 13.926C3.25329 14.0426 4.6953 14.1826 5.50934 13.856C1.4159 12.8296 0.787928 9.23732 0.927477 8.14097C1.695 8.67749 2.99745 8.8641 3.50913 8.81744C-0.305207 6.08823 1.06703 1.98276 1.74151 1.09635C4.47882 4.88867 8.5812 7.01857 13.6564 7.13704C13.5607 6.71736 13.5102 6.28042 13.5102 5.83164C13.5102 2.61092 16.1134 0 19.3247 0C21.0025 0 22.5144 0.712754 23.5757 1.85284C24.6969 1.59011 26.3843 0.975068 27.2092 0.443205C26.7934 1.93611 25.4989 3.18149 24.7159 3.64308C24.7224 3.65878 24.7095 3.62731 24.7159 3.64308C25.4037 3.53904 27.2648 3.18137 28 2.68256C27.6364 3.52125 26.264 4.91573 25.1377 5.69642C25.3473 14.9381 18.2765 23 8.78874 23Z"
|
||||
fill="#4F4C67"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mx-4 -mt-1">
|
||||
Twitter
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="text-base font-medium text-white hover:bg-th-bkg-4"
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<svg
|
||||
width="18"
|
||||
height="14"
|
||||
viewBox="0 0 18 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7 0.804233C5.9428 0.289057 4.75516 0 3.5 0C2.24484 0 1.0572 0.289057 0 0.804233V10.8042C1.0572 10.2891 2.24484 10 3.5 10C5.1686 10 6.71789 10.5108 8 11.3847C9.28211 10.5108 10.8314 10 12.5 10C13.7552 10 14.9428 10.2891 16 10.8042V0.804233C14.9428 0.289057 13.7552 0 12.5 0C11.2448 0 10.0572 0.289057 9 0.804233V8C9 8.55228 8.55229 9 8 9C7.44772 9 7 8.55229 7 8V0.804233Z"
|
||||
fill="#4F4C67"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mx-3 -mt-1">
|
||||
Explore the docs
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="text-base font-medium text-white hover:bg-th-bkg-4"
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 28 28"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z"
|
||||
fill="#4F4C67"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mx-4 -mt-1">
|
||||
Discord
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="text-base font-medium text-white hover:bg-th-bkg-4"
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<svg
|
||||
width="14"
|
||||
height="18"
|
||||
viewBox="0 0 14 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M5 0C4.44772 0 4 0.447715 4 1C4 1.55228 4.44772 2 5 2H7C7.55228 2 8 1.55228 8 1C8 0.447715 7.55228 0 7 0H5Z"
|
||||
fill="#4F4C67"
|
||||
/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3C0 1.89543 0.895431 1 2 1C2 2.65685 3.34315 4 5 4H7C8.65685 4 10 2.65685 10 1C11.1046 1 12 1.89543 12 3V14C12 15.1046 11.1046 16 10 16H2C0.895431 16 0 15.1046 0 14V3ZM3 7C2.44772 7 2 7.44772 2 8C2 8.55229 2.44772 9 3 9H3.01C3.56228 9 4.01 8.55229 4.01 8C4.01 7.44772 3.56228 7 3.01 7H3ZM6 7C5.44772 7 5 7.44772 5 8C5 8.55229 5.44772 9 6 9H9C9.55228 9 10 8.55229 10 8C10 7.44772 9.55228 7 9 7H6ZM3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H3.01C3.56228 13 4.01 12.5523 4.01 12C4.01 11.4477 3.56228 11 3.01 11H3ZM6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H9C9.55228 13 10 12.5523 10 12C10 11.4477 9.55228 11 9 11H6Z"
|
||||
fill="#4F4C67"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mx-4 -mt-1">
|
||||
Mango Guides
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue