Add NavigationListItem component

1 files changed, 24 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx
new file mode 100644
index 0000000000..c03867d6a6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { ListItem, ListItemProps } from '../lib/components/list-item';
+import { useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
+
+export type NavigationListItemProps = ListItemProps & {
+  to: RoutePath;
+};
+
+export function NavigationListItem({ to, children, ...props }: NavigationListItemProps) {
+  const history = useHistory();
+  const navigate = React.useCallback(() => history.push(to), [history, to]);
+
+  return (
+    <ListItem {...props}>
+      <ListItem.Item>
+        <ListItem.Trigger onClick={navigate}>
+          <ListItem.Content>{children}</ListItem.Content>
+        </ListItem.Trigger>
+      </ListItem.Item>
+    </ListItem>
+  );
+}