Merge pull request #6 from tkyoun0421/develop

Feat: add sidebar

Author: NamgungJongMin

src/assets/company.svg

@@ -0,0 +1,56 @@
+import '../scss/components/_sidebar.scss';
+import { Link } from 'react-router-dom';
+
+const SideBar = (): JSX.Element => {
+  return (
+    <>
+      <aside className="nav">
+        <ul className="nav__depth">
+          <li className="nav__depth__item on">
+            <Link to={'/'} className="nav__depth__link">
+              <img src="./src/assets/home.svg" alt="홈" className="nav__depth__logo" />
+              Home
+            </Link>
+          </li>
+          <li className="nav__depth__item">
+            <Link to={'/company'} className="nav__depth__link" data-type="toggle">
+              <img src="./src/assets/company.svg" alt="회사 소개" className="nav__depth__logo" />
+              회사 소개
+            </Link>
+            <ul className="nav__detail">
+              <li className="nav__detail__item">
+                <Link to={'/company/notice'} className="nav__detail__link on">
+                  공지사항
+                </Link>
+              </li>
+              <li className="nav__detail__item">
+                <Link to={'/company/chart'} className="nav__detail__link">
+                  회사 조직도
+                </Link>
+              </li>
+              <li className="nav__detail__item">
+                <Link to={'/company/bylaws'} className="nav__detail__link">
+                  회사 내규
+                </Link>
+              </li>
+            </ul>
+          </li>
+          <li className="nav__depth__item">
+            <Link to={'/project'} className="nav__depth__link">
+              <img src="./src/assets/project.svg" alt="프로젝트" className="nav__depth__logo" />
+              프로젝트
+            </Link>
+          </li>
+          <li className="nav__depth__item">
+            <Link to={'/gallery'} className="nav__depth__link">
+              <img src="./src/assets/gallery.svg" alt="갤러리" className="nav__depth__logo" />
+              갤러리
+            </Link>
+          </li>
+        </ul>
+      </aside>
+    </>
+  );
+};
+
+export default SideBar;

src/assets/gallery.svg

@@ -22,3 +22,6 @@ $bg-light: #f8f9fc;
 
 $failed: #e74a3b;
 $success: #1cc88a;
+
+$gray: #3a3b45;
+$lightGray: #eaecf4;

src/assets/home.svg

@@ -0,0 +1,74 @@
+@use '../abstracts/' as *;
+@use '../base/' as *;
+
+.nav {
+  width: 224px;
+  height: 100vh;
+  background-color: $blue;
+  color: $white;
+  font-size: 1.4rem;
+  .nav__depth {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    padding-left: 0;
+    color: $white;
+    &__item {
+      list-style: none;
+      position: relative;
+      &.on {
+        font-weight: $font-bold700;
+      }
+    }
+    &__link {
+      padding: 20px 16px;
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: $white;
+      &:hover {
+        background-color: $darkBlue;
+      }
+    }
+    &__link[data-type='toggle']::after {
+      content: '';
+      width: 10px;
+      height: 12px;
+      background: url('../../assets/right.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      margin-left: auto;
+    }
+    &__logo {
+      margin-right: 10px;
+    }
+    .nav__detail {
+      background-color: $white;
+      width: 180px;
+      height: 120px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      margin: 0 auto;
+      border-radius: 5px;
+      &__item {
+        width: 100%;
+      }
+      &__link {
+        display: flex;
+        color: $gray;
+        font-size: 1.2rem;
+        border-radius: 5px;
+        margin: 0 5px;
+        padding: 8px 16px;
+        &.on {
+          color: $blue;
+          font-weight: $font-bold700;
+        }
+        &:hover {
+          background-color: $lightGray;
+        }
+      }
+    }
+  }
+}

src/assets/project.svg

@@ -1,11 +1,13 @@
 import React from 'react';
 import Header from '../components/Header';
 import '../scss/base/_index.scss';
+import SideBar from '../components/SideBar';
 
 export const LandingPage = (): JSX.Element => {
   return (
     <div>
       <Header />
+      <SideBar />
     </div>
   );
 };