8ca2b75 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

components: move MenuTray to design system

8ca2b75Matilde Park4 years ago

components/DocsSidebar.js+1−1

compare with master

unifiedsplit

@@ -1,6 +1,6 @@

1import Link from "next/link";

2import { useState } from "react";

3−import MenuTray from "./MenuTray";

3+import { MenuTray } from '@urbit/foundation-design-system'

5export default function Sidebar(props) {

6 const [isOpen, setTray] = useState(false);

components/Header.js+1−2

@@ -2,8 +2,7 @@ import Link from "next/link";

2import { useRouter } from "next/router";

3import { useState } from "react";

4import classnames from "classnames";

5−import MenuTray from "../components/MenuTray";

6−import { capitalize } from "@urbit/foundation-design-system";

5+import { capitalize, MenuTray } from "@urbit/foundation-design-system";

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

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

9 const firstCrumb = currentPath.split("/")[1];

8 const firstCrumb = currentPath.split("/")[1];

components/MenuTray.jsdeleted−108

@@ -1,108 +0,0 @@

1−import classnames from "classnames";

2−import { useSwipeable } from "react-swipeable";

3−

4−export default function MenuTray({ isOpen, setTray, search, children }) {

5− // Locks document scrolling when menu is open

6− if (typeof document !== "undefined") {

7− if (isOpen) {

8− document.body.style.overflow = "hidden";

9− } else {

10− document.body.style.overflow = "visible";

11− }

12− }

13−

14− const handlers = useSwipeable({

15− onSwipedLeft: (e) => setTray(false),

16− });

17−

18− // Slides the tray in or out from the left

19− const trayClasses = classnames({

20− "tray-menu-open": isOpen,

21− "tray-menu-closed": !isOpen,

22− });

23−

24− // Fades the background overlay in or out

25− const overlayClasses = classnames({

26− "tray-overlay-open": isOpen,

27− "tray-overlay-closed": !isOpen,

28− });

29−

30− // Hides or shows the menu

31− const menuClasses = classnames({

32− "menu-open": isOpen,

33− "menu-closed": !isOpen,

34− });

35−

36− return (

37− <>

38− <nav

39− {...handlers}

40− className={`z-20 w-screen h-screen top-0 left-0 fixed block md:hidden ${menuClasses}`}

41− >

42− <div

43− onClick={() => setTray(!isOpen)}

44− className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}

45− />

46− <div

47− className={`absolute bg-wall-100 h-screen top-0 left-0 tray-menu-width overflow-y-scroll mb-24 ${trayClasses}`}

48− >

49− <div

50− {...handlers}

51− className="flex flex-col px-4 md:px-8 pt-8 md:pt-10 lg:pt-12"

52− >

53− {children}

54− </div>

55− </div>

56−

57− <button

58− onClick={(e) => {

59− e.stopPropagation();

60− search.toggleSearch(e);

61− }}

62− className={`z-20 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-wall-500 left-4 right-4 bottom-4 mobile-search-button-width ${

63− isOpen ? "flex" : "hidden"

64− }`}

65− >

66− Search

67− </button>

68− </nav>

69− <button

70− onClick={() => setTray(!isOpen)}

71− className="z-20 fixed bottom-4 right-4 w-16 h-16 bg-wall-600 flex items-center justify-center rounded-full md:hidden"

72− >

73− {isOpen ? (

74− <svg

75− width="16"

76− height="16"

77− viewBox="0 0 16 16"

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

79− >

80− <path

81− fillRule="evenodd"

82− clipRule="evenodd"

83− 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"

84− className="fill-white"

85− />

86− </svg>

87− ) : (

88− <svg

89− width="16"

90− height="16"

91− viewBox="0 0 16 17"

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

93− >

94− <rect width="16" height="3" rx="1.5" className="fill-white" />

95− <rect y="7" width="16" height="3" rx="1.5" className="fill-white" />

96− <rect

97− y="14"

98− width="16"

99− height="3"

100− rx="1.5"

101− className="fill-white"

102− />

103− </svg>

104− )}

105− </button>

106− </>

107− );

108−}

components/Sidebar.js+1−1

@@ -1,5 +1,5 @@

1import { useState } from "react";

2−import MenuTray from "./MenuTray";

