Skip to content

Commit

Permalink
💄 Sticky TopBar
Browse files Browse the repository at this point in the history
closes #359
  • Loading branch information
phlmn committed Jun 12, 2024
1 parent 8729087 commit 8248698
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 2 deletions.
25 changes: 24 additions & 1 deletion frontend/src/common/top_bar.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import clsx from 'clsx';
import { useLocation } from 'wouter';

import { storeAuthToken } from '../api';
import { logout } from '../api/user';
import { primitiveWithClassname } from '../styled';
Expand All @@ -8,7 +10,28 @@ import { Popup } from '../components/popup';
import { showModal } from '../components/modal';
import { ChangePasswordModal } from '../components/change_password';
import { useAuthData } from '../utils/auth';
export const TopBar = primitiveWithClassname('div', 'mb-8 flex items-center gap-4 justify-between');

const TopBarBg = primitiveWithClassname(
'div',
'fixed left-0 right-0 top-0 bg-black h-[52px] -z-10 bg-white dark:bg-neutral-900',
);

export function TopBar({ children, className }: { children: React.ReactNode; className?: string }) {
return (
<div
className={clsx(
'sticky top-0 z-10',
'-mx-6 px-6 -mt-6 mb-6 py-2',
'flex items-center gap-4 justify-between',
'bg-white dark:bg-neutral-900',
className,
)}
>
<TopBarBg />
{children}
</div>
);
}
export const TopBarTitle = primitiveWithClassname('h2', 'text-xl font-bold');
export const TopBarPart = primitiveWithClassname('div', 'gap-4 flex items-center');

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export function DocumentPage({
<Helmet>
<title>{data?.name}</title>
</Helmet>
<TopBar className="!items-start z-40 relative">
<TopBar className="!items-start z-40">
<TopBarPart className={isLoggedIn ? 'sticky left-4 -ml-12 !items-start' : ''}>
{isLoggedIn && (
<IconButton
Expand Down

0 comments on commit 8248698

Please sign in to comment.