adding example for solid

website/docs/examples/frameworks.mdx

@@ -5,6 +5,11 @@ sidebar_position: 1
 # Frameworks
 
 import reactLogo from '/img/reactLogo.png';
+import vueLogo from '/img/vueLogo.png';
+import svelteLogo from '/img/svelteLogo.png';
+import angularLogo from '/img/angularLogo.png';
+import solidLogo from '/img/solidLogo.png';
+import vanillaJSLogo from '/img/vanillaJSLogo.png';
 
 <img src={reactLogo} width="30" style={{float: 'left', marginRight: '10px', marginTop: '22px'}} />
 
@@ -14,8 +19,6 @@ Make sure to use the `active-table-react` package and define the element tag as
 
 [Click for Live Example](https://codesandbox.io/s/active-table-react-cstm7k?file=/src/App.tsx)
 
-import vueLogo from '/img/vueLogo.png';
-
 <img src={vueLogo} width="28" style={{float: 'left', marginRight: '10px', marginTop: '27px'}} />
 
 ## Vue
@@ -26,8 +29,6 @@ the simple steps outlined [here](https://vuejs.org/guide/extras/web-components.h
 [Click for Live Example - Vue 3](https://codesandbox.io/s/active-table-vue3-z729vs?file=/src/App.vue) <br />
 [Click for Live Example - Vue 2](https://codesandbox.io/s/active-table-vue2-32f04e?file=/src/App.vue)
 
-import svelteLogo from '/img/svelteLogo.png';
-
 <img src={svelteLogo} width="23" style={{float: 'left', marginRight: '13px', marginTop: '25px'}} />
 
 ## Svelte
@@ -36,8 +37,6 @@ Everything should be working right out of the box!
 
 [Click for Live Example](https://codesandbox.io/s/active-table-svelte-dbd0qp)
 
-import angularLogo from '/img/angularLogo.png';
-
 <img src={angularLogo} width="36" style={{float: 'left', marginRight: '9px', marginTop: '22px'}} />
 
 ## Angular
@@ -47,7 +46,13 @@ as `import 'active-table';`. See this [blog](https://www.thisdot.co/blog/how-to-
 
 [Click for Live Example](https://codesandbox.io/s/active-table-angular-9v8nfe?file=/src/app/app.component.html)
 
-import vanillaJSLogo from '/img/vanillaJSLogo.png';
+<img src={solidLogo} width="28" style={{float: 'left', marginRight: '12px', marginTop: '25px'}} />
+
+## Solid
+
+Make sure to declare a `solid-js` module when working with TypeScript and use hyphen-case syntax for properties that are accessed directly through markup.
+
+[Click for Live Example](https://codesandbox.io/p/sandbox/magical-smoke-1ntsqs?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A41%2C%22endLineNumber%22%3A16%2C%22startColumn%22%3A41%2C%22startLineNumber%22%3A16%7D%5D)
 
 <img src={vanillaJSLogo} width="28" style={{float: 'left', marginRight: '12px', marginTop: '25px'}} />
 

website/src/components/nav/autoNavToggle.js

@@ -24,6 +24,7 @@ export function readdAutoNavShadowToggle() {
 export function fadeIn() {
   setTimeout(() => {
     const element = document.querySelectorAll('.plugin-pages > body > #__docusaurus > nav')?.[0];
+    // WORK
     try {
       element.classList.add('fade-in');
     } catch (e) {