redirect to manage tab from context menu

src/library/ContextMenu/Wrappers.ts

@@ -26,7 +26,7 @@ export const ListWrapper = styled.ul`
   list-style: none;
   display: flex;
   flex-direction: column;
-  padding: 0 0.35rem 0.35rem 0.35rem;
+  padding: 0.2rem 0.35rem 0.2rem 0.35rem;
   margin: 0;
   width: 100%;
 

src/library/Page/provider/index.tsx

@@ -7,6 +7,9 @@ import type { SectionContextInterface, SectionContextProps } from './types';
 import * as local from './Local';
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { useTabs } from 'contexts/Tabs';
+import { extractUrlValue, removeVarFromUrlHash } from '@w3ux/utils';
+import { useLocation } from 'react-router-dom';
+import { useMenu } from 'contexts/Menu';
 
 export const SectionContext = createContext<SectionContextInterface>(
   defaultSectionContext
@@ -15,6 +18,8 @@ export const SectionContext = createContext<SectionContextInterface>(
 export const useSection = () => useContext(SectionContext);
 
 export const SectionProvider = ({ pageId, children }: SectionContextProps) => {
+  const { open: menuOpen } = useMenu();
+  const { hash } = useLocation();
   const { activeTabId } = useTabs();
 
   // The active section of the page.
@@ -31,11 +36,21 @@ export const SectionProvider = ({ pageId, children }: SectionContextProps) => {
   };
 
   // Updates active section when active tab changes.
+  const redirectHash = extractUrlValue('redirect');
+
   useEffectIgnoreInitial(() => {
-    setActiveSection(
-      local.getActiveSection(pageId, activeTabId) || defaultActiveSection
-    );
-  }, [pageId, activeTabId]);
+    if (redirectHash === 'manage-tab') {
+      if (!menuOpen) {
+        console.log(redirectHash, hash);
+        setActiveSection(1, false);
+        removeVarFromUrlHash('redirect');
+      }
+    } else {
+      setActiveSection(
+        local.getActiveSection(pageId, activeTabId) || defaultActiveSection
+      );
+    }
+  }, [pageId, activeTabId, menuOpen]);
 
   return (
     <SectionContext.Provider

src/library/Tabs/Tab.tsx

@@ -8,7 +8,7 @@ import { useTabs } from 'contexts/Tabs';
 import { useMenu } from 'contexts/Menu';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { Menu } from './Menu';
+import { TabMenu } from './TabMenu';
 import type { TabProps } from './types';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -18,6 +18,7 @@ import {
 } from 'contexts/Tabs/defaults';
 import { useApi } from 'contexts/Api';
 import { ConnectionIcon } from './ConectionIcon';
+import { useNavigate } from 'react-router-dom';
 
 export const Tab = ({ index, id, name, initial = false }: TabProps) => {
   const {
@@ -33,8 +34,9 @@ export const Tab = ({ index, id, name, initial = false }: TabProps) => {
     setActiveTabIndex,
     addInstantiatedId,
   } = useTabs();
-  const { openMenu } = useMenu();
+  const navigate = useNavigate();
   const { getApiStatus } = useApi();
+  const { openMenu, closeMenu } = useMenu();
 
   const {
     listeners,
@@ -84,7 +86,17 @@ export const Tab = ({ index, id, name, initial = false }: TabProps) => {
   // Handle context menu when tab is right clicked.
   const handleTabContextMenu = (ev: MouseEvent): void => {
     ev.preventDefault();
-    openMenu(ev, <Menu />);
+    openMenu(
+      ev,
+      <TabMenu
+        tabId={id}
+        onSettings={() => {
+          setActiveTabId(id);
+          navigate(`?redirect=manage-tab`);
+          closeMenu();
+        }}
+      />
+    );
   };
 
   // Context menu ref.

src/library/Tabs/TabMenu.tsx

@@ -0,0 +1,28 @@
+import { faBarsProgress } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ListWrapper, SelectListWrapper } from 'library/ContextMenu/Wrappers';
+
+export const TabMenu = ({
+  // tabId,
+  onSettings,
+}: {
+  tabId: number;
+  onSettings: () => void;
+}) => (
+  <SelectListWrapper>
+    <ListWrapper>
+      <li>
+        <button onClick={() => onSettings()}></button>
+        <div className="inner">
+          <div className="none"></div>
+          <div>
+            <h3>Manage Tab</h3>
+          </div>
+          <div>
+            <FontAwesomeIcon icon={faBarsProgress} transform="shrink-2" />
+          </div>
+        </div>
+      </li>
+    </ListWrapper>
+  </SelectListWrapper>
+);