diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx
index c0c789c..e77fb4c 100644
--- a/src/components/TopBar.jsx
+++ b/src/components/TopBar.jsx
@@ -3,46 +3,46 @@ import { Link } from "react-router-dom"
import styles from "styles/TopBar.module.css"
const TopBar = ({ search, setSearch, absolute }) => {
- const [width, setWidth] = useState(window.innerWidth)
+ const [width, setWidth] = useState(window.innerWidth)
- useEffect(() => {
- const handleResize = () => setWidth(window.innerWidth)
+ useEffect(() => {
+ const handleResize = () => setWidth(window.innerWidth)
- window.addEventListener("resize", handleResize)
+ window.addEventListener("resize", handleResize)
- return () => window.removeEventListener("resize", handleResize)
- }, [])
+ return () => window.removeEventListener("resize", handleResize)
+ }, [])
- const Search = (
- setSearch(target.value)}
- />
- )
+ const Search = (
+ setSearch(target.value)}
+ />
+ )
- return (
-
1000 ? styles.Absolute : ""
- } ${setSearch ? styles.HasSearch : ""}`}
- >
-
-
React Movie Finder
-
+ return (
+
+
+
React Movie Finder
+
- {setSearch && width > 1000 && Search}
+ {setSearch && width > 1000 && Search}
-
- Your ratings
-
+
+ Your ratings
+
- {setSearch && width <= 1000 && Search}
-
- )
+ {setSearch && width <= 1000 && Search}
+
+ )
}
export default TopBar
diff --git a/src/styles/TopBar.module.css b/src/styles/TopBar.module.css
index 9f477de..b39bf5d 100644
--- a/src/styles/TopBar.module.css
+++ b/src/styles/TopBar.module.css
@@ -1,57 +1,56 @@
.Container.HasSearch {
- --cols: 3;
+ --cols: 3;
}
.Container {
- display: grid;
- width: 100%;
- grid-template-columns: 1fr;
- padding: 20px 30px;
- gap: 10px;
- background: #00000050;
- color: white;
+ display: grid;
+ width: 100%;
+ grid-template-columns: 1fr;
+ padding: 20px 30px;
+ gap: 10px;
+ background: #00000050;
+ color: white;
}
.Container h1 {
- margin: 0;
+ margin: 0;
}
@media (min-width: 1000px) {
- .Container {
- grid-template-columns: repeat(var(--cols, 2), 1fr);
- }
+ .Container {
+ grid-template-columns: repeat(var(--cols, 2), 1fr);
+ }
- .Ratings {
- justify-self: end;
- }
+ .Ratings {
+ justify-self: end;
+ }
- .Search {
- justify-self: center;
- width: 20em;
- }
+ .Search {
+ justify-self: center;
+ width: 20em;
+ }
}
.Container.Absolute {
- position: absolute;
- background: linear-gradient(to bottom, #00000090, #00000010);
+ position: absolute;
+ background: linear-gradient(to bottom, #00000099, #00000050);
}
.Container a {
- color: white;
- text-decoration: none;
-}
-
-.Container a::hover {
- text-decoration: underline;
+ color: white;
}
.Search {
- padding: 0.5em;
- border: 2px solid white;
- color: white;
- font: inherit;
- width: 100%;
- height: 3em;
- border-radius: 10px;
- background-color: var(--secondary);
+ padding: 0.5em;
+ border: 2px solid white;
+ color: white;
+ font: inherit;
+ width: 100%;
+ height: 3em;
+ border-radius: 10px;
+ background-color: var(--secondary);
+}
+
+.Title {
+ text-decoration: none;
}