diff --git a/src/renderer/index.html b/src/renderer/index.html index c38d404..74bcd68 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -9,6 +9,7 @@ content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" /> + diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 8195a7e..506f4c8 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -1,16 +1,41 @@ -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import './assets/styles.css' import AddressBar from './components/AddressBar' import useWindowsDimensions from './hooks/useWindowsDimensions' import Splash from './components/Splash' +import NavigationBar from './feature/navigation/NavigationBar' +import TitleBar from './components/TitleBar' +import { WebviewTag } from 'electron' function App(): JSX.Element { const [url, setUrl] = useState('') const windowDimensions = useWindowsDimensions() - const webviewRef = useRef(null) + const webviewRef = useRef(null) + const [pageTitle, setPageTitle] = useState('') + useEffect(() => { + if (webviewRef.current) { + webviewRef.current.addEventListener('did-navigate', (event) => { + console.log(event) + setUrl(event.url) + }) + + // Get the title from the webview + webviewRef.current.executeJavaScript(`document.title;`, (title) => { + setPageTitle(title) + }) + } + + return () => { + if (webviewRef.current) { + webviewRef.current.removeEventListener('did-navigate', () => {}) + } + } + }, []) return ( <> + + {url ? ( > }): JSX.Element => { return ( - +
+

Address

+ setUrl(e.target.value)} + /> +
) } diff --git a/src/renderer/src/components/TitleBar.tsx b/src/renderer/src/components/TitleBar.tsx new file mode 100644 index 0000000..73c438d --- /dev/null +++ b/src/renderer/src/components/TitleBar.tsx @@ -0,0 +1,9 @@ +const TitleBar = ({ pageTitle }: { pageTitle: string }): JSX.Element => { + return ( +
+ {pageTitle} +
+ ) +} + +export default TitleBar diff --git a/src/renderer/src/feature/navigation/NavigationBar.tsx b/src/renderer/src/feature/navigation/NavigationBar.tsx new file mode 100644 index 0000000..7255825 --- /dev/null +++ b/src/renderer/src/feature/navigation/NavigationBar.tsx @@ -0,0 +1,37 @@ +import goBack from './assets/go-previous.svg' +import goForward from './assets/go-next.svg' +import history from './assets/recent.svg' +const NavigationBar = ({ + webViewRef +}: { + webViewRef: React.RefObject +}): JSX.Element => { + const handleGoBack = (): void => webViewRef.current?.goBack() + + const handleGoForward = (): void => webViewRef.current?.goForward() + + return ( +
+
+ + {webViewRef.current && webViewRef.current.canGoForward() && ( + + )} +
+ + +
+ ) +} + +export default NavigationBar diff --git a/src/renderer/src/feature/navigation/assets/go-next.svg b/src/renderer/src/feature/navigation/assets/go-next.svg new file mode 100644 index 0000000..9a065f2 --- /dev/null +++ b/src/renderer/src/feature/navigation/assets/go-next.svg @@ -0,0 +1,150 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/src/feature/navigation/assets/go-previous.svg b/src/renderer/src/feature/navigation/assets/go-previous.svg new file mode 100644 index 0000000..e4f831b --- /dev/null +++ b/src/renderer/src/feature/navigation/assets/go-previous.svg @@ -0,0 +1,150 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/src/feature/navigation/assets/recent.svg b/src/renderer/src/feature/navigation/assets/recent.svg new file mode 100644 index 0000000..45a0b5a --- /dev/null +++ b/src/renderer/src/feature/navigation/assets/recent.svg @@ -0,0 +1,259 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + +