From 562f91f61cdab991112f6f92d840fcb09214c26a Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Wed, 8 May 2024 16:50:49 +0200
Subject: [PATCH] move sidebar

---
 src/App.tsx | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4f71bf2..62e1762 100644
--- a/src/App.tsx
+++ b/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>
-        <h1>Movie Explorer</h1>
-      </header>
-      <main style={{ backgroundImage: backdrop }}>
-        <div id="movie-wall-container">
-          {loadedMovies === movies.length ?
-            <MovieWall movies={movies}
-              setMovies={setMovies}
-              config={config}
-              setChosenMovie={setChosenMovie}
-              setLoadedMovies={setLoadedMovies}
-            />
-            : "LOADING  " + loadedMovies} </div>
-        <Sidebar movie={chosenMovie} />
-      </main>
-
+      <div className='main-container' style={{ backgroundImage: backdrop }}>
+        <main >
+          <Sidebar movie={chosenMovie} />
+          <div id="movie-wall-container">
+            {loadedMovies === movies.length ?
+              <MovieWall movies={movies}
+                setMovies={setMovies}
+                config={config}
+                setChosenMovie={setChosenMovie}
+                setLoadedMovies={setLoadedMovies}
+              />
+              : "LOADING  " + loadedMovies} </div>
+        </main>
+      </div>
     </>
   )
 }