Skip to content

Commit

Permalink
feat(website): Unfix sandwich menu and restyle banner to full-width b…
Browse files Browse the repository at this point in the history
…ut make closeable (#2065)

* Unfix sandwich menu

* update

* update

* add close button and make more yellow

* cleanup comments
  • Loading branch information
theosanderson authored Jun 7, 2024
1 parent b753e78 commit ff54827
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 27 deletions.
20 changes: 10 additions & 10 deletions website/src/components/Navigation/Navigation.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const isLoggedIn = Astro.locals.session?.isLoggedIn ?? false;
const loginUrl = await getAuthUrl(Astro.url.toString());
---

<div class='flex justify-end'>
<div class='flex justify-end relative'>
<div class='subtitle hidden sm:flex sm:z-6 gap-4'>
{
navigationItems
Expand All @@ -27,14 +27,14 @@ const loginUrl = await getAuthUrl(Astro.url.toString());
}
</div>

<div class='sm:hidden fixed z-0'>
<SandwichMenu
top={16}
right={28}
organism={selectedOrganism}
isLoggedIn={isLoggedIn}
loginUrl={loginUrl}
client:load
/>
<div
class='sm:hidden z-0'
style={{
position: 'absolute',
right: '1.5rem',
top: '-2rem',
}}
>
<SandwichMenu organism={selectedOrganism} isLoggedIn={isLoggedIn} loginUrl={loginUrl} client:load />
</div>
</div>
26 changes: 14 additions & 12 deletions website/src/components/Navigation/SandwichMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,35 @@ import { OffCanvasOverlay } from '../OffCanvasOverlay';
import { SandwichIcon } from '../SandwichIcon';

type SandwichMenuProps = {
top: number;
right: number;
organism: Organism | undefined;
isLoggedIn: boolean;
loginUrl: string | undefined;
};

export const SandwichMenu: FC<SandwichMenuProps> = ({ top, right, organism, isLoggedIn, loginUrl }) => {
export const SandwichMenu: FC<SandwichMenuProps> = ({ organism, isLoggedIn, loginUrl }) => {
const { isOpen, toggle: toggleMenu, close: closeMenu } = useOffCanvas();

return (
<div className='relative'>
<button
className='fixed z-50 bg-transparent border-none cursor-pointer'
onClick={toggleMenu}
style={{ top: `${top}px`, right: `${right}px` }}
>
<SandwichIcon isOpen={isOpen} />
</button>

{isOpen && <OffCanvasOverlay onClick={closeMenu} />}
{!isOpen ? (
<button className='absolute z-50 bg-transparent border-none cursor-pointer' onClick={toggleMenu}>
<SandwichIcon isOpen={isOpen} />
</button>
) : (
<OffCanvasOverlay onClick={closeMenu} />
)}

<div
className={`fixed top-0 right-0 bg-white w-64 min-h-screen flex flex-col offCanvasTransform ${
isOpen ? 'translate-x-0' : 'translate-x-full'
}`}
>
<button
className='absolute z-50 bg-transparent border-none cursor-pointer right-3 top-4'
onClick={toggleMenu}
>
<SandwichIcon isOpen={isOpen} />
</button>
<div className='font-bold p-5 flex flex-col justify-between min-h-screen max-h-screen overflow-y-auto'>
<div>
<div className='h-10'>
Expand Down
37 changes: 33 additions & 4 deletions website/src/components/common/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,45 @@ import React from 'react';

interface BannerProps {
message?: string;
lastTimeBannerWasClosed: number | undefined;
serverTime: number;
}

export const Banner: React.FC<BannerProps> = ({ message }) => {
if (message === undefined) {
export const Banner: React.FC<BannerProps> = ({ message, lastTimeBannerWasClosed, serverTime }) => {
const timeToKeepBannerClosed = 1000 * 60 * 60 * 24 * 365;

if (
message === undefined ||
(lastTimeBannerWasClosed !== undefined && lastTimeBannerWasClosed + timeToKeepBannerClosed > serverTime)
) {
return null;
}
const initialClientTime = Date.now();
const serverClientOffset = serverTime - initialClientTime;

const setBannerClosed = () => {
document.cookie = `lastTimeBannerWasClosed=${Date.now() + serverClientOffset}; max-age=${60 * 60 * 24 * 365}`;
window.location.reload();
};

return (
<div className='absolute top-0 right-0 m-1 bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-1.5 rounded-md opacity-70'>
<p className='text-xs font-medium'>{message}</p>
<div className=' bg-yellow-100 border-b border-gray-400 text-yellow-700 px-4 py-1 opacity-50 flex justify-between'>
<p
style={{
fontSize: '.7rem',
}}
>
{message}
</p>
<button
onClick={setBannerClosed}
className='text-yellow-700'
style={{
fontSize: '.7rem',
}}
>
X
</button>
</div>
);
};
11 changes: 10 additions & 1 deletion website/src/layouts/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ interface Props {
const { title, implicitOrganism, noHorizontalPadding } = Astro.props;
const backendIsInDebugMode = await BackendClient.create().isInDebugMode();
const lastTimeBannerWasClosed = Astro.cookies.get('lastTimeBannerWasClosed')?.value;
---

<html lang='en'>
Expand All @@ -36,7 +38,14 @@ const backendIsInDebugMode = await BackendClient.create().isInDebugMode();
</head>
<body>
{backendIsInDebugMode && <div class='bg-red-500 text-white text-center p-2'>Backend is in debug mode</div>}
<Banner message={bannerMessage} />
<Banner
message={bannerMessage}
lastTimeBannerWasClosed={lastTimeBannerWasClosed !== undefined
? parseInt(lastTimeBannerWasClosed, 10)
: undefined}
serverTime={Date.now()}
client:load
/>
<div class='flex flex-col min-h-screen w-11/12 mx-auto'>
<ToastContainer client:load />
<header class='bg-white h-fit'>
Expand Down

0 comments on commit ff54827

Please sign in to comment.