diff --git a/app/components/NavLink.tsx b/app/components/NavLink.tsx
index 6d8adc274..311f8e180 100644
--- a/app/components/NavLink.tsx
+++ b/app/components/NavLink.tsx
@@ -14,9 +14,11 @@ function NavLinkWithChildrenFunc(
) {
return (
- {({ match }) => (
+ {({ match, location }) => (
- {children ? children(match) : null}
+ {children
+ ? children(rest.isActive ? rest.isActive(match, location) : match)
+ : null}
)}
diff --git a/app/scenes/Document/components/References.tsx b/app/scenes/Document/components/References.tsx
index 008999aa6..6c4b88c33 100644
--- a/app/scenes/Document/components/References.tsx
+++ b/app/scenes/Document/components/References.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
import * as React from "react";
import { Trans } from "react-i18next";
import { useLocation } from "react-router-dom";
+import styled from "styled-components";
import Document from "~/models/Document";
import Fade from "~/components/Fade";
import Tab from "~/components/Tab";
@@ -29,6 +30,7 @@ function References({ document }: Props) {
const showBacklinks = !!backlinks.length;
const showChildDocuments = !!children.length;
const isBacklinksTab = location.hash === "#backlinks" || !showChildDocuments;
+ const height = Math.max(backlinks.length, children.length) * 40;
return showBacklinks || showChildDocuments ? (
@@ -40,35 +42,56 @@ function References({ document }: Props) {
)}
{showBacklinks && (
isBacklinksTab}>
- Referenced by
+ Backlinks
)}
- {isBacklinksTab
- ? backlinks.map((backlinkedDocument) => (
-
- ))
- : children.map((node) => {
- // If we have the document in the store already then use it to get the extra
- // contextual info, otherwise the collection node will do (only has title and id)
- const document = documents.get(node.id);
- return (
+
+ {showBacklinks && (
+
+ {backlinks.map((backlinkedDocument) => (
- );
- })}
+ ))}
+
+ )}
+ {showChildDocuments && (
+
+ {children.map((node) => {
+ // If we have the document in the store already then use it to get the extra
+ // contextual info, otherwise the collection node will do (only has title and id)
+ const document = documents.get(node.id);
+ return (
+
+ );
+ })}
+
+ )}
+
) : null;
}
+const Content = styled.div`
+ position: relative;
+`;
+
+const List = styled.div<{ $active: boolean }>`
+ visibility: ${({ $active }) => ($active ? "visible" : "hidden")};
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+`;
+
export default observer(References);
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 18e9e5e36..804cd5281 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -150,7 +150,6 @@
"Starred documents could not be loaded": "Starred documents could not be loaded",
"Starred": "Starred",
"Show more": "Show more",
- "Show less": "Show less",
"Toggle sidebar": "Toggle sidebar",
"Delete {{ documentName }}": "Delete {{ documentName }}",
"Return to App": "Back to App",
@@ -258,7 +257,6 @@
"Move": "Move",
"Permanently delete": "Permanently delete",
"Enable embeds": "Enable embeds",
- "Disable embeds": "Disable embeds",
"Full width": "Full width",
"Move {{ documentName }}": "Move {{ documentName }}",
"Permanently delete {{ documentName }}": "Permanently delete {{ documentName }}",
@@ -401,7 +399,7 @@
"Deleted by {{userName}}": "Deleted by {{userName}}",
"Observing {{ userName }}": "Observing {{ userName }}",
"Nested documents": "Nested documents",
- "Referenced by": "Referenced by",
+ "Backlinks": "Backlinks",
"Anyone with the link <1>1>can view this document": "Anyone with the link <1>1>can view this document",
"Share": "Share",
"Share this document": "Share this document",