From c79600603560581d7a15f46437a97362c56d6c56 Mon Sep 17 00:00:00 2001
From: Devesh <rockdev1234560@gmail.com>
Date: Sun, 4 Apr 2021 20:37:42 +0530
Subject: [PATCH 1/2] initialise the navbar styles and fix other styles

---
 .../MapContainer/Controls/zoomControl.tsx     | 21 +++++++++++++++++++
 src/components/MapContainer/NavBar.tsx        | 21 +++++++++++++++++++
 src/views/App.tsx                             |  4 ++--
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MapContainer/Controls/zoomControl.tsx
 create mode 100644 src/components/MapContainer/NavBar.tsx

diff --git a/src/components/MapContainer/Controls/zoomControl.tsx b/src/components/MapContainer/Controls/zoomControl.tsx
new file mode 100644
index 0000000..689c9c7
--- /dev/null
+++ b/src/components/MapContainer/Controls/zoomControl.tsx
@@ -0,0 +1,21 @@
+import React, { useContext, useEffect } from 'react'
+import Zoom from 'ol/control/Zoom'
+import MapContext from '../Map/MapContext'
+
+const ZoomControl: React.FC = () => {
+  const { map } = useContext(MapContext)
+
+  useEffect(() => {
+    if (!map.controls) return
+
+    const zoomControl = new Zoom({})
+
+    map.controls.push(zoomControl)
+    // eslint-disable-next-line consistent-return
+    return () => map.controls.remove(zoomControl)
+  }, [map])
+
+  return null
+}
+
+export default ZoomControl
diff --git a/src/components/MapContainer/NavBar.tsx b/src/components/MapContainer/NavBar.tsx
new file mode 100644
index 0000000..2d82a8b
--- /dev/null
+++ b/src/components/MapContainer/NavBar.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Nav: React.FC = () => {
+  return (
+    <div
+      style={{
+        backgroundColor: '#333',
+        marginBottom: '10px',
+        paddingBottom: '10px',
+      }}
+      className="container"
+    >
+      <h1 style={{ display: 'flex', justifyContent: 'center', color: 'white' }}>
+        {' '}
+        (Test OL) Orca Map
+      </h1>
+    </div>
+  )
+}
+
+export default Nav
diff --git a/src/views/App.tsx b/src/views/App.tsx
index 30eb70c..5a9fd9c 100644
--- a/src/views/App.tsx
+++ b/src/views/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-
+import Nav from '../components/MapContainer/NavBar'
 import MapContainer from '../components/MapContainer/MapContainer'
 
 const App: React.FC = () => {
   return (
     <div className="App">
-      <h1 style={{ textAlign: 'center' }}> (test OL) Orca Map</h1>
+      <Nav />
       <MapContainer />
     </div>
   )

From a20c79d9faaa538ac2d2556bf7fbd88851609ae4 Mon Sep 17 00:00:00 2001
From: Devesh <rockdev1234560@gmail.com>
Date: Sun, 4 Apr 2021 20:41:48 +0530
Subject: [PATCH 2/2] removed unneccessary file

---
 .../MapContainer/Controls/zoomControl.tsx     | 21 -------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 src/components/MapContainer/Controls/zoomControl.tsx

diff --git a/src/components/MapContainer/Controls/zoomControl.tsx b/src/components/MapContainer/Controls/zoomControl.tsx
deleted file mode 100644
index 689c9c7..0000000
--- a/src/components/MapContainer/Controls/zoomControl.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import Zoom from 'ol/control/Zoom'
-import MapContext from '../Map/MapContext'
-
-const ZoomControl: React.FC = () => {
-  const { map } = useContext(MapContext)
-
-  useEffect(() => {
-    if (!map.controls) return
-
-    const zoomControl = new Zoom({})
-
-    map.controls.push(zoomControl)
-    // eslint-disable-next-line consistent-return
-    return () => map.controls.remove(zoomControl)
-  }, [map])
-
-  return null
-}
-
-export default ZoomControl