
@@ -60,7 +66,10 @@ export default function AuthLayout({ children }: AuthLayoutProps) {
{t('auth.brandFooter')}
-
+
{children}
diff --git a/frontend/src/components/items/Header.tsx b/frontend/src/components/items/Header.tsx
index ee8cf71..2c4c198 100644
--- a/frontend/src/components/items/Header.tsx
+++ b/frontend/src/components/items/Header.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/context/AuthContext';
import { useSearch } from '@/context/SearchContext';
+import { useWindowDrag } from '@/hooks/useWindowDrag';
export default function Header() {
const { t } = useTranslation();
@@ -12,6 +13,7 @@ export default function Header() {
const { query, setQuery, clear } = useSearch();
const navigate = useNavigate();
const [menuOpen, setMenuOpen] = useState(false);
+ const { cursorClass, dragHandlers } = useWindowDrag();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -31,7 +33,10 @@ export default function Header() {
};
return (
-
+
{/* Central Search Drive Input (Only visible when logged in) */}
{session ? (
diff --git a/frontend/src/hooks/useWindowDrag.ts b/frontend/src/hooks/useWindowDrag.ts
new file mode 100644
index 0000000..553d0d5
--- /dev/null
+++ b/frontend/src/hooks/useWindowDrag.ts
@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export function useWindowDrag() {
+ const [dragging, setDragging] = useState(false);
+
+ const stopDragging = useCallback(() => setDragging(false), []);
+
+ useEffect(() => {
+ window.addEventListener('mouseup', stopDragging);
+ window.addEventListener('blur', stopDragging);
+ return () => {
+ window.removeEventListener('mouseup', stopDragging);
+ window.removeEventListener('blur', stopDragging);
+ };
+ }, [stopDragging]);
+
+ const dragHandlers = {
+ onMouseDown: useCallback(() => setDragging(true), []),
+ onMouseUp: stopDragging,
+ onMouseLeave: stopDragging,
+ };
+
+ return {
+ dragging,
+ cursorClass: dragging ? 'cursor-grabbing' : '',
+ dragHandlers,
+ };
+}