Finished sidebar functionality.
This commit is contained in:
+44
-42
@@ -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}></button>
|
||||
<input className="search" type="search" placeholder=" Search" onChange={search}/>
|
||||
<button className="add-btn btn" onClick={() => setNewBox(true)}></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)}></button>
|
||||
<button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}></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}></button>
|
||||
<input className="search" type="search" placeholder=" Search" onChange={search}/>
|
||||
<button className="add-btn btn" onClick={() => setNewBox(true)}></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)}></button>
|
||||
<button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}></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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user