can manage course navigation from settinss

src/app/course/[courseName]/settings/canvasNavigation.tsx/NavTabListItem.tsx

@@ -0,0 +1,46 @@
+import { Spinner } from "@/components/Spinner";
+import { useUpdateCanvasTabMutation } from "@/hooks/canvas/canvasNavigationHooks";
+import { CanvasCourseTab } from "@/services/canvas/canvasNavigationService";
+import React, { FC } from "react";
+
+export const NavTabListItem: FC<{
+  tab: CanvasCourseTab;
+  idx: number;
+  onDragStart: () => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: () => void;
+}> = ({ tab, idx, onDragStart, onDragOver, onDrop }) => {
+  const updateTab = useUpdateCanvasTabMutation();
+  const handleToggleVisibility = () => {
+    updateTab.mutate({
+      tabId: tab.id,
+      hidden: !tab.hidden,
+      position: tab.position,
+    });
+  };
+  return (
+    <li
+      key={tab.id}
+      className={`flex items-center justify-between mb-2 p-1 px-4 rounded bg-slate-800 ${
+        tab.hidden ? "opacity-50" : ""
+      }`}
+      draggable
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
+      <span className="flex-1 cursor-move">{tab.label}</span>
+      {updateTab.isPending && <Spinner />}
+      <span className="text-xs text-slate-400 mr-2">{tab.type}</span>
+      <button
+        className={` py-1 rounded unstyled w-20 ${
+          tab.hidden ? "bg-slate-600" : "bg-blue-900/50"
+        }`}
+        onClick={handleToggleVisibility}
+        disabled={updateTab.isPending}
+      >
+        {tab.hidden ? "Show" : "Hide"}
+      </button>
+    </li>
+  );
+};