- implementing hobby, language and reference sections

- dynamic template selection

src/components/builder/left/LeftNavbar.js

@@ -16,7 +16,7 @@ const LeftNavbar = () => (
 
     <div className="grid grid-cols-1 gap-8">
       {sections.map((x) => (
-        <SectionIcon key={x.id} section={x} />
+        <SectionIcon key={x.id} section={x} containerId="LeftSidebar" />
       ))}
     </div>
 

src/components/builder/left/LeftSidebar.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import { Element } from 'react-scroll';
 import sections from '../../../data/leftSections';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
@@ -7,12 +8,12 @@ const LeftSidebar = () => (
   <div className="flex">
     <LeftNavbar />
 
-    <div className={styles.container}>
+    <div id="LeftSidebar" className={styles.container}>
       {sections.map(({ id, name, event, component: Component }) => (
-        <Fragment key={id}>
+        <Element key={id} name={id}>
           <Component id={id} name={name} event={event} />
           <hr />
-        </Fragment>
+        </Element>
       ))}
     </div>
   </div>