Repository: nodejs/nodejs.dev (ts)

Issue:
Mark section title in learn as completed 
### Enter your suggestions in details:

If all the items under a section are read, mark the **section title as read** with a checkmark

![image](https://user-images.githubusercontent.com/42532987/208164742-2f16458d-cd5a-4635-a834-8f752532756a.png)




Pull request:
feat(Learn): mark learn section title as read
<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/main/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) before opening a pull request.
-->

## Description

<!-- Write a brief description of the changes introduced by this PR -->
Marked learn section title as read with a checkmark if all subsections are read.

[Screencast.webm](https://user-images.githubusercontent.com/42532987/208301529-fa9e3b8b-d02b-4ad1-8d65-cdc6eabf116b.webm)




## Related Issues
Resolves #3097 
<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

### Check List

<!--
ATTENTION
Please follow this check list to ensure that you've followed all items before opening this PR
-->

- [x] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
- [x] I have run `npm run lint:js -- --fix` and/or `npm run lint:md -- --fix` for my JavaScript and/or Markdown changes.
  - This is important as most of the cases your code changes might not be correctly linted
- [ ] I have run `npm run test` to check if all tests are passing, and/or `npm run test -- -u` to update snapshots if I created and/or updated React Components.
- [ ] I have checked that the build works locally and that `npm run build` work fine.
- [ ] I've covered new added functionality with unit tests if necessary.


Patch:
diff --git a/src/navigations/learn.module.scss b/src/navigations/learn.module.scss
index bcfda969..fec0ddae 100644
--- a/src/navigations/learn.module.scss
+++ b/src/navigations/learn.module.scss
@@ -17,6 +17,15 @@
     height: 14px;
     padding: 0 var(--space-24) 0 0;
   }
+
+  &--done::before {
+    content: $checkSvg;
+  }
+
+  &--done::before,
+  &--done:hover::before {
+    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
+  }
 }
 
 .item {
diff --git a/src/navigations/learn.tsx b/src/navigations/learn.tsx
index 52e51104..8afc6d5a 100644
--- a/src/navigations/learn.tsx
+++ b/src/navigations/learn.tsx
@@ -14,13 +14,16 @@ const LearnNavigationSection = ({
   section,
   children,
   currentSlug,
+  isAllRead,
 }: React.PropsWithChildren<NavigationSectionData>) => {
   const { isSectionOpen, toggleSection } = useNavigationSection({
     section,
     currentSlug,
   });
 
-  const titleClassNames = classnames('t-body2', styles.title);
+  const titleClassNames = classnames('t-body2', styles.title, {
+    [styles.titleDone]: isAllRead,
+  });
 
   const sectionTitle = (
     <button
@@ -67,6 +70,7 @@ const LearnNavigation = ({ sections, currentSlug }: Props) => {
       title={key}
       section={data}
       currentSlug={currentSlug}
+      isAllRead={data.every(({ slug }) => isRead(slug))}
     >
       {data.map(item => (
         <NavigationComponents.NavigationItem
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
index 75df27be..c28386b0 100644
--- a/src/types/navigation.ts
+++ b/src/types/navigation.ts
@@ -2,6 +2,7 @@ export interface NavigationSectionData {
   title: string;
   section: NavigationItemData[];
   currentSlug: string;
+  isAllRead?: boolean;
 }
 
 export interface NavigationItemData {


Test patch:
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
index 96043a78..762d71a7 100644
--- a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -263,7 +263,7 @@ exports[`Learn Template renders correctly 1`] = `
         >
           <button
             aria-expanded="false"
-            class="t-body2 title"
+            class="t-body2 title titleDone"
             type="button"
           >
             <span>
@@ -311,7 +311,7 @@ exports[`Learn Template renders correctly 1`] = `
         >
           <button
             aria-expanded="false"
-            class="t-body2 title"
+            class="t-body2 title titleDone"
             type="button"
           >
             <span>