From 3f018ba17a0a85871105313eeb3c3c56f790d328 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Sat, 8 May 2021 12:07:23 +0300
Subject: [PATCH] created the layout

---
 src/App.js                            | 10 ++++++++-
 src/App.scss                          |  2 ++
 src/SASS/abstracts/_variables.scss    |  1 +
 src/SASS/layout/_layout.scss          | 30 +++++++++++++++++++++++++++
 src/commons/header/header.jsx         |  5 +++++
 src/commons/hotel-view/hotel-view.jsx |  5 +++++
 src/commons/main/main.jsx             | 13 ++++++++++++
 src/commons/navigation/navigation.jsx |  5 +++++
 8 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/commons/header/header.jsx
 create mode 100644 src/commons/hotel-view/hotel-view.jsx
 create mode 100644 src/commons/main/main.jsx
 create mode 100644 src/commons/navigation/navigation.jsx

diff --git a/src/App.js b/src/App.js
index a3898f6..fa4e4f2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,15 @@
+import React from "react";
 import "./App.scss";
+import Header from "./commons/header/header";
+import Main from "./commons/main/main";
 
 function App() {
-  return <div>Trillo</div>;
+  return (
+    <div className="container">
+      <Header />
+      <Main />
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/App.scss b/src/App.scss
index bec030e..c04ae7b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,3 +7,5 @@
 @import "./SASS/base/typography";
 @import "./SASS/base/base";
 @import "./SASS/base/utilities";
+
+@import "./SASS/layout/layout";
diff --git a/src/SASS/abstracts/_variables.scss b/src/SASS/abstracts/_variables.scss
index 6184335..4babc2b 100644
--- a/src/SASS/abstracts/_variables.scss
+++ b/src/SASS/abstracts/_variables.scss
@@ -44,6 +44,7 @@ $big-font-size: 5rem;
 $shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
 $shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
 $shadow-link: 0 1rem 2rem rgba($color-black, 0.4);
+$shadow-blurry: 0 2rem 6rem rgba($color-black, 0.3);
 
 $border-radius-small: 0.2rem;
 $border-radius-default: 0.3rem;
diff --git a/src/SASS/layout/_layout.scss b/src/SASS/layout/_layout.scss
index e69de29..beb22da 100644
--- a/src/SASS/layout/_layout.scss
+++ b/src/SASS/layout/_layout.scss
@@ -0,0 +1,30 @@
+.container {
+  max-width: 120rem;
+  margin: 8rem auto;
+  background-color: $color-grey-light-2;
+  box-shadow: $shadow-blurry;
+
+  min-height: 50rem;
+}
+
+.header {
+  height: 7rem;
+  background-color: $color-white;
+  border-bottom: $color-grey-light-2;
+}
+
+.content {
+  display: flex;
+}
+
+.sidebar {
+  background-color: $color-grey-dark-1;
+
+  flex: 0 0 18%;
+}
+
+.hotel-view {
+  background-color: $color-white;
+
+  flex: 1;
+}
diff --git a/src/commons/header/header.jsx b/src/commons/header/header.jsx
new file mode 100644
index 0000000..ec8733a
--- /dev/null
+++ b/src/commons/header/header.jsx
@@ -0,0 +1,5 @@
+function Header() {
+  return <header className="header">Header Part</header>;
+}
+
+export default Header;
diff --git a/src/commons/hotel-view/hotel-view.jsx b/src/commons/hotel-view/hotel-view.jsx
new file mode 100644
index 0000000..52683b6
--- /dev/null
+++ b/src/commons/hotel-view/hotel-view.jsx
@@ -0,0 +1,5 @@
+function HotelView() {
+  return <main className="hotel-view">Hotel view</main>;
+}
+
+export default HotelView;
diff --git a/src/commons/main/main.jsx b/src/commons/main/main.jsx
new file mode 100644
index 0000000..d8cb811
--- /dev/null
+++ b/src/commons/main/main.jsx
@@ -0,0 +1,13 @@
+import HotelView from "../hotel-view/hotel-view";
+import Nav from "../navigation/navigation";
+
+function Main() {
+  return (
+    <div className="content">
+      <Nav />
+      <HotelView />
+    </div>
+  );
+}
+
+export default Main;
diff --git a/src/commons/navigation/navigation.jsx b/src/commons/navigation/navigation.jsx
new file mode 100644
index 0000000..d05c90f
--- /dev/null
+++ b/src/commons/navigation/navigation.jsx
@@ -0,0 +1,5 @@
+function Nav() {
+  return <nav className="sidebar">Navigation</nav>;
+}
+
+export default Nav;