on master help sign in
docs: add dot
628d792Matilde Park
pages/docs/[...slug].js+11−5
@@ -35,23 +35,29 @@ const childPages = (thisLink, children, level = 0) => (
35
35
36const pageTree = (thisLink, tree, level = 0) => {
36const pageTree = (thisLink, tree, level = 0) => {
37 const router = useRouter();
37 const router = useRouter();
38− const firstCrumb = "/" + router.asPath.split("/").slice(1).join("/");
38+ const firstCrumb = "/" + router.asPath.split("/").slice(1, -1).join("/");
39
39
40− const thisPage = firstCrumb.includes(thisLink);
40+ const includesThisPage = firstCrumb.includes(thisLink);
41+ const isThisPage = firstCrumb === thisLink;
41− const [isOpen, toggleTree] = useState(thisPage);
42+ const [isOpen, toggleTree] = useState(includesThisPage);
43+
44+ console.log(thisLink);
45+ console.log(firstCrumb);
42
46
43 const activeClasses = classnames({
47 const activeClasses = classnames({
44 hidden: !isOpen,
48 hidden: !isOpen,
45 });
49 });
46
50
47 const headerClass = classnames({
51 const headerClass = classnames({
48− "text-gray": !thisPage,
52+ "text-gray": !isThisPage,
53+ dot: isThisPage,
49 });
54 });
50 return (
55 return (
51 <>
56 <>
52 <span
57 <span
53 className={
58 className={
54− "font-medium text-lg cursor-pointer hover:text-black " + headerClass
59+ "font-medium text-lg cursor-pointer hover:text-black relative " +
60+ headerClass
55 }
61 }
56 onClick={() => toggleTree(!isOpen)}
62 onClick={() => toggleTree(!isOpen)}
57 >
63 >
styles/globals.css+8
@@ -137,3 +137,11 @@ a:hover {
137 transform: translateX(100vw);
137 transform: translateX(100vw);
138 transition: transform 200ms;
138 transition: transform 200ms;
139}
139}
140+
141+.dot::before {
142+ content: "·";
143+ position: absolute;
144+ left: -16px;
145+ margin-top: -2px;
146+ font-size: 3rem;
147+}