Skip to content

Commit 3f96742

Browse files
jderochervlkfhammerschmidt
jderochervlk
and
fhammerschmidt
authored
Adding a sub nav to the docs section to reduce the amount of content in the main nav (#1031)
* create sub nav for docs * basics in place, not done at all * functionality is done * light background * mobile formatting * fix mobile formatting * mobile nav color fixes * fix wide desktop position * increase mobile gap * remove unused class * Update SidebarLayout.res * Update SidebarLayout.res * Update SidebarLayout.res * Update SidebarLayout.res * Run format --------- Co-authored-by: Florian Hammerschmidt <[email protected]>
1 parent a189d06 commit 3f96742

File tree

3 files changed

+129
-97
lines changed

3 files changed

+129
-97
lines changed

‎src/SyntaxLookup.res

+1-1
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ let default = (props: props) => {
374374
<div className="text-gray-80">
375375
<Navigation isOverlayOpen setOverlayOpen />
376376
<div className="flex xs:justify-center overflow-hidden pb-48">
377-
<main className="mt-16 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280">
377+
<main className="mt-24 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280">
378378
<MdxProvider components=MarkdownComponents.default>
379379
<div className="flex justify-center">
380380
<div className="max-w-740 w-full"> content </div>

‎src/components/Navigation.res

+122-91
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
11
module Link = Next.Link
22

3-
let link = "no-underline block hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px"
3+
let link = "no-underline block hover:cursor-pointer hover:text-fire-30 mb-px"
44
let activeLink = "font-medium text-fire-30 border-b border-fire"
55

66
let linkOrActiveLink = (~target, ~route) => target === route ? activeLink : link
77

88
let linkOrActiveLinkSubroute = (~target, ~route) =>
99
String.startsWith(route, target) ? activeLink : link
1010

11-
let isActiveLink = (~route: string, ~href: string) => {
12-
route == href ? activeLink : link
11+
let isActiveLink = (~includes: string, ~excludes: option<string>=?, ~route: string) => {
12+
// includes means we want the lnk to be active if it contains the expected text
13+
let includes = route->String.includes(includes)
14+
// excludes allows us to not have links be active even if they do have the includes text
15+
let excludes = switch excludes {
16+
| Some(excludes) => route->String.includes(excludes)
17+
| None => false
18+
}
19+
includes && !excludes ? activeLink : link
1320
}
1421

22+
let isDocRoute = (~route) =>
23+
route->String.includes("/docs/") || route->String.includes("/syntax-lookup")
24+
25+
let isDocRouteActive = (~route) => isDocRoute(~route) ? activeLink : link
26+
1527
module MobileNav = {
1628
@react.component
1729
let make = (~route: string) => {
18-
let base = "font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"
30+
let base = "font-normal mx-4 py-5 text-gray-40 border-b border-gray-80"
1931
let extLink = "block hover:cursor-pointer hover:text-white text-gray-60"
20-
<div className="border-gray-80 border-t">
32+
<div className="border-gray-80 border-tn">
2133
<ul>
2234
<li className=base>
2335
<Link href="/try" className={linkOrActiveLink(~target="/try", ~route)}>
@@ -73,98 +85,117 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
7385
let fixedNav = fixed ? "fixed top-0" : "relative"
7486

7587
<>
76-
<nav
88+
<header
7789
id="header"
7890
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/[email protected]" className="lg:hidden" />
86-
<img src="/static/[email protected]" 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>
91+
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"}>
92+
<nav className="px-4 flex xs:justify-center bg-gray-90 shadow h-16 text-white-80 text-14">
93+
<div className="flex justify-between items-center h-full w-full max-w-1280">
94+
<div className="h-8 w-8 lg:h-10 lg:w-32">
95+
<a
96+
href="/"
97+
className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
98+
<img src="/static/[email protected]" className="lg:hidden" />
99+
<img src="/static/[email protected]" className="hidden lg:block" />
100+
</a>
128101
</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>
102+
/* Desktop horizontal navigation */
103+
<div
104+
className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
105+
<div
106+
className="flex ml-10 space-x-5 w-full max-w-320 text-gray-40"
107+
style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
108+
<Link
109+
href={`/docs/manual/${version}/introduction`} className={isDocRouteActive(~route)}>
110+
{React.string("Docs")}
111+
</Link>
112+
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>
128+
</div>
129+
<div className="md:flex flex items-center text-gray-60">
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>
144+
</div>
144145
</div>
145146
</div>
146147
</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>
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>
168+
// This is a subnav for documentation pages
169+
{isDocRoute(~route)
170+
? <nav
171+
id="docs-subnav"
172+
className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
173+
<div
174+
className="pl-30 flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
175+
<Link
176+
href={`/docs/manual/${version}/introduction`}
177+
className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>
178+
{React.string("Language Manual")}
179+
</Link>
180+
<Link
181+
href={`/docs/manual/${version}/api`}
182+
className={isActiveLink(~includes="/api", ~route)}>
183+
{React.string("API")}
184+
</Link>
185+
<Link
186+
href={`/syntax-lookup`}
187+
className={isActiveLink(~includes="/syntax-lookup", ~route)}>
188+
{React.string("Syntax Lookup")}
189+
</Link>
190+
<Link
191+
href={`/docs/react/latest/introduction`}
192+
className={isActiveLink(~includes="/docs/react/", ~route)}>
193+
{React.string("React")}
194+
</Link>
195+
</div>
196+
</nav>
197+
: React.null}
198+
</header>
168199
</>
169200
}
170201

‎src/layouts/SidebarLayout.res

+6-5
Original file line numberDiff line numberDiff line change
@@ -138,14 +138,15 @@ module Sidebar = {
138138
id="sidebar"
139139
className={(
140140
isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
141-
) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white"}>
141+
) ++ " overflow-x-hidden md:block md:w-48 md:-ml-4 lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white"}>
142142
<aside
143143
id="sidebar-content"
144-
className="relative top-0 px-4 w-full block md:top-16 md:pt-16 md:sticky border-r border-gray-20 overflow-y-auto pb-24"
144+
className="relative top-0 px-4 w-full block md:top-16 md:pt-4 md:sticky border-r border-gray-20 overflow-y-auto pb-24"
145145
style={ReactDOMStyle.make(~height="calc(100vh - 4.5rem", ())}>
146146
<div className="flex justify-between">
147147
<div className="w-3/4 md:w-full"> toplevelNav </div>
148148
<button
149+
style={{paddingTop: "72px"}}
149150
onClick={evt => {
150151
ReactEvent.Mouse.preventDefault(evt)
151152
toggle()
@@ -309,18 +310,18 @@ let make = (
309310
<div className="flex lg:justify-center">
310311
<div className="flex w-full max-w-1280 md:mx-8">
311312
sidebar
312-
<main className="px-4 w-full pt-16 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
313+
<main className="px-4 w-full pt-20 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
313314
//width of the right content part
314315
<div
315-
className={"z-10 fixed border-b shadow top-16 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>
316+
className={"z-10 fixed border-b shadow top-[112px] left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>
316317
<MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
317318
<div
318319
className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full">
319320
breadcrumbs
320321
editLinkEl
321322
</div>
322323
</div>
323-
<div className={hasBreadcrumbs ? "mt-10" : "-mt-4"}>
324+
<div className={hasBreadcrumbs ? "mt-10" : "mt-6 md:-mt-4"}>
324325
<MdxProvider components> children </MdxProvider>
325326
</div>
326327
pagination

0 commit comments

Comments
 (0)