update

src/App.tsx

@@ -4,16 +4,21 @@ import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
 import { Checkout } from './containers/Checkout/Checkout';
 import { NotFound } from './components/NotFound/NotFound';
 import { ContactData } from './containers/ContactData/ContactData';
+import { Layout } from './components/Layout/Layout';
+import { Orders } from './containers/Orders/Orders';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path='/' element={<BurgerBuilder/>}/>
-        <Route path='/checkout' element={<Checkout/>}>
-          <Route path='contactData' element={<ContactData/>}/>
+        <Route path='/' element={<Layout/>}>
+          <Route index element={<BurgerBuilder/>}/>
+          <Route path='/orders' element={<Orders/>}/>
+          <Route path='/checkout' element={<Checkout/>}>
+            <Route path='contactData' element={<ContactData/>}/>
+          </Route>
+          <Route path='*' element={<NotFound/>}/>
         </Route>
-        <Route path='*' element={<NotFound/>}/>
       </Routes>
     </BrowserRouter>
   )

src/components/Layout/Layout.css

+.Layout-Content {
+    margin-top: 75px;
+}
\ No newline at end of file

src/components/Layout/Layout.tsx

+import React from "react";
+import { Outlet } from "react-router-dom";
+import { ToolBar } from "../Navigation/ToolBar/ToolBar";
+import "./Layout.css";
+
+export const Layout = () => {
+    return (
+        <>
+            <ToolBar/>
+            <main className="Layout-Content">
+                <Outlet/>
+            </main>
+        </>
+    );
+};
\ No newline at end of file

src/components/Logo/Logo.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 React from "react";
+import burgerLogo from "@/assets/images/burger-logo.png";
+import "./Logo.css";
+
+export const Logo = () => {
+    return (
+        <div className="Logo">
+            <img src={burgerLogo} alt="burger_logo" />
+        </div>
+    );
+};
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css

+.NavigationItem {
+    margin: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.NavigationItem a {
+    color: white;
+    height: 100%;
+    padding: 16px 10px;
+    border-bottom: 4px solid transparent;
+
+    text-decoration: none;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+}
+
+.NavigationItem a:hover,
+.NavigationItem a:active,
+.NavigationItem a.active {
+    background-color: #8f5c2c;
+    border-bottom: 4px solid #40a4c8;
+    color: white;
+}
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.tsx

+import React, { ReactNode } from "react";
+import { NavLink } from "react-router-dom";
+import './NavigationItem.css';
+
+type TProps = {
+    to: string;
+    end: boolean;
+    children: ReactNode
+};
+
+export const NavigationItem = ({to, end, children}: TProps) => {
+    return (
+        <li className="NavigationItem">
+            <NavLink to={to} end={end}>
+                {children}
+            </NavLink>
+        </li>
+    );
+};
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItems.css

+.NavigationItems {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    height: 100%;
+}
\ No newline at end of file

src/components/Navigation/NavigationItems/NavigationItems.tsx

+import React from "react";
+import { NavigationItem } from "./NavigationItem/NavigationItem";
+import "./NavigationItems.css";
+
+export const NavigationItems = () => {
+    return (
+        <ul className="NavigationItems">
+            <NavigationItem to="/" end>
+                Burger Builder
+            </NavigationItem>
+            <NavigationItem to="/orders" end>
+                Orders
+            </NavigationItem>
+        </ul>
+    );
+};
\ No newline at end of file

src/components/Navigation/ToolBar/ToolBar.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%;
+}
+
+.Toolbar-logo {
+    height: 80%;
+}
\ No newline at end of file

src/components/Navigation/ToolBar/ToolBar.tsx

+import React from "react";
+import { Link } from "react-router-dom";
+import { Logo } from "@/components/Logo/Logo";
+import { NavigationItems } from "../NavigationItems/NavigationItems";
+import "./ToolBar.css";
+
+export const ToolBar = () => {
+    return (
+        <header className="ToolBar">
+            <Link to={"/"} className="Toolbar-logo">
+                <Logo/>
+            </Link>
+            <nav>
+                <NavigationItems/>
+            </nav>
+        </header>
+    );
+};
\ No newline at end of file

src/components/Order/OrderItem/OrderItem.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/Order/OrderItem/OrderItem.tsx

+import React from "react";
+import { Ingredients, IngredientNames } from "@/interfaces/Ingredients";
+import "./OrderItem.css";
+
+type TProps = {
+    ingredients: Ingredients,
+    price: number
+};
+
+export const OrderItem = ({ingredients, price}: TProps) => {
+    const ings = Object.keys(ingredients).map(igName => {
+        return {
+          name: igName,
+          amount: ingredients[igName as IngredientNames]
+        };
+    });
+
+    const ingredientOutput = ings.map(ig => (
+        <span key={ig.name}>{ig.name} ({ig.amount})</span>
+    ));
+    
+    return (
+        <div className="OrderItem">
+            <p>Ingredients: {ingredientOutput}</p>
+            <p>Price: <strong>{price} KZT</strong></p>
+        </div>
+    );
+};
\ No newline at end of file

src/containers/Orders/Orders.tsx

+import React, {useState, useEffect, useCallback} from "react";
+import axiosBurger from "@/config/axiosBurger";
+import { parseGetOrders } from "@/helpers/parseGetOrders";
+import { TOrder } from "@/interfaces/order";
+import { OrderItem } from "@/components/Order/OrderItem/OrderItem";
+import { Spinner } from "@/components/UI/Spinner/Spinner";
+
+export const Orders = () => {
+    const [orders, setOrders] = useState<TOrder[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const getOrders = useCallback(async () => {
+        setIsLoading(true);
+        const {data} = await axiosBurger.get("orders.json");
+        setOrders(parseGetOrders(data).reverse());
+        setIsLoading(false);
+    }, []);
+
+    useEffect(() => {
+        getOrders();
+    }, []);
+
+    return (
+        <>
+            <Spinner show={isLoading}/>
+            {
+                orders.map(order => (
+                    <OrderItem
+                        key={order.id}
+                        ingredients={order.ingredients}
+                        price={order.price}
+                    />
+                ))
+            }
+        </>
+    );
+};
\ No newline at end of file

src/helpers/parseGetOrders.ts

+import { IGetOrder, TOrder } from "@/interfaces/order";
+
+export const parseGetOrders = (data: IGetOrder<{[key: string]: any}>): TOrder[] => {
+    return Object.keys(data).map(id => {
+        return {
+            id,
+            contactData: data[id].contactData,
+            price: data[id].price,
+            ingredients: data[id].ingredients
+        }
+    })
+};
\ No newline at end of file

src/interfaces/order.ts

+import { Ingredients } from "./Ingredients";
+import { TContactData } from "./contactData"
+
+export interface IGetOrder<T> {
+    [key: string]: T
+};
+
+export type TOrder = {
+    id: string,
+    contactData: TContactData,
+    price: number,
+    ingredients: Ingredients
+};
\ No newline at end of file