[TOOL-3095] Portal: Enable Table of contents in Nebula pages, Adjust TOC component (#5965)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on refining the `Layout` component's structure and updating the styling for the `TOCLink` component to enhance the user interface.

### Detailed summary
- In `Layout`, the `DocLayout` component now wraps `props.children` directly without unnecessary line breaks.
- In `TOCLink`, the `data-active` class styling was changed from `text-accent-500` to `text-f-100` for active links.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/portal/src/app/nebula/layout.tsx

@@ -4,11 +4,7 @@ import { sidebar } from "./sidebar";
 
 export default async function Layout(props: { children: React.ReactNode }) {
   return (
-    <DocLayout
-      sideBar={sidebar}
-      editPageButton={true}
-      showTableOfContents={false}
-    >
+    <DocLayout sideBar={sidebar} editPageButton={true}>
       {props.children}
     </DocLayout>
   );

apps/portal/src/components/others/TableOfContents.tsx

@@ -60,6 +60,8 @@ export function TableOfContentsSideBar(props: {
       return;
     }
 
+    setHideNav(false);
+
     // when heading's intersection changes, update corresponding link's data-active attribute to true/false
     const observer = new IntersectionObserver(
       (entries) => {
@@ -175,7 +177,7 @@ function TOCLink(props: {
   return (
     <Link
       className={cn(
-        "block overflow-hidden text-ellipsis font-medium text-f-300 transition-colors hover:text-f-100 data-[active='true']:text-accent-500",
+        "block overflow-hidden text-ellipsis font-medium text-f-300 transition-colors hover:text-f-100 data-[active='true']:text-f-100",
         props.linkClassName,
       )}
       href={props.href}