actualNoteContentPart: # Adding the sidebar component to your HTML
  To implement the sidebar component, it must be a child of a div that allows it to enact its position: sticky CSS property. On GitClear we structure the sidebar as follows:
  
  ```
  <!-- HTML --><div class="content_page_container amplenote_content_plus_sidebar">  <div class="amplenote_side">    <div class="amplenote-embed" data-note-token="#{ @content_page.amplenote_public_token }" data-styles="/assets/amplenote/help_style.css">      - frame_src = "https://public.amplenote.com/embed/#{ @content_page.amplenote_public_token }?hostname=www.gitclear.com&styles=%2Fassets%2Famplenote%2Fhelp_style.css"      <iframe frameborder=0 src="#{ frame_src.html_safe }"></iframe>      <script defer src="https://public.amplenote.com/embed.js"></script>    <div data-react-class="AmplenoteSidebarToc" data-react-props="#{ JSON.stringify({ title: @content_page.title }) }"></div>  </div></div>
  ```
  
  Note how the React component (the div with data-react-class="AmplenoteSidebarToc" that is mounted as a React component on page load) is a sibling of the div that holds the Amplenote content embed. 
  
  Finally, a tablespoon of CSS to ensure that the sticky-positioned React component stays visible & anchored atop page:
  ```
  // SCSS.amplenote_content_plus_sidebar {  align-items: flex-start;  display: flex;   .amplenote_side {    flex: 1;    padding-left: 5px;  }}
  ```
  
  Upon mounting the React component, you should get all the bells & whistles of an auto-scrolling sidebar table of contents.
processedNoteContent: ---
  title: Amplenote: Embeddable Sidebar Table of Contents...
  headers: # Adding the sidebar component to your HTML
  ---
  Adding the sidebar component to your HTML
  To implement the sidebar component, it must be a child of a div that allows it to enact its position: sticky CSS property. On GitClear we structure the sidebar as follows: <!-- HTML --><div class="content_page_container amplenote_content_plus_sidebar">  <div class="amplenote_side">    <div class="amplenote-embed" data-note-token="#{ @content_page.amplenote_public_token }" data-styles="/assets/amplenote/help_style.css">      - frame_src = "https://public.amplenote.com/embed/#{ @content_page.amplenote_public_token }?hostname=www.gitclear.com&styles=%2Fassets%2Famplenote%2Fhelp_style.css"      <iframe frameborder=0 src="#{ frame_src.html_safe }"></iframe>      <script defer src="https://public.amplenote.com/embed.js"></script>    <div data-react-class="AmplenoteSidebarToc" data-react-props="#{ JSON.stringify({ title: @content_page.title }) }"></div>  </div></div>
  Note how the React component (the div with data-react-class="AmplenoteSidebarToc" that is mounted as a React component on page load) is a sibling of the div that holds the Amplenote content embed. Finally, a tablespoon of CSS to ensure that the sticky-positioned React component stays visible & anchored atop page: // SCSS.amplenote_content_plus_sidebar {  align-items: flex-start;  display: flex;   .amplenote_side {    flex: 1;    padding-left: 5px;  }}
  Upon mounting the React component, you should get all the bells & whistles of an auto-scrolling sidebar table of contents.
noteTitle: Amplenote: Embeddable Sidebar Table of Contents React Component HTML, Javascript & CSS