move sidebar

src/App.tsx

@@ -34,27 +34,26 @@ 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>
+      <div className='main-container' style={{ backgroundImage: backdrop }}>
-        <h1>Movie Explorer</h1>
+        <main >
-      </header>
+          <Sidebar movie={chosenMovie} />
-      <main style={{ backgroundImage: backdrop }}>
+          <div id="movie-wall-container">
-        <div id="movie-wall-container">
+            {loadedMovies === movies.length ?
-          {loadedMovies === movies.length ?
+              <MovieWall movies={movies}
-            <MovieWall movies={movies}
+                setMovies={setMovies}
-              setMovies={setMovies}
+                config={config}
-              config={config}
+                setChosenMovie={setChosenMovie}
-              setChosenMovie={setChosenMovie}
+                setLoadedMovies={setLoadedMovies}
-              setLoadedMovies={setLoadedMovies}
+              />
-            />
+              : "LOADING  " + loadedMovies} </div>
-            : "LOADING  " + loadedMovies} </div>
+        </main>
-        <Sidebar movie={chosenMovie} />
+      </div>
-      </main>
-
     </>
   )
 }