Skip to content

Commit 09dfa3e

Browse files
jderochervlkjderochervlk
committed
create sub nav for docs
1 parent ee9d495 commit 09dfa3e

File tree

2 files changed

+98
-88
lines changed

2 files changed

+98
-88
lines changed

‎src/common/App.res‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ let make = (props: props): React.element => {
5454
// landing page
5555
| {base: [], pagepath: []} => <LandingPageLayout> content </LandingPageLayout>
5656
// docs routes
57-
| {base: ["docs", "manual"], pagepath} => // check if it's an api route
57+
| {base: ["docs", "manual"], pagepath} =>
58+
// check if it's an api route
5859
switch pagepath[0] {
5960
| Some("api") =>
6061
switch url->Url.getVersionString {
@@ -121,7 +122,8 @@ let make = (props: props): React.element => {
121122
}
122123
}
123124

124-
| {base: ["docs", "react"], version} => switch version {
125+
| {base: ["docs", "react"], version} =>
126+
switch version {
125127
| Latest =>
126128
<ReactDocsLayout.Latest frontmatter={component->frontmatter}>
127129
content

‎src/components/Navigation.res‎

Lines changed: 94 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -73,98 +73,106 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
7373
let fixedNav = fixed ? "fixed top-0" : "relative"
7474

7575
<>
76-
<nav
76+
<header
7777
id="header"
7878
style={ReactDOMStyle.make(~minWidth, ())}
79-
className={fixedNav ++ " items-center z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none"}>
80-
<div className="flex justify-between items-center h-full w-full max-w-1280">
81-
<div className="h-8 w-8 lg:h-10 lg:w-32">
82-
<a
83-
href="/"
84-
className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
85-
<img src="/static/nav-logo@2x.png" className="lg:hidden" />
86-
<img src="/static/nav-logo-full@2x.png" className="hidden lg:block" />
87-
</a>
88-
</div>
89-
/* Desktop horizontal navigation */
90-
<div
91-
className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
92-
<div
93-
className="flex ml-10 space-x-5 w-full max-w-320"
94-
style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
95-
<Link
96-
href={`/docs/manual/${version}/introduction`}
97-
className={isActiveLink(~route, ~href=`/docs/manual/${version}/introduction`)}>
98-
{React.string("Docs")}
99-
</Link>
100-
<Link
101-
href={`/docs/manual/${version}/api`}
102-
className={isActiveLink(~route, ~href=`/docs/manual/${version}/api`)}>
103-
{React.string("API")}
104-
</Link>
105-
<Link href={`/syntax-lookup`} className={isActiveLink(~route, ~href=`/syntax-lookup`)}>
106-
{React.string("Syntax")}
107-
</Link>
108-
<Link
109-
href={`/docs/react/latest/introduction`}
110-
className={isActiveLink(~route, ~href=`/docs/react/latest/introduction`)}>
111-
{React.string("React")}
112-
</Link>
113-
<Link
114-
href="/try"
115-
className={"hidden xs:block " ++ linkOrActiveLink(~target="/try", ~route)}>
116-
{React.string("Playground")}
117-
</Link>
118-
<Link
119-
href="/blog"
120-
className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target="/blog", ~route)}>
121-
{React.string("Blog")}
122-
</Link>
123-
<Link
124-
href="/community/overview"
125-
className={"hidden xs:block " ++ linkOrActiveLink(~target="/community", ~route)}>
126-
{React.string("Community")}
127-
</Link>
79+
className={fixedNav ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none"}>
80+
<nav className="px-4 flex xs:justify-center bg-gray-90 shadow h-16 text-white-80 text-14">
81+
<div className="flex justify-between items-center h-full w-full max-w-1280">
82+
<div className="h-8 w-8 lg:h-10 lg:w-32">
83+
<a
84+
href="/"
85+
className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
86+
<img src="/static/nav-logo@2x.png" className="lg:hidden" />
87+
<img src="/static/nav-logo-full@2x.png" className="hidden lg:block" />
88+
</a>
12889
</div>
129-
<div className="md:flex flex items-center">
130-
<Search />
131-
<div className="hidden md:flex items-center ml-5">
132-
<a href=Constants.githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
133-
<Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
134-
</a>
135-
<a href=Constants.xHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
136-
<Icon.X className="w-6 h-6 opacity-50 hover:opacity-100" />
137-
</a>
138-
<a href=Constants.blueSkyHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
139-
<Icon.Bluesky className="w-6 h-6 opacity-50 hover:opacity-100" />
140-
</a>
141-
<a href=Constants.discourseHref rel="noopener noreferrer" className=link>
142-
<Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
143-
</a>
90+
/* Desktop horizontal navigation */
91+
<div
92+
className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
93+
<div
94+
className="flex ml-10 space-x-5 w-full max-w-320"
95+
style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
96+
<Link
97+
href={`/docs/manual/${version}/introduction`}
98+
className={isActiveLink(~route, ~href=`/docs/manual/${version}/introduction`)}>
99+
{React.string("Docs")}
100+
</Link>
101+
102+
<Link
103+
href="/try"
104+
className={"hidden xs:block " ++ linkOrActiveLink(~target="/try", ~route)}>
105+
{React.string("Playground")}
106+
</Link>
107+
<Link
108+
href="/blog"
109+
className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target="/blog", ~route)}>
110+
{React.string("Blog")}
111+
</Link>
112+
<Link
113+
href="/community/overview"
114+
className={"hidden xs:block " ++ linkOrActiveLink(~target="/community", ~route)}>
115+
{React.string("Community")}
116+
</Link>
117+
</div>
118+
<div className="md:flex flex items-center">
119+
<Search />
120+
<div className="hidden md:flex items-center ml-5">
121+
<a href=Constants.githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
122+
<Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
123+
</a>
124+
<a href=Constants.xHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
125+
<Icon.X className="w-6 h-6 opacity-50 hover:opacity-100" />
126+
</a>
127+
<a href=Constants.blueSkyHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
128+
<Icon.Bluesky className="w-6 h-6 opacity-50 hover:opacity-100" />
129+
</a>
130+
<a href=Constants.discourseHref rel="noopener noreferrer" className=link>
131+
<Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
132+
</a>
133+
</div>
144134
</div>
145135
</div>
146136
</div>
147-
</div>
148-
/* Burger Button */
149-
<button
150-
className="h-full px-4 xs:hidden flex items-center hover:text-white"
151-
onClick={evt => {
152-
ReactEvent.Mouse.preventDefault(evt)
153-
toggleOverlay()
154-
}}>
155-
<Icon.DrawerDots
156-
className={"h-1 w-auto block " ++ (isOverlayOpen ? "text-fire" : "text-gray-60")}
157-
/>
158-
</button>
159-
/* Mobile overlay */
160-
<div
161-
style={ReactDOMStyle.make(~minWidth, ~top="4rem", ())}
162-
className={(
163-
isOverlayOpen ? "flex" : "hidden"
164-
) ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>
165-
<MobileNav route />
166-
</div>
167-
</nav>
137+
/* Burger Button */
138+
<button
139+
className="h-full px-4 xs:hidden flex items-center hover:text-white"
140+
onClick={evt => {
141+
ReactEvent.Mouse.preventDefault(evt)
142+
toggleOverlay()
143+
}}>
144+
<Icon.DrawerDots
145+
className={"h-1 w-auto block " ++ (isOverlayOpen ? "text-fire" : "text-gray-60")}
146+
/>
147+
</button>
148+
/* Mobile overlay */
149+
<div
150+
style={ReactDOMStyle.make(~minWidth, ~top="4rem", ())}
151+
className={(
152+
isOverlayOpen ? "flex" : "hidden"
153+
) ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>
154+
<MobileNav route />
155+
</div>
156+
</nav>
157+
<nav
158+
className="z-50 px-4 w-full h-14 bg-gray-100 shadow text-white-80 text-12 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
159+
<div className="p-l-16 flex gap-16 items-center h-full w-full max-w-md">
160+
<Link
161+
href={`/docs/manual/${version}/api`}
162+
className={isActiveLink(~route, ~href=`/docs/manual/${version}/api`)}>
163+
{React.string("API")}
164+
</Link>
165+
<Link href={`/syntax-lookup`} className={isActiveLink(~route, ~href=`/syntax-lookup`)}>
166+
{React.string("Syntax")}
167+
</Link>
168+
<Link
169+
href={`/docs/react/latest/introduction`}
170+
className={isActiveLink(~route, ~href=`/docs/react/latest/introduction`)}>
171+
{React.string("React")}
172+
</Link>
173+
</div>
174+
</nav>
175+
</header>
168176
</>
169177
}
170178

0 commit comments

Comments
 (0)