diff options
author | 2021-07-30 22:39:15 -0700 | |
---|---|---|
committer | 2021-07-30 22:39:15 -0700 | |
commit | 7c744961494ca80f82b3ad66c98ff0a1c0496db7 (patch) | |
tree | 6f0ed586edd85076b2660b3b00c0fbb91f470449 /docs/src/components/Header/SidebarToggle.tsx | |
parent | d0b8485ddfd8dca1376ea0d417ce37282d092cd9 (diff) | |
download | astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.tar.gz astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.tar.zst astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.zip |
Docs site cleanup (#948)
* add language selector
* docs site cleanup
* review feedback
* code review comments
Diffstat (limited to 'docs/src/components/Header/SidebarToggle.tsx')
-rw-r--r-- | docs/src/components/Header/SidebarToggle.tsx | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/docs/src/components/Header/SidebarToggle.tsx b/docs/src/components/Header/SidebarToggle.tsx new file mode 100644 index 000000000..605581077 --- /dev/null +++ b/docs/src/components/Header/SidebarToggle.tsx @@ -0,0 +1,44 @@ +import type { FunctionalComponent } from 'preact'; +import { h, Fragment } from 'preact'; +import { useState, useEffect } from 'preact/hooks'; + +const MenuToggle: FunctionalComponent = () => { + const [sidebarShown, setSidebarShown] = useState(false); + + useEffect(() => { + const body = document.getElementsByTagName('body')[0]; + if (sidebarShown) { + body.classList.add('mobile-sidebar-toggle'); + } else { + body.classList.remove('mobile-sidebar-toggle'); + } + }, [sidebarShown]); + + return ( + <button + type="button" + aria-pressed={sidebarShown ? 'true' : 'false'} + id="menu-toggle" + onClick={() => setSidebarShown(!sidebarShown)} + > + <svg + xmlns="http://www.w3.org/2000/svg" + width="1em" + height="1em" + fill="none" + viewBox="0 0 24 24" + stroke="currentColor" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + d="M4 6h16M4 12h16M4 18h16" + /> + </svg> + <span className="sr-only">Toggle sidebar</span> + </button> + ); +}; + +export default MenuToggle; |