mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-02 12:24:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

better navbar shrinking behavior

Browse Source
This commit is contained in:
lynx
2024-09-04 02:07:37 -05:00
parent 11e54b0525
commit 63b210559b
2 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/landing/src/components/cta-primary-button.tsx
View File

@@ -4,7 +4,11 @@ import Link from 'next/link';
import { ReactNode, useId } from 'react';
import { Platform } from '~/utils/current-platform';
type CtaButtonProps = { iconComponent?: Icon; glow?: 'lg' | 'sm' | 'none' } & (
type CtaButtonProps = {
iconComponent?: Icon;
glow?: 'lg' | 'sm' | 'none';
shrinksOnSmallScreen?: boolean;
} & (
| {
href: string;
children: ReactNode;
@@ -17,6 +21,7 @@ type CtaButtonProps = { iconComponent?: Icon; glow?: 'lg' | 'sm' | 'none' } & (
export function CtaPrimaryButton({
iconComponent: Icon = ArrowCircleDown,
glow = 'lg',
shrinksOnSmallScreen = false,
...props
}: CtaButtonProps) {
const href =
@@ -30,7 +35,17 @@ export function CtaPrimaryButton({
: props.platform?.name
: undefined;
const children =
'children' in props ? props.children : `Download for ${platformName ?? 'Linux'}`;
'children' in props ? (
props.children
) : (
<>
Download
<span className={shrinksOnSmallScreen ? 'max-xl:hidden' : undefined}>
{' '}
for {platformName ?? 'Linux'}
</span>
</>
);
const id = useId();
@@ -38,9 +53,11 @@ export function CtaPrimaryButton({
<Link
href={href}
className={clsx(
'noise with-rounded-2px-border-images inline-flex w-52 cursor-pointer flex-row items-center justify-center gap-x-2 overflow-hidden rounded-xl px-3 py-2',
'noise with-rounded-2px-border-images inline-flex cursor-pointer flex-row items-center justify-center gap-x-2 overflow-hidden rounded-xl py-2 pe-4 ps-3',
'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%)]',
{
'xl:w-52': shrinksOnSmallScreen,
'w-52': !shrinksOnSmallScreen,
'shadow-[0_0px_2.5rem_hsl(207_100%_65%/50%)]': glow === 'lg',
'shadow-[0_0.125rem_1.25rem_hsl(207_50%_65%/50%)]': glow === 'sm'
}

17
apps/landing/src/components/global-nav-bar/index.tsx
View File

@@ -34,9 +34,8 @@ export function NavBar() {
<>
{/* Main Navbar */}
<motion.nav
// eslint-disable-next-line tailwindcss/no-contradicting-classname
className={clsx(
'fixed inset-x-0 top-0 z-[110] mx-auto mt-2 w-[calc(100%-2rem)] sm:px-0 md:max-w-[1440px]',
'fixed inset-x-0 top-0 z-[110] mx-auto mt-3 w-[calc(100%-2rem)] max-w-screen-xl sm:px-0',
'overflow-hidden rounded-xl bg-gradient-to-b from-[#141419] from-60% to-[#2886D5]/10 shadow-[0px_-10px_20px_0px_rgba(40,134,213,0.05)] backdrop-blur backdrop-saturate-[1.8]'
)}
style={{
@@ -50,7 +49,7 @@ export function NavBar() {
<div className="absolute top-0 h-px w-full bg-gradient-to-r from-transparent via-[#2D2D37]/80 to-transparent" />
<div className="absolute bottom-0 h-px w-full bg-gradient-to-r from-transparent via-[#2D2D37]/80 to-transparent" />
{/* End of Gradient Borders */}
<div className="noise noise-faded noise-sm flex flex-wrap items-center justify-between gap-x-8 overflow-hidden px-6 py-3">
<div className="noise noise-faded noise-sm flex flex-nowrap items-center justify-between gap-x-8 overflow-hidden px-6 py-3">
{/* Spacedrive Logo and Links */}
<div className="flex items-center gap-[1.125rem]">
<Link href="/">
@@ -63,7 +62,7 @@ export function NavBar() {
/>
</Link>
<div className="hidden items-center whitespace-nowrap xl:flex">
<div className="hidden items-center whitespace-nowrap lg:flex">
{NAVIGATION_ITEMS.map(({ label, href, adornment }) => (
<NavLink key={`nav-main-${label}-${href}`} href={href}>
{label}{' '}
@@ -78,12 +77,16 @@ export function NavBar() {
</div>
{/* Download Button */}
<div className="hidden items-center gap-[20px] xl:flex">
<CtaPrimaryButton platform={currentPlatform} glow={'sm'} />
<div className="hidden items-center gap-[20px] lg:flex">
<CtaPrimaryButton
shrinksOnSmallScreen
platform={currentPlatform}
glow={'sm'}
/>
</div>
{/* List Icon */}
<div className="flex items-center gap-[20px] xl:hidden">
<div className="flex items-center gap-[20px] lg:hidden">
<motion.button
className="block"
onClick={() => setIsMenuOpen(!isMenuOpen)}