feat: add the menu to the home app

Author: DinaTaklit

src/App.js

@@ -5,7 +5,7 @@ import BirthdayReminder from './projects/01-birthday-reminder'
 import ToursApp from './projects/2.Tours'
 import Reviews from './projects/3.Reviews'
 import Accordion from './projects/4.Accordion'
-// import Menu from './projects/5.Menu'
+import Menu from './projects/5.Menu'
 // import Tabs from './projects/6.Tabs'
 // import Slider from './projects/7.Slider'
 // import Navbar from './projects/8.Navbar'
@@ -24,8 +24,8 @@ function App() {
  <Route path="/tours" component={ToursApp}/>
  <Route path="/reviews" component={Reviews}/>
  <Route path="/accordion" component={Accordion}/>
- {/* <Route path="/menu" component={Menu}/>
- <Route path="/tabs" component={Tabs}/>
+ <Route path="/menu" component={Menu}/>
+ {/* <Route path="/tabs" component={Tabs}/>
  <Route path="/slider" component={Slider}/>
  <Route path="/navbar" component={Navbar}/>
  <Route path="/sidebar-modal" component={SidebarModal}/>

src/data.js

@@ -19,6 +19,11 @@ const projects = [
  image: './images/projects_thumb/Accordion.png',
  link: '/accordion'
  },
+ {
+ title: 'Menu',
+ image: './images/projects_thumb/Menu.png',
+ link: '/menu'
+ },
 
 ];
 export default projects;

src/projects/5.Menu/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import './index.css'
+import './index.scss'
 import Menu from './Menu';
 import Categories from './Categories';
 import items from './data';
@@ -20,16 +20,21 @@ function Index() {
  setMenuItems(newItems)
  }
 
- return (<main>
- <section className="menu section">
- <div className="title">
- <h2>Our Menu</h2>
- <div className="underline"></div>
- </div>
- <Categories categories={categories} filterItems={filterItems}/>
- <Menu items={menuItems}/>
- </section>
-</main>)
+ return (
+ <div className="menu">
+ <main>
+ <section className="menu section">
+ <div className="title">
+ <h2>Our Menu</h2>
+ <div className="underline"></div>
+ </div>
+ <Categories categories={categories} filterItems={filterItems}/>
+ <Menu items={menuItems}/>
+ </section>
+ </main>
+ </div>
+
+ )
 }
 
 export default Index;

src/projects/5.Menu/index.css renamed to src/projects/5.Menu/index.scss

@@ -46,6 +46,7 @@ Variables
  --max-width: 1170px;
  --fixed-width: 620px;
  }
+.menu{
  /*
  =============== 
  Global Styles
@@ -233,4 +234,5 @@ Variables
  .photo {
  height: 150px;
  }
- }
+ }
+}