move sidebar

src/App.tsx

@@ -34,15 +34,15 @@ function App() {
   useEffect(() => {
     setLoadedMovies(movies.length)
     if (movies[0].backdrop_path) {
-      setBackdrop(tmdb.makeBgImgUrl(movies[0].backdrop_path))
+      const bgString = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), " + tmdb.makeBgImgUrl(movies[0].backdrop_path)
+      setBackdrop(bgString)
     }
   }, [movies])
   return (
     <>
-      <header>
-        <h1>Movie Explorer</h1>
-      </header>
-      <main style={{ backgroundImage: backdrop }}>
+      <div className='main-container' style={{ backgroundImage: backdrop }}>
+        <main >
+          <Sidebar movie={chosenMovie} />
           <div id="movie-wall-container">
             {loadedMovies === movies.length ?
               <MovieWall movies={movies}
@@ -52,9 +52,8 @@ function App() {
                 setLoadedMovies={setLoadedMovies}
               />
               : "LOADING  " + loadedMovies} </div>
-        <Sidebar movie={chosenMovie} />
         </main>
-
+      </div>
     </>
   )
 }