git.iko.soy/urbit.org
on master help sign in
first pass of mobile docs sidebar
fc912c0Gavin Atkinson
components/ContentArea.js+2−2
compare with master
unifiedsplit
@@ -1,7 +1,7 @@
1export default function ContentArea(props) {
1export default function ContentArea(props) {
2 return (
2 return (
3 <div className="w-full min-w-0 flex flex-col">
3 <div className="w-full min-w-0 flex flex-col">
4− <header className="flex justify-between items-center px-24 pt-12 pb-8">
4+ <header className="flex justify-between items-center px-4 md:px-12 lg:px-24 pt-12 pb-8">
5 <div className="type-ui">{props.section}</div>
5 <div className="type-ui">{props.section}</div>
6 <button
6 <button
7 onClick={(e) => {
7 onClick={(e) => {
@@ -13,7 +13,7 @@ export default function ContentArea(props) {
13 Search<div className="ml-4 text-lightGray">⌘K</div>
13 Search<div className="ml-4 text-lightGray">⌘K</div>
14 </button>
14 </button>
15 </header>
15 </header>
16− <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
16+ <div className="px-4 md:px-12 lg:px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
17 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
17 <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
18 <h2 className="mb-16 mt-4">{props.title}</h2>
18 <h2 className="mb-16 mt-4">{props.title}</h2>
19 {props.children}
19 {props.children}
components/Header.js+53−94
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
3import { useState } from "react";
3import { useState } from "react";
4import classnames from "classnames";
4import classnames from "classnames";
5import path from "path";
5import path from "path";
6+import MenuTray from "../components/MenuTray";
6
7
7function ActiveLink({ children, href, className }) {
8function ActiveLink({ children, href, className }) {
8 const router = useRouter();
9 const router = useRouter();
@@ -21,58 +22,10 @@ function ActiveLink({ children, href, className }) {
21 );
22 );
22}
23}
23
24
24−function MenuTray(props) {
25− // Locks document scrolling when menu is open
26− if (typeof document !== "undefined") {
27− if (props.isOpen) {
28− document.body.style.overflow = "hidden";
29− } else {
30− document.body.style.overflow = "visible";
31− }
32− }
33−
34− // Slides the tray in or out from the left
35− const trayClasses = classnames({
36− "tray-menu-open": props.isOpen,
37− "tray-menu-closed": !props.isOpen,
38− });
39−
40− // Fades the background overlay in or out
41− const overlayClasses = classnames({
42− "tray-overlay-open": props.isOpen,
43− "tray-overlay-closed": !props.isOpen,
44− });
45−
46− // Hides or shows the menu
47− const menuClasses = classnames({
48− "menu-open": props.isOpen,
49− "menu-closed": !props.isOpen,
50− });
51−
52− return (
53− <nav className={`z-10 w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>
54− <div
55− onClick={() => props.toggleTray(!props.isOpen)}
56− className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
57− />
58− <div
59− className={`absolute bg-wall h-screen top-0 left-0 flex flex-col p-4 tray-menu-width ${trayClasses}`}
60− >
61− {props.children}
62− </div>
63− </nav>
64− );
65−}
66−
67// This is the header for the index page
25// This is the header for the index page
68export default function Header(props) {
26export default function Header(props) {
69 const [isOpen, toggleTray] = useState(false);
27 const [isOpen, toggleTray] = useState(false);
70
28
71− const mobileSearchButtonClasses = classnames({
72− visible: isOpen,
73− invisible: !isOpen,
74− });
75−
76 return (
29 return (
77 <header className="layout-wide flex justify-between items-center pt-12">
30 <header className="layout-wide flex justify-between items-center pt-12">
78 <Link href="/">
31 <Link href="/">
@@ -91,7 +44,9 @@ export default function Header(props) {
91 <ActiveLink className="mr-5 type-ui" href="/events">
44 <ActiveLink className="mr-5 type-ui" href="/events">
92 Events
45 Events
93 </ActiveLink>
46 </ActiveLink>
94− <button className="mr-5 text-green type-ui">Download Port</button>
47+ <button className="mr-5 text-green type-ui button-text">
48+ Download Port
49+ </button>
95 <button
50 <button
96 onClick={(e) => {
51 onClick={(e) => {
97 e.stopPropagation();
52 e.stopPropagation();
@@ -121,51 +76,55 @@ export default function Header(props) {
121 </ActiveLink>
76 </ActiveLink>
122 </MenuTray>
77 </MenuTray>
123
78
79+ {
80+ // Mobile menu button and search button
81+ }
82+ <div className="block md:hidden">
124− <button
83+ <button
125− onClick={(e) => {
84+ onClick={(e) => {
126− e.stopPropagation();
85+ e.stopPropagation();
127− props.search.toggleSearch(e);
86+ props.search.toggleSearch(e);
128− }}
87+ }}
129− className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray left-4 right-4 bottom-4 mobile-search-button-width ${
88+ className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray left-4 right-4 bottom-4 mobile-search-button-width ${
130− isOpen ? "flex" : "hidden"
89+ isOpen ? "flex" : "hidden"
131− }`}
90+ }`}
132− >
91+ >
133− Search
92+ Search
134− </button>
93+ </button>
135−
136− <button
94+ <button
137− onClick={() => toggleTray(!isOpen)}
95+ onClick={() => toggleTray(!isOpen)}
138− className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
96+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
139− >
97+ >
140− {isOpen ? (
98+ {isOpen ? (
141− <svg
99+ <svg
142− width="16"
100+ width="16"
143− height="16"
101+ height="16"
144− viewBox="0 0 16 16"
102+ viewBox="0 0 16 16"
145− fill="none"
103+ fill="none"
146− xmlns="http://www.w3.org/2000/svg"
104+ xmlns="http://www.w3.org/2000/svg"
147− >
105+ >
148− <path
106+ <path
149− fill-rule="evenodd"
107+ fill-rule="evenodd"
150− clip-rule="evenodd"
108+ clip-rule="evenodd"
151− d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
109+ d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
152− fill="white"
110+ fill="white"
153− />
111+ />
154− </svg>
112+ </svg>
155− ) : (
113+ ) : (
156− <svg
114+ <svg
157− width="16"
115+ width="16"
158− height="16"
116+ height="16"
159− viewBox="0 0 16 17"
117+ viewBox="0 0 16 17"
160− fill="none"
118+ fill="none"
161− xmlns="http://www.w3.org/2000/svg"
119+ xmlns="http://www.w3.org/2000/svg"
162− >
120+ >
163− <rect width="16" height="3" rx="1.5" fill="white" />
121+ <rect width="16" height="3" rx="1.5" fill="white" />
164− <rect y="7" width="16" height="3" rx="1.5" fill="white" />
122+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
165− <rect y="14" width="16" height="3" rx="1.5" fill="white" />
123+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
166− </svg>
124+ </svg>
167− )}
125+ )}
168− </button>
126+ </button>
127+ </div>
169 </header>
128 </header>
170 );
129 );
171}
130}
components/MenuTray.jsnew file+44
@@ -0,0 +1,44 @@
1+import classnames from "classnames";
2+
3+export default function MenuTray(props) {
4+ // Locks document scrolling when menu is open
5+ if (typeof document !== "undefined") {
6+ if (props.isOpen) {
7+ document.body.style.overflow = "hidden";
8+ } else {
9+ document.body.style.overflow = "visible";
10+ }
11+ }
12+
13+ // Slides the tray in or out from the left
14+ const trayClasses = classnames({
15+ "tray-menu-open": props.isOpen,
16+ "tray-menu-closed": !props.isOpen,
17+ });
18+
19+ // Fades the background overlay in or out
20+ const overlayClasses = classnames({
21+ "tray-overlay-open": props.isOpen,
22+ "tray-overlay-closed": !props.isOpen,
23+ });
24+
25+ // Hides or shows the menu
26+ const menuClasses = classnames({
27+ "menu-open": props.isOpen,
28+ "menu-closed": !props.isOpen,
29+ });
30+
31+ return (
32+ <nav className={`z-10 w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>
33+ <div
34+ onClick={() => props.toggleTray(!props.isOpen)}
35+ className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
36+ />
37+ <div
38+ className={`absolute bg-wall h-screen top-0 left-0 p-4 tray-menu-width overflow-y-scroll ${trayClasses}`}
39+ >
40+ <div className="flex flex-col">{props.children}</div>
41+ </div>
42+ </nav>
43+ );
44+}
components/Sidebar.js+70−10
@@ -1,17 +1,77 @@
1import Link from "next/link";
1import Link from "next/link";
2+import { useState } from "react";
3+import MenuTray from "./MenuTray";
2
4
3export default function Sidebar(props) {
5export default function Sidebar(props) {
6+ const [isOpen, toggleTray] = useState(false);
4 return (
7 return (
8+ <>
5− <div className="flex flex-col w-96 bg-wall max-h-screen h-screen">
9+ <div className="hidden md:flex flex-col w-96 bg-wall max-h-screen h-screen">
6− <header className="flex flex-shrink-0 justify-between items-center pl-6 pt-12 pb-8">
10+ <header className="flex flex-shrink-0 justify-between items-center pl-6 pt-12 pb-8">
7− <Link href="/">
11+ <Link href="/">
8− <a className="type-ui text-gray">Urbit</a>
12+ <a className="type-ui text-gray">Urbit</a>
9− </Link>
13+ </Link>
10− </header>
14+ </header>
11− <div className="overflow-y-scroll p-6 pt-16">
15+ <div className="overflow-y-scroll p-6 pt-16">
12− {props.children}
16+ {props.children}
13− <div className="pb-32" />
17+ <div className="pb-32" />
18+ </div>
14 </div>
19 </div>
15− </div>
20+
21+ <div className="block md:hidden">
22+ <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
23+ <header className="flex flex-shrink-0 justify-between items-center pt-8 pb-8">
24+ <Link href="/">
25+ <a className="type-ui text-gray">Urbit</a>
26+ </Link>
27+ </header>
28+ {props.children}
29+ </MenuTray>
30+ <button
31+ onClick={(e) => {
32+ e.stopPropagation();
33+ props.search.toggleSearch(e);
34+ }}
35+ className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray left-4 right-4 bottom-4 mobile-search-button-width ${
36+ isOpen ? "flex" : "hidden"
37+ }`}
38+ >
39+ Search
40+ </button>
41+ <button
42+ onClick={() => toggleTray(!isOpen)}
43+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
44+ >
45+ {isOpen ? (
46+ <svg
47+ width="16"
48+ height="16"
49+ viewBox="0 0 16 16"
50+ fill="none"
51+ xmlns="http://www.w3.org/2000/svg"
52+ >
53+ <path
54+ fill-rule="evenodd"
55+ clip-rule="evenodd"
56+ d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
57+ fill="white"
58+ />
59+ </svg>
60+ ) : (
61+ <svg
62+ width="16"
63+ height="16"
64+ viewBox="0 0 16 17"
65+ fill="none"
66+ xmlns="http://www.w3.org/2000/svg"
67+ >
68+ <rect width="16" height="3" rx="1.5" fill="white" />
69+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
70+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
71+ </svg>
72+ )}
73+ </button>
74+ </div>
75+ </>
16 );
76 );
17}
77}
pages/docs/[[...slug]].js+5−2
@@ -30,7 +30,7 @@ const breadcrumbs = (posts, paths) => {
30};
30};
31
31
32const childPages = (thisLink, children, level = 0) => (
32const childPages = (thisLink, children, level = 0) => (
33− <ul className="pl-1">
33+ <ul className="pl-0">
34 {Object.entries(children).map(([childSlug, child]) => (
34 {Object.entries(children).map(([childSlug, child]) => (
35 <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
35 <li>{pageTree(join(thisLink, childSlug), child, level)}</li>
36 ))}
36 ))}
@@ -69,7 +69,7 @@ const pageTree = (thisLink, tree, level = 0) => {
69 <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>
69 <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>
70 </span>
70 </span>
71 <div className={activeClasses}>
71 <div className={activeClasses}>
72− <ul className={"pl-1"}>
72+ <ul className={""}>
73 {tree.pages.map(({ title, slug }) => {
73 {tree.pages.map(({ title, slug }) => {
74 const href = join(thisLink, slug);
74 const href = join(thisLink, slug);
75 const isSelected = router.asPath === href;
75 const isSelected = router.asPath === href;
@@ -97,6 +97,8 @@ const pageTree = (thisLink, tree, level = 0) => {
97};
97};
98
98
99export default function DocsLayout({ posts, data, params, search, markdown }) {
99export default function DocsLayout({ posts, data, params, search, markdown }) {
100+ const [isOpen, toggleTray] = useState(false);
101+
100 return (
102 return (
101 <>
103 <>
102 <Head>
104 <Head>
@@ -104,6 +106,7 @@ export default function DocsLayout({ posts, data, params, search, markdown }) {
104 </Head>
106 </Head>
105 <div className="flex w-screen h-screen min-h-screen w-screen">
107 <div className="flex w-screen h-screen min-h-screen w-screen">
106 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
108 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
109+
107 <ContentArea
110 <ContentArea
108 breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
111 breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
109 title={data.title}
112 title={data.title}
styles/globals.css+3−8
@@ -97,14 +97,9 @@ button {
97 overflow: visible;
97 overflow: visible;
98}
98}
99
99
100−.button-sm:hover {
100+.button-sm:hover,
101− opacity: 0.66;
101+.button-text:hover,
102−}
103−
104−.button-lg:hover {
102+.button-lg:hover,
105− opacity: 0.66;
106−}
107−
108a:hover {
103a:hover {
109 opacity: 0.66;
104 opacity: 0.66;
110}
105}