Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: changelog navbar made consistent with other sentry pages #9841

Merged
merged 3 commits into from
May 7, 2024
Merged

feat: changelog navbar made consistent with other sentry pages #9841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a11f28e
changelog navbar made consistent with other sentry pages
Shubhdeep12 Apr 27, 2024
07074fc
Update src/constants.ts
HazAT May 7, 2024
276eed9
Merge branch 'master' into feat/changelog-navbar
HazAT May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
116 changes: 114 additions & 2 deletions app/changelog/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
}

.hero-bottom-left-down-slope {
clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%)
clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
}

.footer-top-right-down-slope {
Expand All @@ -47,6 +47,118 @@
}
}

.btn {
align-items: center;
border: 0.125rem solid transparent;
border-radius: 0.5rem;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
gap: 0.25rem;
height: 2.5rem;
justify-content: center;
line-height: 1rem;
outline: 0;
padding: 0.75rem 1rem;
position: relative;
text-align: center;
text-rendering: optimizeLegibility;
text-transform: uppercase;
user-select: none;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;

@apply text-primary;
}

.solid-btn {
background: linear-gradient(
120deg,
#c83852,
#b44092 25%,
#6a5fc1 50%,
#452650 55%,
#452650
);
background-position: 98% 0;
background-size: 250% 100%;
border-color: transparent;
border-radius: 0.5rem;
box-shadow: none;
outline: 0 solid #6a5fc1;
outline-offset: 0.125rem;
transition:
background-position 0.2s,
outline-width 0.2s;
}

.solid-btn:hover {
background-position: 2% 0;
}

.solid-btn:focus {
background: #6a5fc1;
outline-width: 0.125rem;
}

.outline-btn {
background: linear-gradient(
120deg,
#fa7faa,
#ff9691 25%,
#ffb287 50%,
transparent 55%,
transparent
);
background-clip: padding-box;
background-position: 98% 0;
background-size: 250% 100%;
border: none;
box-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0 solid #fa7faa;
outline-offset: 0.125rem;
position: relative;
transition:
background-position 0.2s,
outline-width 0.2s;
z-index: 0;
}

.outline-btn:before {
background: linear-gradient(11deg, #c83852, #b44092 50%, #6a5fc1);
border-radius: 0.5rem;
content: '';
inset: 0;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 0.125rem;
position: absolute;
transition: opacity 0.2s;
z-index: -1;
}

.outline-btn:hover {
background-position: 2% 0;
}

.outline-btn:hover:before {
opacity: 0;
}

.outline-btn:focus {
background: #ffa269;
outline-width: 0.125rem;
}

.try-sentry-footer-wrapper {
background: url('/changelog/assets/squiggle.png') 0px 0px / 300px 300px, linear-gradient(315deg, rgb(24, 13, 28) 0.57%, rgb(69, 38, 80) 100%) 0% 0% / cover;;
}
}
2 changes: 1 addition & 1 deletion app/changelog/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function Header({loading}) {
</h2>
</div>
</div>
<div className="hero-bottom-left-down-slope absolute bottom-0 w-full h-10 bg-gray-200" />
<div className="hero-bottom-left-down-slope absolute -bottom-0.5 w-full h-10 bg-gray-200 border-none" />
</div>
);
}
196 changes: 165 additions & 31 deletions src/components/changelog/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,177 @@
'use client';
import {useEffect, useRef, useState} from 'react';
import Image from 'next/image';
import Link from 'next/link';

import {NAV_ITEMS} from 'sentry-docs/constants';
import Chevron from 'sentry-docs/icons/Chevron';
import SentryWordmarkSVG from 'sentry-docs/logos/sentry-wordmark-dark.svg';

import {Button} from './ui/Button';