2+import { MenuTray } from '@urbit/foundation-design-system';

4export default function Sidebar(props) {

5 const [isOpen, setTray] = useState(false);

package-lock.json+11−9

@@ -12,7 +12,7 @@

12 "@socialgouv/matomo-next": "^1.3.0",

13 "@tailwindcss/aspect-ratio": "^0.4.0",

14 "@tlon/sigil-js": "^1.4.5",

15− "@urbit/foundation-design-system": "^0.6.0",

15+ "@urbit/foundation-design-system": "0.6.2",

16 "@urbit/markdoc": "^0.1.4",

17 "axios": "^0.26.1",

18 "buffer": "^6.0.3",

@@ -358,16 +358,17 @@

358 "dev": true

359 },

360 "node_modules/@urbit/foundation-design-system": {

361− "version": "0.6.0",

361+ "version": "0.6.2",

362− "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.6.0.tgz",

362+ "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.6.2.tgz",

363− "integrity": "sha512-pLeDMwzHCsrK7Z5Ao/01lw+0SbKfIXd8yJUfHQ8Vnv557qMuv6DCBUY9t690EdacVGpWDKBX3joGDcxqcsfQCA==",

363+ "integrity": "sha512-VTQfbM6nkRksaa6IzEhuMDfK+rYuGxcQWK6sovV/J32kQVuJFvO0K11RuI9Ajut1lwlu5C/ngmzo3KIObOBlMw==",

364 "dependencies": {

365 "@iarna/toml": "^2.2.5",

366 "core-js": "^3.23.1",

367 "gray-matter": "^4.0.3",

368 "html-react-parser": "^1.4.14",

369 "luxon": "^3.0.1",

370− "prism-react-renderer": "^1.3.3"

370+ "prism-react-renderer": "^1.3.3",

371+ "react-swipeable": "^6.2.1"

371 },

372 },

372 "peerDependencies": {

373 "peerDependencies": {

373 "@tailwindcss/aspect-ratio": "^0.4.0",

374 "@tailwindcss/aspect-ratio": "^0.4.0",

@@ -3322,16 +3323,17 @@

3322 "dev": true

3323 "dev": true

3323 },

3324 },

3324 "@urbit/foundation-design-system": {

3325 "@urbit/foundation-design-system": {

3325− "version": "0.6.0",

3326+ "version": "0.6.2",

3326− "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.6.0.tgz",

3327+ "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.6.2.tgz",

3327− "integrity": "sha512-pLeDMwzHCsrK7Z5Ao/01lw+0SbKfIXd8yJUfHQ8Vnv557qMuv6DCBUY9t690EdacVGpWDKBX3joGDcxqcsfQCA==",

3328+ "integrity": "sha512-VTQfbM6nkRksaa6IzEhuMDfK+rYuGxcQWK6sovV/J32kQVuJFvO0K11RuI9Ajut1lwlu5C/ngmzo3KIObOBlMw==",

3328 "requires": {

3329 "requires": {

3329 "@iarna/toml": "^2.2.5",

3330 "@iarna/toml": "^2.2.5",

3330 "core-js": "^3.23.1",

3331 "core-js": "^3.23.1",

3331 "gray-matter": "^4.0.3",

3332 "gray-matter": "^4.0.3",

3332 "html-react-parser": "^1.4.14",

3333 "html-react-parser": "^1.4.14",

3333 "luxon": "^3.0.1",

3334 "luxon": "^3.0.1",

3334− "prism-react-renderer": "^1.3.3"

3335+ "prism-react-renderer": "^1.3.3",

3336+ "react-swipeable": "^6.2.1"

3335 },

3337 },

3336 "dependencies": {

3338 "dependencies": {

3337 "luxon": {

3339 "luxon": {

package.json+1−1

@@ -21,7 +21,7 @@

21 "@socialgouv/matomo-next": "^1.3.0",

22 "@tailwindcss/aspect-ratio": "^0.4.0",

23 "@tlon/sigil-js": "^1.4.5",

24− "@urbit/foundation-design-system": "^0.6.0",

24+ "@urbit/foundation-design-system": "0.6.2",

25 "@urbit/markdoc": "^0.1.4",

26 "axios": "^0.26.1",

27 "buffer": "^6.0.3",