diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 70122f2e..f86b758c 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Link } from "react-router-dom"; +import type React from "react" +import { Link } from "react-router-dom" import { SidebarContainer, SidebarTitle, @@ -10,44 +10,51 @@ import { HelperIcon, HelperText, DividerLine, -} from "../styles/components/Sidebar"; -import { BulbOutlined } from "@ant-design/icons"; + HamburgerButton, +} from "../styles/components/Sidebar" +import { BulbOutlined, MenuOutlined } from "@ant-design/icons" interface SidebarProps { - steps: { title: string; link: string }[]; + steps: { title: string; link: string }[] + isOpen: boolean + toggleSidebar: () => void } -const Sidebar: React.FC = ({ steps }) => { + +const Sidebar: React.FC = ({ steps, isOpen, toggleSidebar }) => { return ( - Learning Pathway - - {steps.map((step, index) => ( - - (isActive ? "active" : "")} - > - {step.title} - - - ))} - - - - - - - - Welcome to the Learning Pathway! Use the sidebar to follow the guide. - Open the {" "} - - Template Playground - {" "} - in another tab to experiment as you learn. - - + + + + {isOpen && ( + <> + Learning Pathway + + {steps.map((step, index) => ( + + (isActive ? "active" : "")}> + {step.title} + + + ))} + + + + + + + + Welcome to the Learning Pathway! Use the sidebar to follow the guide. Open the{" "} + + Template Playground + {" "} + in another tab to experiment as you learn. + + + + )} - ); -}; + ) +} -export default Sidebar; \ No newline at end of file +export default Sidebar \ No newline at end of file diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx index 594a128c..6dac2935 100644 --- a/src/pages/LearnNow.tsx +++ b/src/pages/LearnNow.tsx @@ -1,20 +1,29 @@ -import React from "react"; -import { Outlet } from "react-router-dom"; -import Sidebar from "../components/Sidebar"; -import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow"; -import { steps } from "../constants/learningSteps/steps"; +"use client" + +import type React from "react" +import { useState } from "react" +import { Outlet } from "react-router-dom" +import Sidebar from "../components/Sidebar" +import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow" +import { steps } from "../constants/learningSteps/steps" const LearnNow: React.FC = () => { + const [isSidebarOpen, setIsSidebarOpen] = useState(true) + + const toggleSidebar = () => { + setIsSidebarOpen(!isSidebarOpen) + } + return ( - - + + - + - ); -}; + ) +} -export default LearnNow; +export default LearnNow diff --git a/src/styles/components/Sidebar.ts b/src/styles/components/Sidebar.ts index 81136a41..fec0b9ec 100644 --- a/src/styles/components/Sidebar.ts +++ b/src/styles/components/Sidebar.ts @@ -1,15 +1,16 @@ import styled from "styled-components"; import { NavLink } from "react-router-dom"; -export const SidebarContainer = styled.div` - width: 260px; +export const SidebarContainer = styled.div<{ isOpen?: boolean }>` + width: 100%; + height: 100%; background-color: var(--bg-color) !important; padding: 1rem; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - border-radius: 4px; position: relative; overflow-y: auto; border-right: 1px solid #ddd; + transition: all 0.3s ease; + @media (max-width: 768px) { width: 100%; height: auto; @@ -21,13 +22,18 @@ export const SidebarTitle = styled.h2` font-size: 1.2rem; font-weight: 500; margin-bottom: 1rem; + margin-top: 2.5rem; color: var(--text-color) !important; + opacity: 1; + transition: opacity 0.3s ease; `; export const SidebarList = styled.ul` list-style: none; padding: 0; margin: 0; + opacity: 1; + transition: opacity 0.3s ease; `; export const SidebarListItem = styled.li` @@ -98,4 +104,27 @@ export const DividerLine = styled.div` height: 1px; background-color: #ddd; margin: 7rem 0 1rem 0; +`; + +export const HamburgerButton = styled.button<{ isOpen?: boolean }>` + background: none; + border: none; + color: var(--text-color); + font-size: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 10px; + right: ${props => props.isOpen ? "220px" : "20px"}; + z-index: 100; + width: 40px; + height: 40px; + border-radius: 4px; + transition: all 0.3s ease; + &:hover { + color: #19c6c7; + background-color: rgba(25, 198, 199, 0.1); + } `; \ No newline at end of file diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts index fd674a52..0ba9ebe5 100644 --- a/src/styles/pages/LearnNow.ts +++ b/src/styles/pages/LearnNow.ts @@ -1,22 +1,28 @@ -import styled from "styled-components"; +import styled from "styled-components" export const LearnNowContainer = styled.div` display: flex; -`; +` -export const SidebarContainer = styled.div` - width: 250px; +export const SidebarContainer = styled.div<{ isOpen?: boolean }>` + width: ${(props) => (props.isOpen ? "250px" : "60px")}; background-color: var(--bg-color) !important; padding: 0; border-right: 1px solid var(--border-color) !important; + transition: width 0.3s ease; + overflow: hidden; h2 { margin-top: 0; + opacity: ${(props) => (props.isOpen ? "1" : "0")}; + transition: opacity 0.2s ease; } ul { list-style: none; padding: 0; + opacity: ${(props) => (props.isOpen ? "1" : "0")}; + transition: opacity 0.2s ease; } li { @@ -27,11 +33,13 @@ export const SidebarContainer = styled.div` text-decoration: none; color: var(--text-color) !important; } -`; +` -export const ContentContainer = styled.div` +export const ContentContainer = styled.div<{ isSidebarOpen?: boolean }>` flex: 1; padding: 20px; background-color: var(--bg-color) !important; color: var(--text-color) !important; -`; + margin-left: ${(props) => (props.isSidebarOpen ? "0" : "-190px")}; + transition: margin-left 0.3s ease; +`