export function Navbar() {
const [activeNavItem, setActiveNavItem] = useState<string | null>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const dropdownRef = useRef<any>(null);

function handleLogoClick(e) {
e.preventDefault();
if (e?.type === 'click') {
window.location.href = 'https://sentry.io/welcome';
} else if (e?.type === 'contextmenu') {
window.location.href = 'https://sentry.io/branding';
}
}

function handleShowMenu() {
setActiveNavItem(null);
setIsMenuVisible(prev => !prev);
}

function handleShowActiveNavItem(e) {
if (dropdownRef.current && !dropdownRef.current?.contains(e.target)) {
setActiveNavItem(null);
}
}
useEffect(() => {
document.addEventListener('mousedown', handleShowActiveNavItem);

return () => {
document.removeEventListener('mousedown', handleShowActiveNavItem);
};
}, []);

return (
<header className="bg-white py-2 sticky top-0 w-full h-16 z-50">
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center text-primary">
<a
href="/changelog"
title="Sentry error monitoring"
className="flex flex-shrink-0 items-center"
>
<Image src={SentryWordmarkSVG} alt="Sentry's logo" width={150} />
</a>
<div className="flex space-x-4 hidden md:block">
<Link
className="hover:bg-gray-100 rounded-md px-3 py-2 text-sm font-medium uppercase"
href="/changelog"
<header className="bg-white sticky top-0 w-full z-50 py-4">
<div className="lg:max-w-6xl md:max-w-3xl max-w-xl mx-auto px-8 sm:px-6 lg:px-8">
<nav className="flex justify-between items-center text-primary flex-wrap">
<div
title="Sentry error monitoring"
className="flex flex-shrink-0 flex-1 items-center mr-auto"
>
Changelog
</Link>

<Link
className="hover:bg-gray-100 rounded-md px-3 py-2 text-sm font-medium uppercase"
href="https://docs.sentry.io/"
<a href="#">
<Image
src={SentryWordmarkSVG}
alt="Sentry's logo"
onClick={handleLogoClick}
onContextMenu={handleLogoClick}
width={150}
/>
</a>
</div>
<Button
onClick={handleShowMenu}
className="!bg-gray-200 !hover:bg-gray-200 lg:hidden flex"
>
Documentation
</Link>

<Link
className="hover:bg-gray-100 rounded-md px-3 py-2 text-sm font-medium uppercase"
href="https://sentry.io/signup/"
<span>Menu</span>{' '}
<Chevron
width={14}
height={14}
direction={isMenuVisible ? 'down' : 'right'}
/>
</Button>
<ul
className={`${isMenuVisible ? 'flex' : 'lg:flex hidden'} lg:items-center lg:flex-row flex-col basis-full lg:basis-0`}
>
Get started
</Link>
</div>
</nav>
<div className="hero-top-left-down-slope absolute -bottom-[39] w-full h-10 bg-white" />
{NAV_ITEMS.map(
({
id,
type = 'button',
to,
target,
variant = 'ghost',
title,
className,
children = [],
withArrowBtn = false,
}) => (
<li key={id} className="lg:ml-2 relative pt-4 lg:pt-0">
<Button
as={type}
variant={variant}
target={target}
href={to || ''}
className="w-full !justify-start"
onClick={e => {
e.stopPropagation();
if (children && children.length) {
setActiveNavItem(prev => {
if (prev === id) {
return null;
}
return id;
});
}
}}
>
<span className={className}>{title}</span>
{((children && children.length) || withArrowBtn) && (
<Chevron direction={activeNavItem === id ? 'down' : 'right'} />
)}
</Button>
{activeNavItem && activeNavItem === id && (
<div
id={id}
ref={dropdownRef}
className="bg-white z-20 w-auto py-4 lg:px-5 lg:-mx-4 lg:absolute realtive lg:-left-2/4 lg:top-12 lg:rounded-2xl lg:shadow-sm "
>
<div className="max-w-6xl w-full">
<div className="flex gap-6 lg:gap-0 lg:flex-row flex-col ">
{children.map(navSubItem => (
<div
key={navSubItem.id}
className={`${navSubItem.title ? 'p-4' : 'lg:px-4'} lg:w-[${(1 / children.length) * 100}%]`}
>
{navSubItem.title && (
<h3 className="mb-2 pl-4 text-base font-medium">
{navSubItem.title}
</h3>
)}
<ul
className={`${navSubItem.title ? 'lg:gap-0 grid sm:grid-cols-1 md:grid-cols-2 lg:flex lg:flex-col' : 'gap-2 flex flex-col'}`}
>
{navSubItem.children?.map(navSubSubItem => (
<li key={navSubSubItem.id}>
<Button
as="a"
href={navSubSubItem.to}
variant={navSubSubItem.variant}
>
<span
className={`h-4 leading-4 ${navSubSubItem.withArrowBtn ? 'text-black' : 'text-lightPurple'}`}
>
{navSubSubItem.title}
</span>
{navSubSubItem.withArrowBtn && (
<Chevron direction="right" />
)}
</Button>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</div>
)}
</li>
)
)}

<li className="lg:pl-2 lg:ml-2 pt-4 lg:pt-0">
<Button
as="a"
href="https://sentry.io/signup/"
variant="solid"
className="w-full"
>
<span className="text-white h-4 leading-4">Get Started</span>
</Button>
</li>
</ul>
</nav>
</div>
<div className="hero-top-left-down-slope absolute -bottom-[39px] w-full h-10 bg-white" />
</header>
);
}
17 changes: 10 additions & 7 deletions src/components/changelog/ui/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link, {LinkProps} from 'next/link';
type CommonProps = {
as?: 'button' | 'a';
size?: 'sm' | 'default' | 'md' | 'lg' | 'xl';
variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'solid';
};

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & CommonProps;
Expand All @@ -15,16 +15,19 @@ type Props = ButtonProps | AnchorProps;
export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
({as = 'button', variant = 'primary', size = 'default', className, ...props}, ref) => {
const variants = {
primary: 'text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-300',
primary: 'btn text-white bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-300',
secondary:
'text-gray-700 border hover:border-indigo-600 disabled:border-indigo-300 disabled:text-gray-300',
'btn text-gray-700 border hover:border-indigo-600 disabled:border-indigo-300 disabled:text-gray-300',
danger: 'text-white bg-red-600 hover:bg-red-700 disabled:bg-red-300',
ghost: 'text-indigo-600 hover:bg-indigo-100 disabled:bg-indigo-100',
ghost:
'btn focus:outline focus:outline-2 focus:outline-offset-2 hover:bg-gray-100 !outline-lightPurple',
outline: 'btn outline-btn',
solid: 'btn solid-btn',
};

const sizes = {
sm: 'px-1.5 py-1.5 text-sm',
default: 'px-4 py-2',
default: 'px-4 py-2 text-sm font-medium',
md: 'px-5 py-3',
lg: 'px-6 py-3.5',
xl: 'px-7 py-4',
Expand All @@ -35,7 +38,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
<Link
className={`${variants[variant]} ${
sizes[size]
} duration-150 rounded-lg active:shadow-lg disabled:cursor-not-allowed inline-flex items-center ${
} duration-150 transition-all disabled:cursor-not-allowed inline-flex items-center ${
className ?? ''
}`}
{...(props as AnchorProps)}
Expand All @@ -48,7 +51,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
<button
className={`${variants[variant]} ${
sizes[size]
} duration-150 rounded-lg active:shadow-lg disabled:cursor-not-allowed inline-flex items-center ${
} duration-150 transition-all disabled:cursor-not-allowed inline-flex items-center ${
className ?? ''
}`}
{...(props as ButtonProps)}
Expand Down