Half done

src/App.tsx

@@ -2,16 +2,20 @@ import { BrowserRouter, Route, Routes } from 'react-router'
 import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder'
 import { Checkout } from './components/Checkout/Checkout'
 import { ContactData } from './components/ContactData/ContactData'
+import Layout from './components/layouts/Layout/Layout'
 
+// React Router V5 sample
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path='/' element={<BurgerBuilder />} />
+        <Route path='/' element={<Layout />}>
+          <Route index element={<BurgerBuilder />} />
           <Route path='/checkout' element={<Checkout />}>
             <Route path='contact-data' element={<ContactData />} />
             <Route path='test' element={<h1>TESTING</h1>} />
           </Route>
+        </Route>
         <Route path='*' element={<h1>Not found</h1>} />
       </Routes>
     </BrowserRouter>

src/components/Logo/Logo.module.css

+.Logo {
+    background-color: white;
+    padding: 8px;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 5px;
+}
+
+.Logo img {
+    height: 100%;
+}
\ No newline at end of file

src/components/Logo/Logo.tsx

+import styles from './Logo.module.css';
+import burgerLogo from '../../assets/images/burger-logo.png'
+
+const Logo = () => {
+    return (
+        <div className={styles.Logo}>
+            <img src={burgerLogo} alt="MyBurger" />
+        </div>
+    )
+};
+
+export default Logo;
\ No newline at end of file

src/components/NavigationMenu/NavigationMenu.module.css

+.NavigationMenu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    height: 100%;
+}
+
+.NavigationMenuItem {
+    margin: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.NavigationMenuItem a {
+    color: white;
+    height: 100%;
+    padding: 16px 10px;
+    border-bottom: 4px solid transparent;
+
+    text-decoration: none;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+}
+
+.NavigationMenuItem a:hover,
+.NavigationMenuItem a:active,
+.NavigationMenuItem a.active {
+    background-color: #8f5c2c;
+    border-bottom: 4px solid #40a4c8;
+    color: white;
+}

src/components/NavigationMenu/NavigationMenu.tsx

+import { NavLink } from "react-router-dom";
+import styles from './NavigationMenu.module.css';
+
+const NavigationMenu = () => {
+    return (
+        <ul className={styles.NavigationMenu}>
+            <li className={styles.NavigationMenuItem}>
+                <NavLink to="/">Burger Builder</NavLink>
+            </li>
+            <li className={styles.NavigationMenuItem}>
+                <NavLink to="/orders">Orders</NavLink>
+            </li>
+        </ul>
+    )
+};
+
+export default NavigationMenu;
\ No newline at end of file

src/components/OrderItem/OrderItem.module.css

+.OrderItem {
+    width: 80%;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 3px #ccc;
+    padding: 10px;
+    margin: 10px auto;
+    box-sizing: border-box;
+}
+.OrderItem span {
+    text-transform: capitalize;
+    display: inline-block;
+    margin: 0 8px;
+    border: 1px solid #ccc;
+    padding: 5px;
+}
\ No newline at end of file

src/components/OrderItem/OrderItem.tsx

+import styles from './OrderItem.module.css';
+import { TIngredients } from '../../types/TIngredients';
+import { TIngredientNames } from '../../types/TIngredientNames';
+
+
+type Props = {
+    ingredients: TIngredients;
+    price: number;
+}
+
+const OrderItem = ({ ingredients, price }: Props) => {
+
+    const ingredientsParsed = Object.keys(ingredients).map(igName => {
+        return {
+            name: igName || '',
+            amount: ingredients[igName as TIngredientNames] || 0
+        };
+    });
+
+    return (
+        <div className={styles.OrderItem}>
+            <p>Ingredients: {ingredientsParsed.map(ig => (
+                <span key={ig.name}>{ig.name} ({ig.amount})</span>
+            ))}</p>
+            <p>Price: <strong>{price} KZT</strong></p>
+        </div>
+    );
+
+};
+
+export default OrderItem;
\ No newline at end of file

src/components/Orders/Orders.tsx

+import React, { useEffect, useState } from 'react';
+import { axiosOrder } from '../../axios/axiosOrder';
+import type { TFirebaseData } from "../../types/TFirebaseData";
+
+import { TOrder } from '../../types/TOrder';
+import OrderItem from '../OrderItem/OrderItem';
+import Spinner from '../UI/Spinner/Spinner';
+
+const Orders = () => {
+    const [orders, setOrders] = useState<TOrder[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const response = await axiosOrder.get('orders.json');
+            const data: TFirebaseData<TOrder> = response.data
+            console.log(response.data)
+            if (!data) return
+            const fetchedOrders = Object.keys(data).map(id => {
+                return { ...data[id], id };
+            });
+            setOrders(fetchedOrders);
+        };
+        setLoading(true);
+        fetchData().finally(() => setLoading(false));
+    }, []);
+
+    let content: React.ReactElement | React.ReactElement[] = orders.map(order => {
+        return (
+            <OrderItem key={order.id}
+                ingredients={order?.ingredients || {}}
+                price={order.price || 0}
+            />
+        )
+    });
+
+    if (loading) {
+        content = <Spinner />;
+    }
+    return content;
+}
+
+export default Orders;
\ No newline at end of file

