docs: 📝 update docs

packages/docs/src/components/core/ToggleMenu.tsx

@@ -0,0 +1,38 @@
+import { component$, useStore } from '@builder.io/qwik'
+
+import { IconMenu } from '~/components/icons/IconMenu'
+
+interface ItemProps {
+    iconClass?: string
+}
+
+export default component$((props: ItemProps) => {
+    const { iconClass } = props
+
+    const store = useStore({
+        isExpanded: false,
+    })
+
+    return (
+        <button
+            type="button"
+            class={`ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition ${
+                store.isExpanded ? 'expanded' : ''
+            }`}
+            aria-label="Toggle Menu"
+            data-aw-toggle-menu={true}
+            onClick$={() => {
+                store.isExpanded = store.isExpanded ? false : true
+
+                // TODO:
+                document.body.classList.toggle('overflow-hidden')
+                document.getElementById('header')?.classList.toggle('h-screen')
+                document
+                    .querySelector('#header nav')
+                    ?.classList.toggle('hidden')
+            }}
+        >
+            <IconMenu class={iconClass} />
+        </button>
+    )
+})