Finished sidebar functionality.

This commit is contained in:
Daniel
2022-06-16 01:02:07 +04:30
parent ffd044c2d2
commit 781b64548a
4 changed files with 51 additions and 49 deletions
+44 -42
View File
@@ -111,20 +111,50 @@ function App() {
return (
<div className="App">
<SideBar tags={tags} handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
<div className='content'>
<div className="head">
<button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
<input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
<button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
<button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
</div>
{numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
<button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
<button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
{numberOfResults === 0 ? <NoResults /> : null}
{sortBox ? <Sort
sortBy={sortByFunc}
onExit={exitSorting}
/> : null}
{filterBox ? <Filters
nameChecked={nameChecked}
handleNameCheckbox={handleNameCheckbox}
descriptionChecked={descriptionChecked}
handleDescriptionCheckbox={handleDescriptionCheckbox}
tagsChecked={tagsChecked}
handleTagsCheckbox={handleTagsCheckbox}
onExit={exitFilter}
/> : null}
{newBox ? <AddItem
SetLoader={SetLoader}
onExit={exitAdding}
reFetch={fetchData}
lightMode={lightMode}
tags={() => tags}
/> : null}
{loader ? <Loader lightMode={lightMode} /> : null}
</div>
<Routes>
<Route path="/" element={<div className='content'>
<div className="head">
<button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
<input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
<button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
<button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
</div>
{numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
<button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
<button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
<Route path="/" element={<div className='content'>
<List
lightMode={lightMode}
SetLoader={SetLoader}
@@ -132,33 +162,6 @@ function App() {
tags={tags}
reFetch={fetchData}
/>
{numberOfResults === 0 ? <NoResults /> : null}
{sortBox ? <Sort
sortBy={sortByFunc}
onExit={exitSorting}
/> : null}
{filterBox ? <Filters
nameChecked={nameChecked}
handleNameCheckbox={handleNameCheckbox}
descriptionChecked={descriptionChecked}
handleDescriptionCheckbox={handleDescriptionCheckbox}
tagsChecked={tagsChecked}
handleTagsCheckbox={handleTagsCheckbox}
onExit={exitFilter}
/> : null}
{newBox ? <AddItem
SetLoader={SetLoader}
onExit={exitAdding}
reFetch={fetchData}
lightMode={lightMode}
tags={() => tags}
/> : null}
{loader ? <Loader lightMode={lightMode} /> : null}
</div>} />
<Route path="tags/:tagId" element={<Tags
@@ -167,8 +170,7 @@ function App() {
data={filteredData}
tags={tags}
reFetch={fetchData}
/>} />
/>} />
</Routes>
</div>
);