Finishing Sidebar

coder-abdo · coder-abdo · commit 2c3846de562e · 2018-04-22T18:41:21.000+02:00
diff --git a/css/style.css b/css/style.css
@@ -74,7 +74,27 @@ body {
 .sidebar {
   background-color: #c69963;
   grid-row: 1 / -1;
-  grid-column: sidebar-start / sidebar-end; }
+  grid-column: sidebar-start / sidebar-end;
+  display: flex;
+  justify-content: center; }
+
+.nav-btn {
+  border: none;
+  border-radius: 0;
+  background-color: #fff;
+  height: 2px;
+  width: 4.5rem;
+  margin-top: 4rem; }
+  .nav-btn::before, .nav-btn::after {
+    content: "";
+    display: block;
+    width: 4.5rem;
+    height: 2px;
+    background-color: #fff; }
+  .nav-btn::before {
+    transform: translateY(-1.5rem); }
+  .nav-btn::after {
+    transform: translateY(1.3rem); }
 
 .header {
   background-color: violet;
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
     </head>
     <body class="container">
         <div class="sidebar">
-            Sidebar
+            <button class="nav-btn"></button>
         </div>
         <header class="header">
             Header
diff --git a/sass/_sidebar.scss b/sass/_sidebar.scss
@@ -2,4 +2,24 @@
     background-color: $color-primary;
     grid-row: 1 / -1;
     grid-column: sidebar-start / sidebar-end;
+    display: flex;
+    justify-content: center;
+}
+.nav-btn {
+    border: none;
+    border-radius: 0;
+    background-color: #fff;
+    height: 2px;
+    width: 4.5rem;
+    margin-top: 4rem;
+    &::before,
+    &::after {
+        content: "";
+        display: block;
+        width: 4.5rem;
+        height: 2px;
+        background-color: #fff;
+    }
+    &::before{transform: translateY(-1.5rem)}
+    &::after{transform: translateY(1.3rem)}
 }
