git.iko.soy/urbit.org
on master help sign in
search type mobile scaling
commitf7df2db52dc866dd8f374506e3916e0be739eb14 authorGavin Atkinson <gvnatknsn@protonmail.com> dateTue 13 Jul 2021, 16:42 (5 years ago) parent1797361
3 files changed+65−22
compare with master
unifiedsplit
components/Header.js+57−14 components/Search.js+5−5 lib/lib.js+3−3
components/Header.js+57−14
@@ -5,11 +5,10 @@ import classnames from "classnames";
55import path from "path";
66import MenuTray from "../components/MenuTray";
77import Section from "../components/Section";
8+import { capitalize } from "../lib/lib";
89
9−function ActiveLink({ children, href, className }) {
10− const router = useRouter();
11−
12− const firstCrumb = router.asPath.split("/")[1];
10+function ActiveLink({ children, href, className, currentPath }) {
11+ const firstCrumb = currentPath.split("/")[1];
1312
1413 const activeClassName = classnames({
1514 "text-black": "/" + firstCrumb === href,
@@ -26,25 +25,53 @@ function ActiveLink({ children, href, className }) {
2625export default function Header(props) {
2726 const [isOpen, toggleTray] = useState(false);
2827
28+ const currentPath = useRouter().asPath;
29+
30+ const routeDepth = currentPath.split("/").length;
31+
32+ const firstCrumb = currentPath.split("/")[1];
33+
2934 return (
3035 <header className="w-full px-4 md:px-8 md:w-10/12 flex flex-row justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
31− <Link href="/">
32− <a className="type-ui">Urbit</a>
33− </Link>
36+ <div>
37+ <Link href="/">
38+ <a className="type-ui">Urbit</a>
39+ </Link>
40+ {routeDepth > 2 ? (
41+ <Link href={`/${firstCrumb}`}>
42+ <a className="inline md:hidden type-ui text-gray ml-2">
43+ {capitalize(firstCrumb)}
44+ </a>
45+ </Link>
46+ ) : null}
47+ </div>
3448 {
3549 // Large screen header
3650 }
3751 <nav className="items-center hidden md:flex">
38− <ActiveLink className="mr-5 type-ui" href="/docs">
52+ <ActiveLink
53+ currentPath={currentPath}
54+ className="mr-5 type-ui"
55+ href="/docs"
56+ >
3957 Docs
4058 </ActiveLink>
41− <ActiveLink className="mr-5 type-ui" href="/blog">
59+ <ActiveLink
60+ currentPath={currentPath}
61+ className="mr-5 type-ui"
62+ href="/blog"
63+ >
4264 Blog
4365 </ActiveLink>
44− <ActiveLink className="mr-5 type-ui" href="/events">
66+ <ActiveLink
67+ currentPath={currentPath}
68+ className="mr-5 type-ui"
69+ href="/events"
70+ >
4571 Events
4672 </ActiveLink>
4773 <ActiveLink
74+ currentPath={currentPath}
4875 className="mr-5 text-green type-ui button-text"
4976 href="/getting-started"
5077 >
@@ -68,16 +95,32 @@ export default function Header(props) {
6895 <Link href="/">
6996 <a className="type-ui mb-12">Urbit</a>
7097 </Link>
71− <ActiveLink className="mr-5 mb-4 type-h3" href="/docs">
98+ <ActiveLink
99+ currentPath={currentPath}
100+ className="mr-5 mb-4 type-h3"
101+ href="/docs"
102+ >
72103 Docs
73104 </ActiveLink>
74− <ActiveLink className="mr-5 mb-4 type-h3" href="/blog">
105+ <ActiveLink
106+ currentPath={currentPath}
107+ className="mr-5 mb-4 type-h3"
108+ href="/blog"
109+ >
75110 Blog
76111 </ActiveLink>
77− <ActiveLink className="mr-5 mb-4 type-h3" href="/events">
112+ <ActiveLink
113+ currentPath={currentPath}
114+ className="mr-5 mb-4 type-h3"
115+ href="/events"
116+ >
78117 Events
79118 </ActiveLink>
80− <ActiveLink className="mr-5 mb-4 type-h3" href="/grants">
119+ <ActiveLink
120+ currentPath={currentPath}
121+ className="mr-5 mb-4 type-h3"
122+ href="/grants"
123+ >
81124 Grants
82125 </ActiveLink>
83126 </MenuTray>
components/Search.js+5−5
@@ -83,15 +83,15 @@ export default function Search(props) {
8383 return (
8484 <div
8585 onClick={props.closeSearch}
86− className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center"
86+ className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center p-4"
8787 >
8888 <div
89− className="relative flex flex-col max-w-screen-lg w-12/12 m-4 md:my-32 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"
89+ className="relative flex flex-col max-w-screen-lg md:my-32 w-full md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"
9090 ref={searchRef}
9191 >
92− <div className="">
92+ <div className="relative">
9393 <input
94− className="text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
94+ className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
9595 onChange={onChange}
9696 onFocus={onFocus}
9797 placeholder="Search..."
@@ -103,7 +103,7 @@ export default function Search(props) {
103103
104104 <span
105105 onClick={props.toggleSearch}
106− className="absolute right-2.5 top-2.5 cursor-pointer"
106+ className="absolute cursor-pointer right-1.5 top-1.5 md:right-2 md:top-2 lg:right-2.5 lg:top-2.5"
107107 >
108108 <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
109109 ESC
lib/lib.js+3−3
@@ -126,9 +126,9 @@ export function formatDate(d) {
126126 return mn[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
127127}
128128
129−// export function capitalize(str) {
130−// return str.charAt(0).toUpperCase() + str.slice(1);
131−// }
129+export function capitalize(str) {
130+ return str.charAt(0).toUpperCase() + str.slice(1);
131+}
132132
133133// export function generateCrumbs(path) {
134134// const crumbs = path.split('/')