Henry-Hiles/movie-react-app
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

topbar improvements

Browse source
This commit is contained in:
Henry Hiles 2023-03-12 14:12:45 -04:00
parent 87ca027277
commit e4821889d2
2 changed files with 66 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/TopBar.jsx
View file

@ -3,46 +3,46 @@ import { Link } from "react-router-dom"
import styles from "styles/TopBar.module.css" import styles from "styles/TopBar.module.css"
const TopBar = ({ search, setSearch, absolute }) => { const TopBar = ({ search, setSearch, absolute }) => {
const [width, setWidth] = useState(window.innerWidth) const [width, setWidth] = useState(window.innerWidth)
useEffect(() => { useEffect(() => {
const handleResize = () => setWidth(window.innerWidth) 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 = ( const Search = (
<input <input
type="text" type="text"
className={styles.Search} className={styles.Search}
value={search} value={search}
autoFocus autoFocus
placeholder="Search for movies..." placeholder="Search for movies..."
onChange={({ target }) => setSearch(target.value)} onChange={({ target }) => setSearch(target.value)}
/> />
) )
return ( return (
<div <div
className={`${styles.Container} ${ className={`${styles.Container} ${
absolute && width > 1000 ? styles.Absolute : "" absolute ? styles.Absolute : ""
} ${setSearch ? styles.HasSearch : ""}`} } ${setSearch ? styles.HasSearch : ""}`}
> >
<Link to="/"> <Link to="/" className={styles.Title}>
<h1 className={styles.Title}>React Movie Finder</h1> <h1>React Movie Finder</h1>
</Link> </Link>
{setSearch && width > 1000 && Search} {setSearch && width > 1000 && Search}
<Link to="/ratings" className={styles.Ratings}> <Link to="/ratings" className={styles.Ratings}>
<h1>Your ratings</h1> <h1>Your ratings</h1>
</Link> </Link>
{setSearch && width <= 1000 && Search} {setSearch && width <= 1000 && Search}
</div> </div>
) )
} }
export default TopBar export default TopBar

69
src/styles/TopBar.module.css
View file

@ -1,57 +1,56 @@
.Container.HasSearch { .Container.HasSearch {
--cols: 3; --cols: 3;
} }
.Container { .Container {
display: grid; display: grid;
width: 100%; width: 100%;
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 20px 30px; padding: 20px 30px;
gap: 10px; gap: 10px;
background: #00000050; background: #00000050;
color: white; color: white;
} }
.Container h1 { .Container h1 {
margin: 0; margin: 0;
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
.Container { .Container {
grid-template-columns: repeat(var(--cols, 2), 1fr); grid-template-columns: repeat(var(--cols, 2), 1fr);
} }
.Ratings { .Ratings {
justify-self: end; justify-self: end;
} }
.Search { .Search {
justify-self: center; justify-self: center;
width: 20em; width: 20em;
} }
} }
.Container.Absolute { .Container.Absolute {
position: absolute; position: absolute;
background: linear-gradient(to bottom, #00000090, #00000010); background: linear-gradient(to bottom, #00000099, #00000050);
} }
.Container a { .Container a {
color: white; color: white;
text-decoration: none;
}
.Container a::hover {
text-decoration: underline;
} }
.Search { .Search {
padding: 0.5em; padding: 0.5em;
border: 2px solid white; border: 2px solid white;
color: white; color: white;
font: inherit; font: inherit;
width: 100%; width: 100%;
height: 3em; height: 3em;
border-radius: 10px; border-radius: 10px;
background-color: var(--secondary); background-color: var(--secondary);
}
.Title {
text-decoration: none;
} }