💄 Sticky TopBar

closes #359
bugbakery · May 3, 2024 · f167f07 · f167f07
1 parent f1c16dd
commit f167f07
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/frontend/src/common/top_bar.tsx b/frontend/src/common/top_bar.tsx
@@ -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';
@@ -8,7 +10,16 @@ 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');
+
+export const TopBar = primitiveWithClassname(
+  'div',
+  clsx(
+    'sticky top-0 z-10',
+    '-mx-6 px-6 -mt-2 mb-6 py-2',
+    'flex items-center gap-4 justify-between',
+    'bg-white dark:bg-neutral-900',
+  ),
+);
 export const TopBarTitle = primitiveWithClassname('h2', 'text-xl font-bold');
 export const TopBarPart = primitiveWithClassname('div', 'gap-4 flex items-center');