fix hidden nav

This commit is contained in:
ameer2468
2024-09-10 13:08:09 +03:00
parent 568b4438e1
commit 47e71011a9
2 changed files with 11 additions and 5 deletions

View File

@@ -1,7 +1,7 @@
import { ArrowCircleDown, Icon } from '@phosphor-icons/react';
import clsx from 'clsx';
import Link from 'next/link';
import { ReactNode, useId } from 'react';
import { ComponentProps, ReactNode, useId } from 'react';
import { Platform } from '~/utils/current-platform';
type CtaButtonProps = {
@@ -16,7 +16,8 @@ type CtaButtonProps = {
| {
platform: Platform | null;
}
);
) &
ComponentProps<'button'>;
export function CtaPrimaryButton({
iconComponent: Icon = ArrowCircleDown,
@@ -53,6 +54,7 @@ export function CtaPrimaryButton({
<Link
href={href}
className={clsx(
props.className,
'noise with-rounded-2px-border-images inline-flex flex-row items-center justify-center gap-x-2 overflow-hidden rounded-xl py-2 pe-4 ps-3 transition-all hover:brightness-110',
'bg-gradient-to-b from-[#42B2FD] to-[#0078F0] [--border-image:linear-gradient(to_bottom,hsl(200_100%_77%/100%),hsl(200_0%_100%/5%)75%)]',
{

View File

@@ -129,7 +129,7 @@ export function NavBar() {
animate={{ x: 0 }}
exit={{ x: '-100%' }}
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
className="fixed left-0 top-0 z-[120] h-full w-64 bg-[#141419] p-4 shadow-lg"
className="fixed left-0 top-0 z-[120] h-full w-72 overflow-auto bg-[#141419] p-4 shadow-lg"
>
{/* Close Button */}
<div className="flex justify-end">
@@ -143,7 +143,7 @@ export function NavBar() {
</div>
{/* Nav Links */}
<div className="flex flex-col items-start p-4 space-y-4">
<div className="flex flex-col items-start p-4 space-y-2">
{NAVIGATION_ITEMS.map(({ label, href, adornment }) => (
<NavLink key={`nav-sub-${label}-${href}`} href={href}>
{label}{' '}
@@ -154,7 +154,11 @@ export function NavBar() {
)}
</NavLink>
))}
<CtaPrimaryButton glow={'sm'} platform={currentPlatform} />
<CtaPrimaryButton
className="relative top-2"
glow={'sm'}
platform={currentPlatform}
/>
</div>
</motion.div>
</>