Enhancement: Adding sidebar component

src/components/button/Button.styles.ts

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { ButtonProps } from "./Button";
+
+export const StyledButton = styled.button<ButtonProps>`
+    line-height: 1;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: ${(props) =>
+        props.size === "small"
+            ? "16px"
+            : props.size === "medium"
+              ? "16px"
+              : "20px"};
+    border-radius: 10px;
+    display: inline-block;
+    color: ${(props) => (props.primary ? "#fff" : "#000")};
+    ${(props) =>
+        props.primary && `background: ${props.bg ? props.bg : "#FF5655"}`};
+    ${(props) => props.outline && `background: transparent`};
+    border: ${(props) => (props.outline ? "2px solid" : "none")};
+    ${(props) =>
+        props.outline && `border-color: ${props.bg ? props.bg : "#000"}`};
+    padding: ${(props) =>
+        props.size === "small"
+            ? "10px 18px"
+            : props.size === "medium"
+              ? "14px 20px"
+              : "14px 24px"};
+`;

src/components/button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler } from "react";
-import styled from "styled-components";
+import { StyledButton } from "./Button.styles";
 
 export type ButtonProps = {
     text?: string;
@@ -11,33 +11,6 @@ export type ButtonProps = {
     bg?: string;
 };
 
-const StyledButton = styled.button<ButtonProps>`
-    line-height: 1;
-    cursor: pointer;
-    font-weight: 700;
-    font-size: ${(props) =>
-        props.size === "small"
-            ? "16px"
-            : props.size === "medium"
-              ? "16px"
-              : "20px"};
-    border-radius: 10px;
-    display: inline-block;
-    color: ${(props) => (props.primary ? "#fff" : "#000")};
-    ${(props) =>
-        props.primary && `background: ${props.bg ? props.bg : "#FF5655"}`};
-    ${(props) => props.outline && `background: transparent`};
-    border: ${(props) => (props.outline ? "2px solid" : "none")};
-    ${(props) =>
-        props.outline && `border-color: ${props.bg ? props.bg : "#000"}`};
-    padding: ${(props) =>
-        props.size === "small"
-            ? "10px 18px"
-            : props.size === "medium"
-              ? "14px 20px"
-              : "14px 24px"};
-`;
-
 const Button: React.FC<ButtonProps> = ({
     size,
     primary,

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./button";
 export * from "./input";
 export * from "./navbar";
+export * from "./sidebar";

src/components/input/Input.styles.ts

@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import { InputProps } from "./Input";
+
+/*
+    Styled Input for the primary variant
+ */
+export const StyledInput = styled.input<InputProps>`
+    padding: ${(props) => (props.p ? props.p : "10px 14px")};
+    width: ${(props) => props.width || "100%"};
+    max-width: ${(props) => props.maxWidth};
+    outline: none;
+    border: ${(props) => (props.border ? props.border.width : "1px")} solid
+        ${(props) => (props.border ? props.border.color : "#eee")};
+    border-radius: ${(props) => (props.border ? props.border.radius : "4px")};
+    font-size: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.size : "16px"};
+    font-family: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
+    font-weight: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.weight : "500"};
+`;
+
+/*
+    Styled Container for the float variant
+ */
+export const StyledFloatContainer = styled.div<InputProps>`
+    position: relative;
+    width: ${(props) => (props.width ? props.width : "100%")};
+    max-width: ${(props) => props.maxWidth || "100%"};
+    margin-bottom: 1.5rem;
+    font-family: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
+`;
+
+/*
+    Styled Input for the float variant
+ */
+export const StyledFloatInput = styled.input<InputProps>`
+    padding: ${(props) => (props.p ? props.p : "10px 14px")};
+    width: ${(props) =>
+        props.p ? `calc(100% - ${2 * props.p}px)` : "calc(100% - 28px)"};
+    outline: none;
+    border: ${(props) => (props.border ? props.border.width : "1px")} solid
+        ${(props) => (props.border ? props.border.color : "#eee")};
+    border-radius: ${(props) => (props.border ? props.border.radius : "4px")};
+    font-size: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.size : "16px"};
+    font-family: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
+    font-weight: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.weight : "500"};
+    transition: border-color 0.3s;
+    &:focus {
+        border-color: #007bff;
+    }
+    &:
+        focus + label,
+        ${({ hasValue }) =>
+            hasValue &&
+            `
+            & + label {
+                top: -0.75rem;
+                font-size: 0.75rem;
+                color: #007bff;
+            }
+        `};
+`;
+
+export const StyledFloatLabel = styled.label<InputProps>`
+    position: absolute;
+    padding: ${(props) => (props.p ? props.p : "10px 14px")};
+    transform: translateY(-50%);
+    transition: all 0.3s;
+    pointer-events: none;
+    font-size: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.size : "16px"};
+    font-family: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
+    font-weight: ${(props) =>
+        props.fontsProperty ? props.fontsProperty.weight : "500"};
+    ${StyledFloatInput}:focus + & {
+        top: -0.75rem;
+        left: -14px;
+        font-size: 0.75rem;
+        color: #007bff;
+    }
+    ${({ hasValue }) =>
+        hasValue
+            ? `
+        top: -0.75rem;
+        left: -14px;
+        font-size: 0.75rem;
+        color: #007bff;
+    `
+            : `
+        top: 50%;
+        left: 0;
+        color: #999;
+    `};
+`;

src/components/input/Input.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import styled from "styled-components";
+import {
+    StyledFloatContainer,
+    StyledFloatInput,
+    StyledFloatLabel,
+    StyledInput,
+} from "./Input.styles";
 
 /**
  * Input Component
@@ -74,101 +79,3 @@ const Input: React.FC<InputProps> = ({
 };
 
 export default Input;
-
-/*
-    Styled Input for the primary variant
- */
-const StyledInput = styled.input<InputProps>`
-    padding: ${(props) => (props.p ? props.p : "10px 14px")};
-    width: ${(props) => props.width || "100%"};
-    max-width: ${(props) => props.maxWidth};
-    outline: none;
-    border: ${(props) => (props.border ? props.border.width : "1px")} solid
-        ${(props) => (props.border ? props.border.color : "#eee")};
-    border-radius: ${(props) => (props.border ? props.border.radius : "4px")};
-    font-size: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.size : "16px"};
-    font-family: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
-    font-weight: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.weight : "500"};
-`;
-
-/*
-    Styled Container for the float variant
- */
-const StyledFloatContainer = styled.div<InputProps>`
-    position: relative;
-    width: ${(props) => (props.width ? props.width : "100%")};
-    max-width: ${(props) => props.maxWidth || "100%"};
-    margin-bottom: 1.5rem;
-    font-family: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
-`;
-
-/*
-    Styled Input for the float variant
- */
-const StyledFloatInput = styled.input<InputProps>`
-    padding: ${(props) => (props.p ? props.p : "10px 14px")};
-    width: ${(props) =>
-        props.p ? `calc(100% - ${2 * props.p}px)` : "calc(100% - 28px)"};
-    outline: none;
-    border: ${(props) => (props.border ? props.border.width : "1px")} solid
-        ${(props) => (props.border ? props.border.color : "#eee")};
-    border-radius: ${(props) => (props.border ? props.border.radius : "4px")};
-    font-size: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.size : "16px"};
-    font-family: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
-    font-weight: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.weight : "500"};
-    transition: border-color 0.3s;
-    &:focus {
-        border-color: #007bff;
-    }
-    &:
-        focus + label,
-        ${({ hasValue }) =>
-            hasValue &&
-            `
-            & + label {
-                top: -0.75rem;
-                font-size: 0.75rem;
-                color: #007bff;
-            }
-        `};
-`;
-
-const StyledFloatLabel = styled.label<InputProps>`
-    position: absolute;
-    padding: ${(props) => (props.p ? props.p : "10px 14px")};
-    transform: translateY(-50%);
-    transition: all 0.3s;
-    pointer-events: none;
-    font-size: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.size : "16px"};
-    font-family: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.family : "system-ui"};
-    font-weight: ${(props) =>
-        props.fontsProperty ? props.fontsProperty.weight : "500"};
-    ${StyledFloatInput}:focus + & {
-        top: -0.75rem;
-        left: -14px;
-        font-size: 0.75rem;
-        color: #007bff;
-    }
-    ${({ hasValue }) =>
-        hasValue
-            ? `
-        top: -0.75rem;
-        left: -14px;
-        font-size: 0.75rem;
-        color: #007bff;
-    `
-            : `
-        top: 50%;
-        left: 0;
-        color: #999;
-    `};
-`;

src/components/navbar/Navbar.styles.ts

@@ -0,0 +1,95 @@
+import styled from "styled-components";
+import { NavbarProps } from "./Navbar";
+
+export const StyledNavbar = styled.nav<NavbarProps>`
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: ${(props) =>
+        props.p ? `${props.p}px` : `${props.py || 10}px ${props.px || 30}px`};
+    width: calc(
+        100% -
+            ${(props) =>
+                props.p
+                    ? `${2 * props.p}px`
+                    : props.px
+                      ? `${2 * props.px}px`
+                      : "60px"}
+    );
+    .nav-logo__container,
+    .nav-links__container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    .hamburger-open .line1 {
+        transform: rotate(45deg);
+    }
+    .hamburger-open .line2 {
+        transform: scaleY(0);
+    }
+    .hamburger-open .line3 {
+        transform: rotate(-45deg);
+    }
+    .nav-phone__toggle {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: calc(
+            ${(props) =>
+                props.fontsProperty && props.fontsProperty.size
+                    ? props.fontsProperty.size
+                    : "30px" +
+                      ` + ${props.p ? 2 * props.p : props.py ? 2 * props.py : 20}px` +
+                      " - 2px"}
+        );
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        align-items: center;
+        justify-content: center;
+        z-index: 990;
+    }
+    img {
+        height: 30px;
+    }
+    a {
+        text-decoration: none;
+        color: ${(props) => props.color || "#000"};
+        font-size: ${(props) => props.fontsProperty?.size || "16px"};
+        font-family: ${(props) => props.fontsProperty?.family || "system-ui"};
+        font-weight: ${(props) => `${props.fontsProperty?.weight || 500}`};
+    }
+`;
+
+export const StyledMenu = styled.div`
+    display: block;
+    height: 20px;
+    width: 25px;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+    .line {
+        display: block;
+        height: 3px;
+        width: 100%;
+        border-radius: 10px;
+        background: #0e2431;
+    }
+    .line1 {
+        transform-origin: 0% 0%;
+        transition: transform 0.3s ease-in-out;
+    }
+    .line2 {
+        transition: transform 0.1s ease-in-out;
+    }
+    .line3 {
+        transform-origin: 0% 100%;
+        transition: transform 0.3s ease-in-out;
+    }
+`;