diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..dd15429 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ +evening \ No newline at end of file diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 7de8cfc..e18954e 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -2,13 +2,17 @@ import React from 'react'; import { Wrapper } from './styles'; import { useHistory } from 'react-router-dom'; import SearchBar from '../SearchBar'; +import Logo from '../../assets/logo.svg'; const NavBar: React.FC = () => { const history = useHistory(); return ( -

history.push('/home')}>Weather

+
+ Logo +

history.push('/home')}>Weather

+
); diff --git a/src/components/NavBar/styles.ts b/src/components/NavBar/styles.ts index 7ea7710..2da4095 100644 --- a/src/components/NavBar/styles.ts +++ b/src/components/NavBar/styles.ts @@ -6,8 +6,20 @@ export const Wrapper = styled.nav` align-items: center; padding: 0.5rem 0rem; - h1 { - cursor: pointer; - justify-self: flex-start; + .logo { + display: flex; + flex-direction: row; + align-items: center; + + img { + width: 36px; + height: 36px; + } + + h1 { + margin-left: 0.5rem; + cursor: pointer; + justify-self: flex-start; + } } `;