refactor: extract navigation elements

2026-09-08 07:49:12 +00:00 · 2025-06-22 11:34:00 +02:00
parent 7fdda1c969
commit 269091986a
26 changed files with 421 additions and 356 deletions
@@ -0,0 +1,38 @@
+import { IoLockClosedOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+import { useViewportSize } from '@mantine/hooks';
+
+import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
+
+export default function EditorNavigation() {
+  const { width } = useViewportSize();
+  const navigate = useNavigate();
+
+  if (width > 1440) {
+    return (
+      <NavigationMenuItem active={location.pathname === '/editor'} onClick={() => navigate('/editor')}>
+        <IoLockClosedOutline />
+        Editor
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <>
+      <NavigationMenuItem active={location.pathname === '/timercontrol'} onClick={() => navigate('/timercontrol')}>
+        <IoLockClosedOutline />
+        Timer Controls
+      </NavigationMenuItem>
+
+      <NavigationMenuItem active={location.pathname === '/messagecontrol'} onClick={() => navigate('/messagecontrol')}>
+        <IoLockClosedOutline />
+        Message Controls
+      </NavigationMenuItem>
+
+      <NavigationMenuItem active={location.pathname === '/rundown'} onClick={() => navigate('/rundown')}>
+        <IoLockClosedOutline />
+        Rundown
+      </NavigationMenuItem>
+    </>
+  );
+}