Merge pull request #194 from ethereum/docs-section-open-close-logic

Fix logic for which docs sections are open

docs/getting-started/index.md

@@ -7,7 +7,7 @@ This page explains how to set up Geth and execute some basic tasks using the com
 
 Geth also needs to be connected to a [consensus client](docs/getting-started/consensus-clients) in order to function as an Ethereum node. The tutorial on this page assumes Geth and a consensus client have been installed successfully and that a firewall has been configured to block external traffic to the JSON-RPC port `8545` see [Security](/docs/fundamentals/security).
 
-This page provides step-by-step instructions covering the fundamentals of using Geth. This includes generating accounts, joining an Ethereum network, syncing the blockchain and sending ether between accounts. This tutorial uses [Clef](/docs/tools/Clef/Tutorial). Clef is an account management tool external to Geth itself that allows users to sign transactions. It is developed and maintained by the Geth team.
+This page provides step-by-step instructions covering the fundamentals of using Geth. This includes generating accounts, joining an Ethereum network, syncing the blockchain and sending ether between accounts. This tutorial uses [Clef](/docs/tools/clef/tutorial). Clef is an account management tool external to Geth itself that allows users to sign transactions. It is developed and maintained by the Geth team.
 
 ## Prerequisites {#prerequisites}
 
@@ -431,4 +431,4 @@ This requires approval in Clef. Once the password for the sender account has bee
 
 ## Summary {#summary}
 
-This tutorial has demonstrated how to generate accounts using Clef, fund them with testnet ether and use those accounts to interact with Ethereum (Sepolia) through a Geth node. Checking account balances, sending transactions and retrieving transaction details were explained using the web3.js library via the Geth console and using the JSON-RPC directly using Curl. For more detailed information about Clef, please see [the Clef docs](/docs/tools/Clef/Tutorial).
+This tutorial has demonstrated how to generate accounts using Clef, fund them with testnet ether and use those accounts to interact with Ethereum (Sepolia) through a Geth node. Checking account balances, sending transactions and retrieving transaction details were explained using the web3.js library via the Geth console and using the JSON-RPC directly using Curl. For more detailed information about Clef, please see [the Clef docs](/docs/tools/clef/tutorial).

docs/interacting-with-geth/rpc/ns-personal-deprecation.md

@@ -3,7 +3,7 @@ title: Personal namespace deprecation notes
 description: Alternatives to the methods in the deprecated personal namespace
 ---
 
-The JSON-RPC API's `personal` namespace has historically been used to manage accounts and sign transactions and data over RPC. However, it is being deprecated in favour of using [Clef](/docs/tools/clef/Introduction) as an external signer and account manager. One of the major changes is moving away from indiscriminate locking and unlocking of accounts and instead using Clef to explicitly approve or deny specific actions. This page shows the suggested replacement for each method in `personal`.
+The JSON-RPC API's `personal` namespace has historically been used to manage accounts and sign transactions and data over RPC. However, it is being deprecated in favour of using [Clef](/docs/tools/clef/introduction) as an external signer and account manager. One of the major changes is moving away from indiscriminate locking and unlocking of accounts and instead using Clef to explicitly approve or deny specific actions. This page shows the suggested replacement for each method in `personal`.
 
 ## Methods without replacements
 

docs/interacting-with-geth/rpc/ns-personal.md

@@ -5,7 +5,7 @@ description: Documentation for the JSON-RPC API "personal" namespace
 
 <Note>The personal namespace will be deprecated in the very near future.</Note>
 
-The personal API managed private keys in the key store. It is deprecated in favour of using [Clef](/docs/tools/clef/Introduction) for interacting with accounts Please refer to the [ns_personal deprecation page](/docs/interacting-with-geth/rpc/ns-personal-deprecation) to see the equivalent methods. The following documentation should be treated as archive information and users should migrate tousing Clef for account interactions.
+The personal API managed private keys in the key store. It is deprecated in favour of using [Clef](/docs/tools/clef/introduction) for interacting with accounts Please refer to the [ns_personal deprecation page](/docs/interacting-with-geth/rpc/ns-personal-deprecation) to see the equivalent methods. The following documentation should be treated as archive information and users should migrate tousing Clef for account interactions.
 
 ## personal_deriveAccount {#personal-deriveaccount}
 

docs/tools/clef/clique-signing.md

@@ -11,7 +11,7 @@ Clef provides a way to safely circumvent `--unlock` while maintaining a enough a
 
 ## Prerequisites {#prerequisites}
 
-It is useful to have basic knowledge of private networks and Clef. These topics are covered on our [private networks](/docs/developers/geth-developer/private-network) and [Introduction to Clef](/docs/tools/Clef/introduction) pages.
+It is useful to have basic knowledge of private networks and Clef. These topics are covered on our [private networks](/docs/developers/geth-developer/private-network) and [Introduction to Clef](/docs/tools/clef/introduction) pages.
 
 ## Prepping a Clique network {#prepping-clique-network}
 

docs/tools/clef/introduction.md

