@t2ca/gatsby-theme-showcase 1.0.90 → 1.0.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/header.js +20 -30
  3. package/src/components/layout.js +3 -22
  4. package/src/components/nav-link.js +27 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t2ca/gatsby-theme-showcase",
3
- "version": "1.0.90",
3
+ "version": "1.0.91",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
package/src/components/header.js CHANGED
@@ -24,7 +24,6 @@ export default ({
24
24
  setMenuOpen,
25
25
  styles,
26
26
  menuOpen,
27
- nav,
28
27
  menuList,
29
28
  svgLogo,
30
29
  button,
@@ -42,36 +41,27 @@ export default ({
42
41
  alignItems: `center`,
43
42
  }}
44
43
  >
45
- {!menuOpen ? (
46
- <button
47
- title="Toggle Menu"
48
- onClick={(e) => {
49
- setMenuOpen(!menuOpen)
50
- // if (!props.menuOpen) return props.setMenuOpen(!props.menuOpen)
51
- if (!nav.current) return
52
- const navLink = nav.current.querySelector("a")
53
- if (navLink) navLink.focus()
54
- }}
55
- sx={{
56
- appearance: "none",
57
- bg: "transparent",
58
- border: 0,
59
- color: "text",
60
- display: ["initial", "initial", "none"],
61
- fontFamily: "inherit",
62
- fontSize: 24,
63
- p: 0,
64
- m: 0,
65
- ":focus": {
66
- outline: "none",
67
- },
68
- }}
69
- >
70
- <Burger />
71
- </button>
72
- ) : (
44
+ <button
45
+ title="Toggle Menu"
46
+ onClick={() => setMenuOpen(!menuOpen)}
47
+ sx={{
48
+ appearance: "none",
49
+ bg: "transparent",
50
+ border: 0,
51
+ color: "text",
52
+ display: ["initial", "initial", "none"],
53
+ fontFamily: "inherit",
54
+ fontSize: 24,
55
+ p: 0,
56
+ m: 0,
57
+ ":focus": {
58
+ outline: "none",
59
+ },
60
+ }}
61
+ >
73
62
  <Burger />
74
- )}
63
+ </button>
64
+
75
65
  <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
76
66
  {svgLogo}
77
67
  </Link>
package/src/components/layout.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import React, { useState, useRef } from "react"
2
+ import { useState } from "react"
3
3
  import { jsx, Styled } from "theme-ui"
4
4
  import { Global } from "@emotion/core"
5
5
  import { Helmet } from "react-helmet"
@@ -11,7 +11,6 @@ import Sidebar from "./sidebar"
11
11
 
12
12
  const Layout = ({ header, main, children }) => {
13
13
  const [menuOpen, setMenuOpen] = useState(false)
14
- const nav = useRef(null)
15
14
 
16
15
  return (
17
16
  <Styled.root>
@@ -29,27 +28,9 @@ const Layout = ({ header, main, children }) => {
29
28
  <html lang="en" />
30
29
  </Helmet>
31
30
 
32
- <Header
33
- styles={header}
34
- menuOpen={menuOpen}
35
- setMenuOpen={setMenuOpen}
36
- nav={nav}
37
- />
31
+ <Header styles={header} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
38
32
 
39
- <div
40
- ref={nav}
41
- onFocus={(e) => {
42
- setMenuOpen(true)
43
- }}
44
- onBlur={(e) => {
45
- setMenuOpen(false)
46
- }}
47
- onClick={(e) => {
48
- setMenuOpen(false)
49
- }}
50
- >
51
- <Sidebar open={menuOpen} />
52
- </div>
33
+ <Sidebar open={menuOpen} />
53
34
 
54
35
  <div
55
36
  sx={{
package/src/components/nav-link.js CHANGED
@@ -1,32 +1,41 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { jsx } from "theme-ui"
4
3
  import { Link } from "gatsby"
5
- import isAbsoluteURL from "is-absolute-url"
6
-
7
- export default ({ href, type = "basic", ...props }) => {
8
- const isExternal = isAbsoluteURL(href || "")
9
- if (isExternal) {
4
+ // Since DOM elements <a> cannot receive activeClassName
5
+ // and partiallyActive, destructure the prop here and
6
+ // pass it only to GatsbyLink
7
+ const NavLink = ({ type = "basic", children, to, ...props }) => {
8
+ // Tailor the following test to your environment.
9
+ // This example assumes that any internal link (intended for Gatsby)
10
+ // will start with exactly one slash, and that anything else is external.
11
+ const internal = /^\/(?!\/)/.test(to)
12
+ // Use Gatsby Link for internal links, and <a> for others
13
+ if (internal) {
10
14
  return (
11
- <a
12
- href={href}
13
- sx={props.styles}
14
- target="_blank"
15
- rel="noopener noreferrer"
15
+ <Link
16
+ {...props}
17
+ to={to}
18
+ sx={{
19
+ variant: `links.${type}`,
20
+ }}
21
+ activeClassName="active"
16
22
  >
17
- {props}
18
- </a>
23
+ {children}
24
+ </Link>
19
25
  )
20
26
  }
21
- const to = props.to || href
22
27
  return (
23
- <Link
28
+ <a
29
+ href={to}
30
+ target="_blank"
31
+ rel="noopener noreferrer"
24
32
  {...props}
25
- to={to}
26
33
  sx={{
27
34
  variant: `links.${type}`,
28
35
  }}
29
- activeClassName="active"
30
- />
36
+ >
37
+ {children}
38
+ </a>
31
39
  )
32
40
  }
41
+ export default NavLink