6d20356 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

Tray menu pass 1

6d20356Gavin Atkinson5 years ago

components/Header.js+36−21

compare with master

unifiedsplit

@@ -3,7 +3,6 @@ import { useRouter } from "next/router";

3import { useState } from "react";

4import classnames from "classnames";

5import path from "path";

6−import { useLockBodyScroll } from "../lib/hooks";

8function ActiveLink({ children, href, className }) {

7function ActiveLink({ children, href, className }) {

9 const router = useRouter();

8 const router = useRouter();

@@ -32,16 +31,35 @@ function MenuTray(props) {

32 }

31 }

33 }

32 }

34+ // Slides the tray in or out from the left

35− const activeClasses = classnames({

35+ const trayClasses = classnames({

36 "tray-menu-open": props.isOpen,

37 "tray-menu-closed": !props.isOpen,

38 });

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+

40 return (

52 return (

41− <nav

53+ <nav className={`w-screen h-screen top-0 left-0 fixed ${menuClasses}`}>

42− className={`z-9 w-screen h-screen bg-wall flex top-0 left-0 flex-col p-4 pt-24 fixed ${activeClasses}`}

54+ <div

55+ onClick={() => props.toggleTray(!props.isOpen)}

56+ className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}

57+ />

58+ <div

59+ className={`fixed bg-wall h-screen top-0 left-0 flex flex-col p-4 pt-12 tray-menu-width ${trayClasses}`}

43− >

60+ >

44− {props.children}

61+ {props.children}

62+ </div>

45 </nav>

63 </nav>

46 );

64 );

47}

65}

@@ -51,13 +69,8 @@ export default function Header(props) {

51 const [isOpen, toggleTray] = useState(false);

69 const [isOpen, toggleTray] = useState(false);

52 return (

70 return (

53 <header className="layout-wide flex justify-between items-center pt-12">

71 <header className="layout-wide flex justify-between items-center pt-12">

54− <div className="absolute z-10">

55− <Link href="/">

56− <a className="type-ui">Urbit</a>

57− </Link>

58− </div>

59 <Link href="/">

72 <Link href="/">

60− <a className="type-ui text-white">Urbit</a>

73+ <a className="type-ui">Urbit</a>

61 </Link>

74 </Link>

62 {

75 {

63 // Large screen header

76 // Large screen header

@@ -86,9 +99,11 @@ export default function Header(props) {

86 {

99 {

87 // Small screen header

100 // Small screen header

88 }

101 }

89−

90 <div className="block md:hidden">

102 <div className="block md:hidden">

91− <MenuTray isOpen={isOpen}>

103+ <MenuTray isOpen={isOpen} toggleTray={toggleTray}>

104+ <Link href="/">

105+ <a className="type-ui mb-12">Urbit</a>

106+ </Link>

92 <ActiveLink className="mr-5 type-h3" href="/docs">

107 <ActiveLink className="mr-5 type-h3" href="/docs">

93 Docs

108 Docs

94 </ActiveLink>

109 </ActiveLink>

@@ -98,13 +113,13 @@ export default function Header(props) {

98 <ActiveLink className="mr-5 type-h3" href="/events">

113 <ActiveLink className="mr-5 type-h3" href="/events">

99 Events

114 Events

100 </ActiveLink>

115 </ActiveLink>

101− <button className="button-sm bg-wall text-gray">

116+ <button className="fixed bottom-4 left-4 right-4 bg-white rounded-xl items-center justify-between flex px-4 h-16 type-ui text-gray">

102− Search<div className="ml-4 text-lightGray">⌘K</div>

117+ Search...

103 </button>

118 </button>

104 </MenuTray>

119 </MenuTray>

105 <button

120 <button

106 onClick={() => toggleTray(!isOpen)}

121 onClick={() => toggleTray(!isOpen)}

107− className="z-10 absolute right-4 top-8"

122+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"

108 >

123 >

109 {isOpen ? (

124 {isOpen ? (

110 <svg

125 <svg

@@ -118,7 +133,7 @@ export default function Header(props) {

118 fill-rule="evenodd"

133 fill-rule="evenodd"

119 clip-rule="evenodd"

134 clip-rule="evenodd"

120 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"

135 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"

121− fill="black"

136+ fill="white"

122 />

137 />

123 </svg>

138 </svg>

124 ) : (

139 ) : (

@@ -129,9 +144,9 @@ export default function Header(props) {

129 fill="none"

144 fill="none"

130 xmlns="http://www.w3.org/2000/svg"

145 xmlns="http://www.w3.org/2000/svg"

131 >

146 >

132− <rect width="16" height="3" rx="1.5" fill="black" />

147+ <rect width="16" height="3" rx="1.5" fill="white" />

133− <rect y="7" width="16" height="3" rx="1.5" fill="black" />

148+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />

134− <rect y="14" width="16" height="3" rx="1.5" fill="black" />

149+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />

135 </svg>

150 </svg>

136 )}

151 )}

137 </button>

152 </button>

styles/globals.css+53−7

@@ -17,10 +17,6 @@ p a {

17 @apply text-green;

18}

20−/* * {

21− box-sizing: border-box;

22−} */

23−

24.layout-narrow {

20.layout-narrow {

25 @apply w-full md:w-8/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;

21 @apply w-full md:w-8/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;

26}

22}

@@ -148,14 +144,64 @@ a:hover {

148 @apply bg-wall;

144 @apply bg-wall;

149}

145}

150

146

147+:root {

148+ --tray-time: 50ms;

149+}

150+

151.tray-menu-open {

152 transform: translateX(0);

153− transition: transform 200ms;

153+ transition: transform var(--tray-time);

154}

155

156.tray-menu-closed {

157− transform: translateX(100vw);

157+ transform: translateX(-110vw);

158− transition: transform 200ms;

158+ transition: transform var(--tray-time);

159+}

160+

161+.tray-menu-width {

162+ width: calc(100vw - 64px - 16px - 16px);

163+}

164+

165+.tray-overlay-open {

166+ opacity: 1;

167+ transition: opacity var(--tray-time);

168+}

169+

170+.tray-overlay-closed {

171+ opacity: 0;

172+ transition: opacity var(--tray-time);

173+}

174+

175+.menu-open {

176+ animation: hide var(--tray-time) linear;

177+}

178+

179+.menu-closed {

180+ animation: hide var(--tray-time) linear;

181+}

182+

183+@keyframes show {

184+ 0% {

185+ display: none;

186+ }

187+ 1% {

188+ display: block;

189+ }

190+ 100% {

191+ display: block;

192+ }

193+}

194+

195+@keyframes hide {

196+ 0% {

197+ display: block;

198+ }

199+ 99% {

200+ display: block;

201+ }

202+ 100% {

203+ display: none;

204+ }

159}

205}

160

206

161.dot::before {

207.dot::before {

tailwind.config.js+1

@@ -23,6 +23,7 @@ module.exports = {

23 purple: "rgba(157,82,255,0.8)",

24 red: "#ff4136",

25 transparent: "rgba(0,0,0,0)",

26+ washedWhite: "rgba(255,255,255, 0.5)",

26 },

27 },

27 fontFamily: {

28 fontFamily: {

28 sans: ["Inter", "-apple-system", "sans-serif"],

29 sans: ["Inter", "-apple-system", "sans-serif"],