@@ -76,7 +76,7 @@ The general flow for a basic transaction-signing operation using Clef and an Eth
 
 In the case illustrated in the schematic above, Geth would be started with `--signer <addr>:<port>` and would relay requests to `eth.sendTransaction`. Text in `mono` font positioned along arrows shows the objects passed between each component.
 
-Most users use Clef by manually approving transactions through the UI as in the schematic above, but it is also possible to configure Clef to sign transactions without always prompting the user. This requires defining the precise conditions under which a transaction will be signed. These conditions are known as `Rules` and they are small Javascript snippets that are _attested_ by the user by injecting the snippet's hash into Clef's secure whitelist. Clef is then started with the rule file, so that requests that satisfy the conditions in the whitelisted rule files are automatically signed. This is covered in detail on the [Rules page](/docs/tools/Clef/rules).
+Most users use Clef by manually approving transactions through the UI as in the schematic above, but it is also possible to configure Clef to sign transactions without always prompting the user. This requires defining the precise conditions under which a transaction will be signed. These conditions are known as `Rules` and they are small Javascript snippets that are _attested_ by the user by injecting the snippet's hash into Clef's secure whitelist. Clef is then started with the rule file, so that requests that satisfy the conditions in the whitelisted rule files are automatically signed. This is covered in detail on the [Rules page](/docs/tools/clef/rules).
 
 ## Basic usage {#basic-usage}
 
@@ -107,7 +107,7 @@ Enter 'ok' to proceed:
 
 Requests requiring account access or signing now require explicit consent in this terminal. Activities such as sending transactions via a local Geth node's attached Javascript console or RPC will now hang indefinitely, awaiting approval in this terminal.
 
-A much more detailed Clef tutorial is available on the [Tutorial page](/docs/tools/Clef/tutorial).
+A much more detailed Clef tutorial is available on the [Tutorial page](/docs/tools/clef/tutorial).
 
 ## Command line options {#command-line-options}
 

docs/tools/clef/tutorial.md

@@ -573,5 +573,5 @@ Ultimately, the goal is to deprecate Geth's account management tools completely
 
 ## Summary {#summary}
 
-This page includes step-by-step instructions for basic and intermediate uses of Clef, including using it as a standalone app and a backend signer for Geth. Further information is available on our other Clef pages, including [Introduction](/docs/clef/introduction), [Setup](/docs/tools/clef/setup),
+This page includes step-by-step instructions for basic and intermediate uses of Clef, including using it as a standalone app and a backend signer for Geth. Further information is available on our other Clef pages, including [Introduction](/docs/tools/clef/introduction), [Setup](/docs/tools/clef/setup),
 [Rules](/docs/tools/clef/rules), [Communication Datatypes](/docs/clef/datatypes) and [Communication APIs](/docs/tools/clef/apis). Also see the [Clef GitHub](https://github.com/ethereum/go-ethereum/tree/master/cmd/clef) for further reading.

src/components/UI/docs/Breadcrumbs.tsx

@@ -11,7 +11,7 @@ export const Breadcrumbs: FC = () => {
 
   return (
     <>
-      {router.asPath !== '/docs' && pathSplit.length > 1? (
+      {router.asPath !== '/docs' && pathSplit.length > 1 ? (
         <Breadcrumb>
           {pathSplit.map((path: string, idx: number) => {
             return (

src/components/UI/docs/DocsLinks.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import {
   Accordion,
   AccordionButton,
@@ -24,16 +24,37 @@ interface Props {
 }
 
 export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
-  const { asPath, query: { slug } }  = useRouter();
+  const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({});
+  const {
+    asPath,
+    query: { slug }
+  } = useRouter();
+
+  useEffect(() => {
+    setOpenSections(
+      navLinks.reduce(
+        (acc, navLink) => ({
+          ...acc,
+          [navLink.id]: checkNavLinks({ items: navLink.items, pathCheck: asPath })
+        }),
+        {}
+      )
+    );
+  }, [asPath, navLinks]);
+
+  const handleSectionToggle = (id: string): void => {
+    setOpenSections(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
   return (
     <Stack border='2px' borderColor='primary'>
       {navLinks.map(({ id, to, items }, idx) => {
         const split = to?.split('/');
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
-        const isSectionActive = checkNavLinks({ to, items, pathCheck: asPath.split('#')[0] })
+        const index = openSections[id] ? 0 : -1;
 
         return (
-          <Accordion key={id} defaultIndex={isSectionActive ? 0 : -1} allowToggle mt='0 !important'>
+          <Accordion key={id} index={index} allowToggle mt='0 !important'>
             <AccordionItem border='none'>
               {({ isExpanded }) => (
                 <>
@@ -45,6 +66,7 @@ export const DocsLinks: FC<Props> = ({ navLinks, toggleMobileAccordion }) => {
                     placeContent='flex-end'
                     bg='button-bg'
                     data-group
+                    onClick={() => handleSectionToggle(id)}
                   >
                     <Stack
                       p={4}

src/theme/search.css

@@ -149,7 +149,7 @@ svg[aria-label='Algolia'] * {
   .DocSearch-Button-Container {
     flex-direction: row-reverse;
   }
-    
+
   .DocSearch-Button {
     padding: 2rem 1rem;
     width: 100%;