From f1782619da07fffdc31551c5441d3d50a3d1b721 Mon Sep 17 00:00:00 2001
From: Philipp Mandler <info@philipp-mandler.com>
Date: Fri, 3 May 2024 14:42:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Sticky=20TopBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes #359
---
 frontend/src/common/top_bar.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/common/top_bar.tsx b/frontend/src/common/top_bar.tsx
index 0458f33e..b1cd7cd2 100644
--- 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');