mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 21:58:37 +00:00
docs: mobile nav
This commit is contained in:
Felix Roos
parent
dcb145635c
commit
232a04a1a2
34
website/package-lock.json
generated
34
website/package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@docsearch/css": "^3.1.0",
|
||||
"@docsearch/react": "^3.1.0",
|
||||
"@headlessui/react": "^1.7.7",
|
||||
"@heroicons/react": "^2.0.13",
|
||||
"@supabase/supabase-js": "^1.35.3",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
@ -793,6 +794,21 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@headlessui/react": {
|
||||
"version": "1.7.7",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz",
|
||||
"integrity": "sha512-BqDOd/tB9u2tA0T3Z0fn18ktw+KbVwMnkxxsGPIH2hzssrQhKB5n/6StZOyvLYP/FsYtvuXfi9I0YowKPv2c1w==",
|
||||
"dependencies": {
|
||||
"client-only": "^0.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16 || ^17 || ^18",
|
||||
"react-dom": "^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/@heroicons/react": {
|
||||
"version": "2.0.13",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz",
|
||||
@ -2010,6 +2026,11 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/client-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
|
||||
},
|
||||
"node_modules/clone": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
||||
@ -8063,6 +8084,14 @@
|
||||
"integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
|
||||
"optional": true
|
||||
},
|
||||
"@headlessui/react": {
|
||||
"version": "1.7.7",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz",
|
||||
"integrity": "sha512-BqDOd/tB9u2tA0T3Z0fn18ktw+KbVwMnkxxsGPIH2hzssrQhKB5n/6StZOyvLYP/FsYtvuXfi9I0YowKPv2c1w==",
|
||||
"requires": {
|
||||
"client-only": "^0.0.1"
|
||||
}
|
||||
},
|
||||
"@heroicons/react": {
|
||||
"version": "2.0.13",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz",
|
||||
@ -8984,6 +9013,11 @@
|
||||
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
|
||||
"integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw=="
|
||||
},
|
||||
"client-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
|
||||
},
|
||||
"clone": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
||||
|
||||
@ -19,21 +19,22 @@
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@docsearch/css": "^3.1.0",
|
||||
"@docsearch/react": "^3.1.0",
|
||||
"@headlessui/react": "^1.7.7",
|
||||
"@heroicons/react": "^2.0.13",
|
||||
"@supabase/supabase-js": "^1.35.3",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
"@types/node": "^18.0.0",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"astro": "^1.7.2",
|
||||
"nanoid": "^4.0.0",
|
||||
"preact": "^10.7.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"@heroicons/react": "^2.0.13",
|
||||
"@supabase/supabase-js": "^1.35.3",
|
||||
"nanoid": "^4.0.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"remark-toc": "^8.0.1"
|
||||
"remark-toc": "^8.0.1",
|
||||
"tailwindcss": "^3.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"html-escaper": "^3.0.3"
|
||||
|
||||
@ -6,6 +6,8 @@ import SidebarToggle from './SidebarToggle';
|
||||
// import LanguageSelect from './LanguageSelect';
|
||||
import Search from './Search';
|
||||
import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
|
||||
import MobileNav from '../../docs/MobileNav';
|
||||
import { SIDEBAR } from '../../config';
|
||||
|
||||
type Props = {
|
||||
currentPage: string;
|
||||
@ -13,9 +15,11 @@ type Props = {
|
||||
|
||||
const { currentPage } = Astro.props as Props;
|
||||
// const lang = getLanguageFromURL(currentPage);
|
||||
const langCode = 'en'; // getLanguageFromURL(currentPage);
|
||||
const sidebar = SIDEBAR[langCode];
|
||||
---
|
||||
|
||||
<nav class="flex justify-between py-2 px-4 items-center h-25 bg-[#161616]" title="Top Navigation">
|
||||
<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-[#161616]" title="Top Navigation">
|
||||
<!-- <div class="menu-toggle">
|
||||
<SidebarToggle client:idle />
|
||||
</div> -->
|
||||
@ -34,9 +38,12 @@ const { currentPage } = Astro.props as Props;
|
||||
<div class="search-item h-10">
|
||||
<!-- <Search client:idle /> -->
|
||||
</div>
|
||||
<a href=".." class="cursor-pointer items-center flex space-x-1"
|
||||
<a href=".." class="hidden md:flex cursor-pointer items-center space-x-1"
|
||||
><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
|
||||
</a>
|
||||
<div class="md:hidden">
|
||||
<MobileNav sidebar={sidebar} client:idle />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
|
||||
54
website/src/docs/MobileNav.jsx
Normal file
54
website/src/docs/MobileNav.jsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { Disclosure } from '@headlessui/react';
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
export default function MobileNav({ sidebar }) {
|
||||
return (
|
||||
<Disclosure as="nav">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{open ? (
|
||||
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
|
||||
) : (
|
||||
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="md:hidden absolute top-14 right-0 max-h-screen pb-14 overflow-auto z-[100] w-full">
|
||||
<div className="space-y-1 px-4 py-4 bg-[#161616]">
|
||||
<a
|
||||
href=".."
|
||||
className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-bg hover:px-2 rounded-md"
|
||||
>
|
||||
<span>go to REPL</span>
|
||||
</a>
|
||||
{Object.entries(sidebar).map(([group, items], i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div>{group}</div>
|
||||
{items.map((item, j) => (
|
||||
<Disclosure.Button
|
||||
key={j}
|
||||
as="a"
|
||||
href={`/${item.link}`}
|
||||
className={classNames(
|
||||
item.current ? 'bg-bg text-white' : 'text-gray-300 hover:bg-bg hover:text-white',
|
||||
'block px-3 py-2 rounded-md text-base font-medium',
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
>
|
||||
{item.text}
|
||||
</Disclosure.Button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
);
|
||||
}
|
||||
@ -31,8 +31,7 @@ export function Header({ context }) {
|
||||
<header
|
||||
id="header"
|
||||
className={cx(
|
||||
'flex-none w-full md:flex text-black justify-between z-[100] text-lg select-none sticky top-0',
|
||||
isEmbedded ? 'h-12 md:h-8' : 'h-25 md:h-14',
|
||||
'py-1 flex-none w-full md:flex text-black justify-between z-[100] text-lg select-none sticky top-0',
|
||||
!isZen && 'bg-header',
|
||||
)}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user