src/components/Toolbar/Toolbar.module.css

+.Toolbar {
+    height: 56px;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #703b09;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    z-index: 90; /* Should be lower than backdrop */
+}
+
+.Toolbar nav {
+    height: 100%;
+}
+
+.ToolbarLogo {
+    height: 80%;
+}
\ No newline at end of file

src/components/Toolbar/Toolbar.tsx

+import { Link } from 'react-router-dom';
+import Logo from '../Logo/Logo';
+import styles from './Toolbar.module.css';
+import NavigationMenu from '../NavigationMenu/NavigationMenu';
+
+const Toolbar = () => {
+    return (
+        <header className={styles.Toolbar}>
+            <Link to="/" className={styles.ToolbarLogo}>
+                <Logo/>
+            </Link>
+            <nav>
+                <NavigationMenu />
+            </nav>
+        </header>
+    )
+};
+
+export default Toolbar;
\ No newline at end of file

src/components/layouts/Layout/Layout.module.css

+.LayoutContent {
+    margin-top: 72px;
+}
\ No newline at end of file

src/components/layouts/Layout/Layout.tsx

+import { Outlet } from "react-router-dom";
+import Toolbar from "../../Toolbar/Toolbar";
+import styles from './Layout.module.css';
+
+const Layout = () => (
+  <>
+    <Toolbar />
+    <main className={styles.LayoutContent}>
+      <Outlet/>
+    </main>
+  </>
+);
+
+export default Layout;
\ No newline at end of file

src/main.tsx

@@ -5,10 +5,16 @@ import { createBrowserRouter, RouterProvider } from 'react-router'
 import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder.tsx'
 import { Checkout } from './components/Checkout/Checkout.tsx'
 import { ContactData } from './components/ContactData/ContactData.tsx'
+import Layout from './components/layouts/Layout/Layout.tsx'
+import Orders from './components/Orders/Orders.tsx'
 
 const router = createBrowserRouter([
   {
     path: '/',
+    element: <Layout />,
+    children: [
+      {
+        index: true,
         element: <BurgerBuilder />
       },
       {
@@ -21,6 +27,12 @@ const router = createBrowserRouter([
           }
         ]
       },
+      {
+        path: '/orders',
+        element: <Orders />
+      }
+    ]
+  },
   {
     path: '*',
     element: <h1>Not Found</h1>

src/types/TFirebaseData.ts

+export type TFirebaseData<T> = {
+    [key: string]: T
+}
\ No newline at end of file

src/types/TOrder.ts

+import { TCustomerData } from "./TCustomerData"
+import { TIngredients } from "./TIngredients"
+
+export type TOrder = {
+    id: string
+    customer: TCustomerData
+    ingredients: TIngredients
+    price: number
+}
\ No newline at end of file