sistent sidebar

Signed-off-by: Lakshya Satpal <[email protected]>
layer5io · Feb 7, 2024 · 74de18a · 74de18a
1 parent d22a86c
commit 74de18a
Show file tree

Hide file tree

Showing 5 changed files with 342 additions and 3 deletions.
diff --git a/src/pages/projects/sistent/index.js b/src/pages/projects/sistent/index.js
@@ -1,8 +1,12 @@
 import React from "react";
-import SistentHome from "../../../sections/Projects/Sistent/";
+import SistentHome from "../../../sections/Projects/Sistent/index";
 
 const SistentIndexPage = () => {
-  return <SistentHome />;
+  return (
+    <>
+      <SistentHome />
+    </>
+  );
 };
 
 export default SistentIndexPage;
diff --git a/src/sections/Projects/Sistent/Sistent-sidebar/index.js b/src/sections/Projects/Sistent/Sistent-sidebar/index.js
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Link } from "gatsby";
+import slugify from "../../../../utils/slugify";
+
+import SistentSidebarWrapper from "./sidebar.style";
+import { HiOutlineChevronUp } from "@react-icons/all-files/hi/HiOutlineChevronUp";
+import { HiOutlineChevronDown } from "@react-icons/all-files/hi/HiOutlineChevronDown";
+
+const Sidebar = () => {
+  const [showIdentity, setShowIdentity] = useState(true);
+
+  return (
+    <SistentSidebarWrapper>
+      <div className="sidebar-widgets catagorie">
+        <div className="widgets-title">
+          <h3>About Sistent</h3>
+        </div>
+      </div>
+      <div className="sidebar-widgets catagorie">
+        <div
+          className="widgets-title"
+          onClick={() => setShowIdentity((value) => !value)}
+        >
+          <h3>Identity</h3>
+          {!showIdentity ? (
+            <HiOutlineChevronDown className="menu-icon" />
+          ) : (
+            <HiOutlineChevronUp className="menu-icon" />
+          )}
+        </div>
+        <ul className={`${!showIdentity ? "ul-close" : "scroll"}`}>
+          {["Color", "Typography", "Spacing", "Page Layouts", "Elevation"].map(
+            (item) => (
+              <li key={item}>
+                <Link
+                  to={`/projects/sistent/${slugify(item)}`}
+                  activeStyle={{ color: "#00b39f" }}
+                >
+                  <span>{item}</span>
+                </Link>
+              </li>
+            )
+          )}
+        </ul>
+      </div>
+      <div className="sidebar-widgets catagorie">
+        <div className="widgets-title">
+          <h3>Component</h3>
+        </div>
+      </div>
+      <div className="sidebar-widgets catagorie">
+        <div className="widgets-title">
+          <h3>Pattern & Templates</h3>
+        </div>
+      </div>
+      <div className="sidebar-widgets catagorie">
+        <div className="widgets-title">
+          <h3>Visualization & Illustration</h3>
+        </div>
+      </div>
+    </SistentSidebarWrapper>
+  );
+};
+
+export default Sidebar;
diff --git a/src/sections/Projects/Sistent/Sistent-sidebar/sidebar.style.js b/src/sections/Projects/Sistent/Sistent-sidebar/sidebar.style.js
@@ -0,0 +1,246 @@
+import styled from "styled-components";
+
+const SistentSidebarWrapper = styled.div`
+  border-right: 0.5px solid ${(props) => props.theme.primaryLightColor};
+  margin-bottom: 2rem;
+  .sidebar-widgets {
+    padding: 15px 30px;
+  }
+
+  .widgets-title {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    h3 {
+      display: inline-block;
+      font-weight: 500;
+      position: relative;
+      &:before {
+        position: absolute;
+        top: 50%;
+        right: -80px;
+        content: "";
+        width: 70px;
+        height: 1px;
+      }
+    }
+    .menu-icon {
+      float: right;
+      vertical-align: bottom;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  .sidebar-widgets {
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .ul-close {
+      display: none;
+    }
+
+    .scroll {
+      max-height: 40rem;
+      overflow: auto;
+      padding-right: 10px;
+      scrollbar-width: thin;
+
+      &::-webkit-scrollbar-thumb {
+        background: #a9a9a9;
+        border-radius: 1rem;
+      }
+      &::-webkit-scrollbar-track {
+        background: #f0f0f0;
+        border-radius: 1rem;
+      }
+      &::-webkit-scrollbar-button {
+        display: none;
+      }
+      &::-webkit-scrollbar {
+        width: 6px;
+        display: block;
+      }
+    }
+
+    &.catagorie {
+      li {
+        & + li {
+          margin-top: 3px;
+        }
+        a {
+          color: ${(props) => props.theme.whiteToBlack};
+          display: flex;
+          justify-content: space-between;
+          font: 400 16px/35px "Qanelas Soft", "Open Sans", sans-serif;
+          em {
+            font-style: normal;
+            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+          }
+          span {
+            border-bottom: 1px solid transparent;
+            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+          }
+          &:hover {
+            span,
+            em {
+              color: ${(props) => props.theme.secondaryColor};
+              border-color: ${(props) => props.theme.secondaryColor};
+            }
+          }
+          &:focus {
+            span,
+            em {
+              color: ${(props) => props.theme.secondaryColor};
+              border-color: ${(props) => props.theme.secondaryColor};
+            }
+          }
+        }
+      }
+    }
+    &.tags {
+      ul {
+        margin-top: -5px;
+        margin-left: -5px;
+        margin-right: -5px;
+      }
+      li {
+        display: inline-block;
+        a {
+          color: ${(props) => props.theme.text};
+          margin: 5px;
+          display: block;
+          padding: 6px 18px;
+          border-radius: 3px;
+          background: ${(props) => props.theme.grey212121ToGreyF0F0F0};
+          font: 400 13px/26px "Qanelas Soft", "Open Sans", sans-serif;
+          transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+          &:hover {
+            background: ${(props) => props.theme.secondaryColor};
+            color: ${(props) => props.theme.textRevert};
+          }
+        }
+      }
+    }
+  }
+
+  .subscribe {
+    font-family: "Qanelas Soft", "Open Sans", sans-serif;
+    padding: 0 1rem;
+    margin: 1rem auto auto;
+    display: flex;
+    justify-content: center;
+
+    span {
+      h4 {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    input {
+      display: inline-flex;
+      padding: 1rem;
+      margin-right: 0.25rem;
+      width: auto;
+      height: 3.5rem;
+      color: rgba(0, 0, 0, 0.75);
+      border: 1px solid #000000;
+      border-top-left-radius: 0.3rem;
+      border-bottom-left-radius: 0.3rem;
+    }
+
+    button {
+      height: 3.5rem;
+      min-width: auto;
+      border-radius: 0 0.3rem 0.3rem 0;
+    }
+
+    @media screen and (max-width: 1200px) {
+      padding: 0 0.5rem;
+
+      input {
+        width: 10.5rem;
+      }
+    }
+
+    @media screen and (max-width: 992px) {
+      display: none;
+    }
+  }
+
+  @media only screen and (max-width: 1024px) {
+    .sidebar-widgets {
+      padding: 3rem 0 0 0;
+    }
+  }
+
+  .explain-1 {
+    padding-top: 0rem;
+    text-align: center;
+
+    .cards {
+      margin: 0.15rem auto 2.5rem;
+      max-width: 50rem;
+      padding: 0rem 2.7rem 0rem 1rem;
+      background-color: none;
+      border-radius: 25px;
+      @media only screen and (max-width: 1200px) {
+        //  margin-top: 0rem;
+        padding: 1.5rem 0.8rem 0rem 0.5rem;
+      }
+      .card {
+        -webkit-transition: 450ms all;
+        transition: 450ms all;
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        gap: 1rem;
+        background-color: ${(props) => props.theme.darkJungleGreenColor};
+        border-radius: 1.5rem;
+
+        p {
+          text-align: center;
+          letter-spacing: 0;
+          font-size: 15px;
+          font-weight: 200;
+          margin-top: -1rem;
+          color: ${(props) => props.theme.white};
+        }
+        h2 {
+          text-align: center;
+          font-size: 1.5rem;
+          text-transform: uppercase;
+          clear: both;
+          color: ${(props) => props.theme.white};
+        }
+        img {
+          border-radius: 1rem;
+        }
+        .logo {
+          width: 100%;
+        }
+        &:hover,
+        &:focus {
+          outline: none;
+        }
+        &:hover {
+          transform: translateY(0.03rem);
+          box-shadow: 0 2px 10px #00d3a9;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 992px) {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+export default SistentSidebarWrapper;
diff --git a/src/sections/Projects/Sistent/index.js b/src/sections/Projects/Sistent/index.js
@@ -1,7 +1,26 @@
 import React from "react";
+import Sidebar from "./Sistent-sidebar";
+import { Col, Row } from "../../../reusecore/Layout";
+import SistentWrapper from "./sistent.style";
 
 const SistentHome = () => {
-  return <div>Sistent Coming soon...</div>;
+  return (
+    <SistentWrapper>
+      <Row>
+        <Col xs={12} lg={3}>
+          <Sidebar />
+        </Col>
+        <Col xs={12} lg={7}>
+          <h1>About</h1>
+          <p>
+            Colors when accurately applied can be a potent tool that enables
+            designers and developers to implement solutions with speed and
+            efficiency. Here are a couple of things to keep in mind.
+          </p>
+        </Col>
+      </Row>
+    </SistentWrapper>
+  );
 };
 
 export default SistentHome;
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+const SistentWrapper = styled.div``;
+
+export default SistentWrapper;