refactor: simplify the menu-container

This commit is contained in:
kKaskak 2024-01-03 16:12:22 +02:00
parent b7e77417b4
commit 6e73d56da2
2 changed files with 54 additions and 66 deletions

View file

@ -127,15 +127,8 @@ const SearchBar = React.memo(({ className, query, active }) => {
</Button>
}
{
historyOpen ?
historyOpen && searchHistory?.items?.length > 0 || localSearch?.items?.length > 0 ?
<div className={styles['menu-container']}>
{
localSearch.items.length === 0 && searchHistory.items.length === 0 ?
<div className={styles['label']}>{ t('Start typing ...') }</div>
:
null
}
<div className={styles['content']}>
{
searchHistory?.items?.length > 0 ?
<div className={styles['items']}>
@ -174,7 +167,6 @@ const SearchBar = React.memo(({ className, query, active }) => {
null
}
</div>
</div>
:
null
}

View file

@ -51,12 +51,18 @@
.menu-container {
position: absolute;
width: 100%;
height: auto;
top: 100%;
left: 0;
width: 100%;
height: auto;
z-index: 10;
padding: 1rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
background-color: var(--modal-background-color);
border-radius: var(--border-radius);
@ -83,15 +89,6 @@
}
}
.content {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
.items {
width: 100%;
margin: 0 auto;
@ -117,5 +114,4 @@
}
}
}
}
}