From cb8e1780d8928d267c9b119de536d1c406a4786c Mon Sep 17 00:00:00 2001 From: dertyp7 Date: Sat, 13 Jan 2024 17:04:55 +0100 Subject: [PATCH] Add responsive sidebar to Header component --- src/components/Burger.tsx | 24 +++++++++++++++ src/components/Header.tsx | 39 ++++++++++++++++++++----- src/components/Sidebar.tsx | 23 +++++++++++++++ src/styles/Burger.scss | 50 ++++++++++++++++++++++++++++++++ src/styles/Header.scss | 2 +- src/styles/Sidebar.scss | 35 ++++++++++++++++++++++ src/styles/index.scss | 1 - src/styles/variables_colors.scss | 5 +--- 8 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 src/components/Burger.tsx create mode 100644 src/components/Sidebar.tsx create mode 100644 src/styles/Burger.scss create mode 100644 src/styles/Sidebar.scss diff --git a/src/components/Burger.tsx b/src/components/Burger.tsx new file mode 100644 index 0000000..98c7bd9 --- /dev/null +++ b/src/components/Burger.tsx @@ -0,0 +1,24 @@ +import { useState } from "react"; +import "@styles/Burger.scss"; + +export default function Burger({ onClick }: { onClick: () => void }) { + const [isOpen, setIsOpen] = useState(false); + + const toggleMenu = () => { + setIsOpen(!isOpen); + }; + + return ( +
{ + toggleMenu(); + onClick(); + }} + > +
+
+
+
+ ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 822d8fb..7b54caa 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,19 +1,44 @@ import "@styles/Header.scss"; +import { useState, useEffect } from "react"; +import Burger from "@components/Burger"; +import Sidebar from "@components/Sidebar"; export default function Header() { + const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768); + const [isOpen, setIsOpen] = useState(false); + + const toggleSidebar = () => setIsOpen(!isOpen); + + useEffect(() => { + const checkScreenSize = () => { + setIsSmallScreen(window.innerWidth <= 768); + }; + + window.addEventListener("resize", checkScreenSize); + + return () => window.removeEventListener("resize", checkScreenSize); + }, []); + return (
{J} - + {isSmallScreen ? ( + <> + + + + ) : ( + + )}
); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..50f7997 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,23 @@ +import "@styles/Sidebar.scss"; + +export default function Sidebar({ + isOpen, + toggle, +}: { + isOpen: boolean; + toggle: () => void; +}) { + return ( +
+ + About + + + Skills + + + Projects + +
+ ); +} diff --git a/src/styles/Burger.scss b/src/styles/Burger.scss new file mode 100644 index 0000000..48b0ea8 --- /dev/null +++ b/src/styles/Burger.scss @@ -0,0 +1,50 @@ +.burger { + width: 2rem; + height: 2rem; + position: fixed; + top: 15px; + right: 20px; + z-index: 20; + display: flex; + justify-content: space-around; + flex-flow: column nowrap; + cursor: pointer; + + div { + width: 2rem; + height: 0.25rem; + background-color: var(--color-font); + border-radius: 10px; + transform-origin: 1px; + transition: all 200ms linear; + + &:nth-child(1) { + transform: rotate(0); + } + + &:nth-child(2) { + opacity: 1; + } + + &:nth-child(3) { + transform: rotate(0); + } + } + + &.open { + div { + background-color: var(--color-accent); + &:nth-child(1) { + transform: rotate(45deg); + } + + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(3) { + transform: rotate(-45deg); + } + } + } +} diff --git a/src/styles/Header.scss b/src/styles/Header.scss index c15f085..5aa2ea4 100644 --- a/src/styles/Header.scss +++ b/src/styles/Header.scss @@ -28,7 +28,7 @@ justify-content: center; gap: 50px; a { - color: #fff; + color: var(--color-font); text-decoration: none; font-size: 1.2rem; font-weight: 500; diff --git a/src/styles/Sidebar.scss b/src/styles/Sidebar.scss new file mode 100644 index 0000000..4c41806 --- /dev/null +++ b/src/styles/Sidebar.scss @@ -0,0 +1,35 @@ +.sidebar { + position: fixed; + top: 0; + right: 0; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + background-color: var(--color-background-sidebar); + transform: translateX(100%); + transition: transform 100ms ease-in-out; + + &.open { + transform: translateX(0); + } + + a { + font-size: 2rem; + text-transform: uppercase; + padding: 2rem; + font-weight: bold; + letter-spacing: 0.5rem; + color: var(--color-font); + text-decoration: none; + transition: color 50ms linear; + + &:hover { + color: var(--color-accent); + } + } + + @media (max-width: 768px) { + width: 100%; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 422f5f3..4a0230e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,7 +2,6 @@ :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - // line-height: 1.5; font-weight: 400; color-scheme: light dark; diff --git a/src/styles/variables_colors.scss b/src/styles/variables_colors.scss index 7c778da..b616ec8 100644 --- a/src/styles/variables_colors.scss +++ b/src/styles/variables_colors.scss @@ -3,14 +3,11 @@ --color-background-body: #000000; --color-background-header: transparent; + --color-background-sidebar: #1a1a1a; --color-font: #ffffff; - --color-font-link-header: #1c1c1c; - --color-font-link-header-hover: #000; --color-border: #1c1c1c; - --color-border-link-header: transparent; - --color-border-link-header-hover: var(--color-accent); --color-danger: #cf000f; --color-success: #009944;