Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

done searchbar but not final

Browse Source
This commit is contained in:
benzbarquilla
2026-03-31 14:49:20 +08:00
parent 02d53f69ad
commit a4675c843d
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
View File

@@ -5,13 +5,13 @@ import SearchIcon from "../icons/search";
const MobileSearchBar = (props) => { const MobileSearchBar = (props) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<form className={styles.searchBarContainer}> <form className={`${styles.searchBarContainer} ${open ? styles.open : ""}`}>
<input type="text" placeholder="Search" className={styles.searchBar} />
<div <div
className={`${styles.searchBarWrapper} ${open ? styles.open : ""}`} className={styles.searchBtn}
onClick={() => setOpen((open) => !open)} onClick={() => setOpen((open) => !open)}
> >
<input type="text" placeholder="Search" className={styles.searchBar} /> <SearchIcon />
<SearchIcon className={styles.searchIcon} />
</div> </div>
</form> </form>
); );

28
frontend/src/app/components/mobileSearchBar/styles.module.css
View File

@@ -3,14 +3,16 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
align-self: stretch; align-self: stretch;
}
.searchBarWrapper {
position: relative; position: relative;
width: 100%; width: 100%;
border: 1px solid #31324a00; border: 1px solid #31324a00;
transition: width 0.35s ease; transition: width 0.35s ease;
} }
.searchBar:focus-within {
background: #292a36;
border-radius: 6px;
}
.open { .open {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -26,19 +28,21 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
opacity: 0; opacity: 0;
/* pointer-events: none; */
transition: opacity 0.35s ease; transition: opacity 0.35s ease;
outline: none; outline: none;
color: white; color: #85869b;
text-align: start;
font-family: Inter; font-family: Inter;
font-size: 1.18rem; font-size: 18px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
letter-spacing: -0.09px;
caret-color: #575bc7; caret-color: #575bc7;
} }
.searchBar::placeholder { .searchBar::placeholder {
color: #85869b; color: #85869b;
text-align: start;
font-family: Inter; font-family: Inter;
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
@@ -46,17 +50,19 @@
line-height: normal; line-height: normal;
letter-spacing: -0.09px; letter-spacing: -0.09px;
} }
.open > .searchBar { .open > .searchBar {
opacity: 1; /*show input when open*/ opacity: 1;
transition-delay: 0.1s;
} }
.searchIcon { .searchBtn {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 10px; left: 10px;
transform: translateY(-50%); transform: translateY(-40%);
pointer-events: none; /* so clicking the icon focuses input */ cursor: pointer;
color: #858699; color: #858699;
} }
.searchIcon:hover { .searchBtn:hover {
color: #959aff; color: #959aff;
} }