feat: add the Sidebar Modal project to the home app

Author: DinaTaklit

src/App.js

@@ -9,7 +9,7 @@ import Menu from './projects/5.Menu'
 import Tabs from './projects/6.Tabs'
 import Slider from './projects/7.Slider'
 import Navbar from './projects/8.Navbar'
-// import SidebarModal from './projects/9.Sidebar-Modal'
+import SidebarModal from './projects/9.Sidebar-Modal'
 // import StripeMenu from './projects/10.StripeMenu'
 // import Cart from './projects/11.Cart'
 // import CartUseReducer from './projects/12.CartUseReducer'
@@ -28,8 +28,8 @@ function App() {
  <Route path="/tabs" component={Tabs}/>
  <Route path="/slider" component={Slider}/>
  <Route path="/navbar" component={Navbar}/>
- {/* <Route path="/sidebar-modal" component={SidebarModal}/>
- <Route path="/stripe-menu" component={StripeMenu}/>
+ <Route path="/sidebar-modal" component={SidebarModal}/>
+ {/* <Route path="/stripe-menu" component={StripeMenu}/>
  <Route path="/cart" component={Cart}/>
  <Route path="/cart-use-reducer" component={CartUseReducer}/> */}
  </Switch>

src/data.js

@@ -39,6 +39,11 @@ const projects = [
  image: './images/projects_thumb/Navbar.png',
  link: '/navbar'
  },
+ {
+ title: 'Sidebar Modal',
+ image: './images/projects_thumb/SidebarModal.png',
+ link: '/sidebar-modal'
+ },
 
 ];
 export default projects;

src/projects/9.Sidebar-Modal/index.js

@@ -1,15 +1,17 @@
 import Modal from './Modal'
 import Sidebar from './Sidebar'
 import Home from './Home'
-import './index.css'
+import './index.scss'
 import { AppProvider } from './context';
 function Index() {
  return (
- <AppProvider>
- <Home />
- <Modal />
- <Sidebar />
- </AppProvider>
+ <div className="sidebar-modal">
+ <AppProvider>
+ <Home />
+ <Modal />
+ <Sidebar />
+ </AppProvider>
+ </div>
  )
 }
 

src/projects/9.Sidebar-Modal/index.css renamed to src/projects/9.Sidebar-Modal/index.scss

@@ -49,7 +49,7 @@ Variables
  Global Styles
  ===============
  */
- 
+ .sidebar-modal{
  *,
  ::after,
  ::before {
@@ -325,4 +325,5 @@ Variables
  .sidebar {
  width: 400px;
  }
- }
+ }
+}