From 742012f22a86a89dc1efd315031fb958609bdc0d Mon Sep 17 00:00:00 2001 From: kimminna Date: Tue, 7 Jul 2026 18:23:52 +0900 Subject: [PATCH 01/12] =?UTF-8?q?feat(web):=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=85=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20(#110)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - (main) 레이아웃 전체 스크롤을 막고 main 영역만 내부 스크롤되도록 했습니다 - NavigationSidebar를 왼쪽에 fixed로 고정했습니다 - (with-time-sidebar) 라우트 그룹을 신설해 home/today에만 TimeSidebar가 적용되도록 했습니다 - TimeSidebar를 오른쪽에 fixed로 고정하고 레일 형태로 접고 펼 수 있도록 했습니다 - 레이아웃의 클라이언트 로직을 WithTimeSidebarContainer, MainShellContainer로 분리했습니다 - 페이지별 Header 조합(FocusHeaderContainer, StatisticsHeaderContainer, HomeHeaderContainer)을 추가하고 공통 빈 Header 렌더링을 제거했습니다 - NavigationSidebarContext로 왼쪽 사이드바 열림/닫힘 상태를 페이지 헤더와 공유하도록 했습니다 - 접힘 애니메이션을 width 대신 transform/opacity 기반으로 전환했습니다 (width:0 렌더링 버그 우회) --- .../_containers/WithTimeSidebarContainer.tsx | 39 ++++++++ .../home/_components/HomeDateInformation.tsx | 0 .../home/_components/HomeTodoCard.tsx | 4 +- .../home/_containers/HomeHeaderContainer.tsx | 31 ++++++ .../home/_containers/HomeTodoContainer.tsx | 10 +- .../home/_mocks/todo-mock.ts | 2 +- .../home/_queries}/.gitkeep | 0 .../home/_types/todo-type.ts | 0 .../home/_utils/date.ts | 0 .../home/_utils/todo-time.ts | 0 .../(main)/(with-time-sidebar)/home/page.tsx | 13 +++ .../(main)/(with-time-sidebar)/layout.tsx | 11 +++ .../today/_components}/.gitkeep | 0 .../today/_containers}/.gitkeep | 0 .../today/_queries}/.gitkeep | 0 .../{ => (with-time-sidebar)}/today/page.tsx | 0 .../(main)/_containers/MainShellContainer.tsx | 39 ++++++++ .../_containers/FocusHeaderContainer.tsx | 12 +++ .../app/[locale]/(main)/focus/page.tsx | 4 +- .../app/[locale]/(main)/home/page.tsx | 9 -- apps/timo-web/app/[locale]/(main)/layout.tsx | 7 +- .../_containers/StatisticsHeaderContainer.tsx | 32 ++++++ .../app/[locale]/(main)/statistics/page.tsx | 4 +- .../(main)/today/_components/.gitkeep | 0 .../(main)/today/_containers/.gitkeep | 0 .../[locale]/(main)/today/_queries/.gitkeep | 0 .../{ => navigation}/NavigationSidebar.tsx | 17 +++- .../navigation/NavigationSidebarContext.tsx | 44 +++++++++ .../layout/sidebar/time/TimeSidebar.tsx | 98 +++++++++++++++++++ .../time}/TimeSidebarHeader.tsx | 17 +++- .../time}/TimeboxPanel.tsx | 0 .../time}/TimerPanel.tsx | 0 .../layout/time-sidebar/TimeSidebar.tsx | 72 -------------- 33 files changed, 365 insertions(+), 100 deletions(-) create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer.tsx rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_components/HomeDateInformation.tsx (100%) rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_components/HomeTodoCard.tsx (97%) create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_containers/HomeTodoContainer.tsx (86%) rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_mocks/todo-mock.ts (94%) rename apps/timo-web/app/[locale]/(main)/{focus/_containers => (with-time-sidebar)/home/_queries}/.gitkeep (100%) rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_types/todo-type.ts (100%) rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_utils/date.ts (100%) rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/home/_utils/todo-time.ts (100%) create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/layout.tsx rename apps/timo-web/app/[locale]/(main)/{focus/_queries => (with-time-sidebar)/today/_components}/.gitkeep (100%) rename apps/timo-web/app/[locale]/(main)/{home/_queries => (with-time-sidebar)/today/_containers}/.gitkeep (100%) rename apps/timo-web/app/[locale]/(main)/{statistics/_containers => (with-time-sidebar)/today/_queries}/.gitkeep (100%) rename apps/timo-web/app/[locale]/(main)/{ => (with-time-sidebar)}/today/page.tsx (100%) create mode 100644 apps/timo-web/app/[locale]/(main)/_containers/MainShellContainer.tsx create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_containers/FocusHeaderContainer.tsx delete mode 100644 apps/timo-web/app/[locale]/(main)/home/page.tsx create mode 100644 apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx delete mode 100644 apps/timo-web/app/[locale]/(main)/today/_components/.gitkeep delete mode 100644 apps/timo-web/app/[locale]/(main)/today/_containers/.gitkeep delete mode 100644 apps/timo-web/app/[locale]/(main)/today/_queries/.gitkeep rename apps/timo-web/components/layout/sidebar/{ => navigation}/NavigationSidebar.tsx (83%) create mode 100644 apps/timo-web/components/layout/sidebar/navigation/NavigationSidebarContext.tsx create mode 100644 apps/timo-web/components/layout/sidebar/time/TimeSidebar.tsx rename apps/timo-web/components/layout/{time-sidebar => sidebar/time}/TimeSidebarHeader.tsx (57%) rename apps/timo-web/components/layout/{time-sidebar => sidebar/time}/TimeboxPanel.tsx (100%) rename apps/timo-web/components/layout/{time-sidebar => sidebar/time}/TimerPanel.tsx (100%) delete mode 100644 apps/timo-web/components/layout/time-sidebar/TimeSidebar.tsx diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer.tsx new file mode 100644 index 00000000..d898d988 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { useState } from "react"; + +import { TimeSidebar } from "@/components/layout/sidebar/time/TimeSidebar"; + +interface WithTimeSidebarContainerProps { + children: React.ReactNode; +} + +const CONTENT_MARGIN_CLASS_NAME = { + open: "mr-76", + collapsed: "mr-18", +} as const; + +export const WithTimeSidebarContainer = ({ + children, +}: WithTimeSidebarContainerProps) => { + const [isOpen, setIsOpen] = useState(true); + + return ( + <> +
+ {children} +
+ + setIsOpen((prev) => !prev)} + /> + + ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/home/_components/HomeDateInformation.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation.tsx similarity index 100% rename from apps/timo-web/app/[locale]/(main)/home/_components/HomeDateInformation.tsx rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation.tsx diff --git a/apps/timo-web/app/[locale]/(main)/home/_components/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx similarity index 97% rename from apps/timo-web/app/[locale]/(main)/home/_components/HomeTodoCard.tsx rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx index b820082a..a1c525d0 100644 --- a/apps/timo-web/app/[locale]/(main)/home/_components/HomeTodoCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx @@ -18,9 +18,9 @@ import { cn } from "@repo/timo-design-system/utils"; import type { TodoPriorityTypes, TodoTimerStatusTypes, -} from "@/app/[locale]/(main)/home/_types/todo-type"; +} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type"; -import { convertDurationToTimeText } from "@/app/[locale]/(main)/home/_utils/todo-time"; +import { convertDurationToTimeText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time"; const PRIORITY_MAP: Record< TodoPriorityTypes, diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx new file mode 100644 index 00000000..874c8b1a --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { useState } from "react"; + +import { Header } from "@/components/layout/header/Header"; +import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext"; + +const VIEW_OPTIONS = ["목록형", "캘린더형"] as const; + +export const HomeHeaderContainer = () => { + const [view, setView] = useState(VIEW_OPTIONS[0]); + const { isOpen, toggle } = useNavigationSidebar(); + + return ( +
+ + + + } + right={ + + } + /> + ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/home/_containers/HomeTodoContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx similarity index 86% rename from apps/timo-web/app/[locale]/(main)/home/_containers/HomeTodoContainer.tsx rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx index 05de031a..57b8ea46 100644 --- a/apps/timo-web/app/[locale]/(main)/home/_containers/HomeTodoContainer.tsx +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx @@ -3,15 +3,15 @@ import { AddTaskButton } from "@repo/timo-design-system/ui"; import { useState } from "react"; -import type { Todo } from "@/app/[locale]/(main)/home/_types/todo-type"; +import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type"; -import { HomeDateInformation } from "@/app/[locale]/(main)/home/_components/HomeDateInformation"; -import { HomeTodoCard } from "@/app/[locale]/(main)/home/_components/HomeTodoCard"; -import { todoMocks } from "@/app/[locale]/(main)/home/_mocks/todo-mock"; +import { HomeDateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation"; +import { HomeTodoCard } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard"; +import { todoMocks } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock"; import { convertDateToDateText, convertDateToDayOfWeek, -} from "@/app/[locale]/(main)/home/_utils/date"; +} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date"; export const HomeTodoContainer = () => { const [todos, setTodos] = useState(todoMocks); diff --git a/apps/timo-web/app/[locale]/(main)/home/_mocks/todo-mock.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts similarity index 94% rename from apps/timo-web/app/[locale]/(main)/home/_mocks/todo-mock.ts rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts index 247890a5..41926977 100644 --- a/apps/timo-web/app/[locale]/(main)/home/_mocks/todo-mock.ts +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts @@ -1,4 +1,4 @@ -import { Todo } from "@/app/[locale]/(main)/home/_types/todo-type"; +import { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type"; export const todoMocks: Todo[] = [ { diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/.gitkeep b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/.gitkeep similarity index 100% rename from apps/timo-web/app/[locale]/(main)/focus/_containers/.gitkeep rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_queries/.gitkeep diff --git a/apps/timo-web/app/[locale]/(main)/home/_types/todo-type.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts similarity index 100% rename from apps/timo-web/app/[locale]/(main)/home/_types/todo-type.ts rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts diff --git a/apps/timo-web/app/[locale]/(main)/home/_utils/date.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts similarity index 100% rename from apps/timo-web/app/[locale]/(main)/home/_utils/date.ts rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts diff --git a/apps/timo-web/app/[locale]/(main)/home/_utils/todo-time.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts similarity index 100% rename from apps/timo-web/app/[locale]/(main)/home/_utils/todo-time.ts rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx new file mode 100644 index 00000000..dc857d6d --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx @@ -0,0 +1,13 @@ +import { HomeHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer"; +import { HomeTodoContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer"; + +export default function HomePage() { + return ( + <> + +
+ +
+ + ); +} diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/layout.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/layout.tsx new file mode 100644 index 00000000..a66351dd --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/layout.tsx @@ -0,0 +1,11 @@ +import { WithTimeSidebarContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/_containers/WithTimeSidebarContainer"; + +interface WithTimeSidebarLayoutProps { + children: React.ReactNode; +} + +export default function WithTimeSidebarLayout({ + children, +}: Readonly) { + return {children}; +} diff --git a/apps/timo-web/app/[locale]/(main)/focus/_queries/.gitkeep b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/.gitkeep similarity index 100% rename from apps/timo-web/app/[locale]/(main)/focus/_queries/.gitkeep rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/.gitkeep diff --git a/apps/timo-web/app/[locale]/(main)/home/_queries/.gitkeep b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/.gitkeep similarity index 100% rename from apps/timo-web/app/[locale]/(main)/home/_queries/.gitkeep rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/.gitkeep diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/.gitkeep b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/.gitkeep similarity index 100% rename from apps/timo-web/app/[locale]/(main)/statistics/_containers/.gitkeep rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_queries/.gitkeep diff --git a/apps/timo-web/app/[locale]/(main)/today/page.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx similarity index 100% rename from apps/timo-web/app/[locale]/(main)/today/page.tsx rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx diff --git a/apps/timo-web/app/[locale]/(main)/_containers/MainShellContainer.tsx b/apps/timo-web/app/[locale]/(main)/_containers/MainShellContainer.tsx new file mode 100644 index 00000000..4774a9d2 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/_containers/MainShellContainer.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { NavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebar"; +import { + NavigationSidebarProvider, + useNavigationSidebar, +} from "@/components/layout/sidebar/navigation/NavigationSidebarContext"; + +interface MainShellContainerProps { + children: React.ReactNode; +} + +const MAIN_MARGIN_CLASS_NAME = { + open: "ml-55", + collapsed: "ml-5", +} as const; + +const MainContent = ({ children }: { children: React.ReactNode }) => { + const { isOpen } = useNavigationSidebar(); + + return ( +
+ {children} +
+ ); +}; + +export const MainShellContainer = ({ children }: MainShellContainerProps) => { + return ( + + + {children} + + ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusHeaderContainer.tsx new file mode 100644 index 00000000..0fed184e --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusHeaderContainer.tsx @@ -0,0 +1,12 @@ +"use client"; + +import { Header } from "@/components/layout/header/Header"; +import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext"; + +export const FocusHeaderContainer = () => { + const { isOpen, toggle } = useNavigationSidebar(); + + return ( +
} /> + ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/page.tsx b/apps/timo-web/app/[locale]/(main)/focus/page.tsx index e8b0076e..7937631d 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/page.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/page.tsx @@ -1,3 +1,5 @@ +import { FocusHeaderContainer } from "@/app/[locale]/(main)/focus/_containers/FocusHeaderContainer"; + export default function FocusPage() { - return <>; + return ; } diff --git a/apps/timo-web/app/[locale]/(main)/home/page.tsx b/apps/timo-web/app/[locale]/(main)/home/page.tsx deleted file mode 100644 index aea7245f..00000000 --- a/apps/timo-web/app/[locale]/(main)/home/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { HomeTodoContainer } from "@/app/[locale]/(main)/home/_containers/HomeTodoContainer"; - -export default function HomePage() { - return ( - <> - - - ); -} diff --git a/apps/timo-web/app/[locale]/(main)/layout.tsx b/apps/timo-web/app/[locale]/(main)/layout.tsx index cbc00547..404f2d97 100644 --- a/apps/timo-web/app/[locale]/(main)/layout.tsx +++ b/apps/timo-web/app/[locale]/(main)/layout.tsx @@ -1,4 +1,4 @@ -import { NavigationSidebar } from "@/components/layout/sidebar/NavigationSidebar"; +import { MainShellContainer } from "@/app/[locale]/(main)/_containers/MainShellContainer"; interface MainLayoutProps { children: React.ReactNode; @@ -6,9 +6,8 @@ interface MainLayoutProps { export default function MainLayout({ children }: Readonly) { return ( -
- -
{children}
+
+ {children}
); } diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx new file mode 100644 index 00000000..6ed75939 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx @@ -0,0 +1,32 @@ +"use client"; + +import { useState } from "react"; + +import { Header } from "@/components/layout/header/Header"; + +const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("ko-KR", { + year: "numeric", + month: "long", +}); + +const addMonths = (date: Date, amount: number) => + new Date(date.getFullYear(), date.getMonth() + amount, 1); + +export const StatisticsHeaderContainer = () => { + const [currentMonth, setCurrentMonth] = useState(() => new Date()); + + const handlePrev = () => setCurrentMonth((prev) => addMonths(prev, -1)); + const handleNext = () => setCurrentMonth((prev) => addMonths(prev, 1)); + + return ( +
+ } + /> + ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/statistics/page.tsx b/apps/timo-web/app/[locale]/(main)/statistics/page.tsx index 73073c83..a602413c 100644 --- a/apps/timo-web/app/[locale]/(main)/statistics/page.tsx +++ b/apps/timo-web/app/[locale]/(main)/statistics/page.tsx @@ -1,3 +1,5 @@ +import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer"; + export default function StatisticsPage() { - return <>; + return ; } diff --git a/apps/timo-web/app/[locale]/(main)/today/_components/.gitkeep b/apps/timo-web/app/[locale]/(main)/today/_components/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/apps/timo-web/app/[locale]/(main)/today/_containers/.gitkeep b/apps/timo-web/app/[locale]/(main)/today/_containers/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/apps/timo-web/app/[locale]/(main)/today/_queries/.gitkeep b/apps/timo-web/app/[locale]/(main)/today/_queries/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/apps/timo-web/components/layout/sidebar/NavigationSidebar.tsx b/apps/timo-web/components/layout/sidebar/navigation/NavigationSidebar.tsx similarity index 83% rename from apps/timo-web/components/layout/sidebar/NavigationSidebar.tsx rename to apps/timo-web/components/layout/sidebar/navigation/NavigationSidebar.tsx index 678cbb64..a41840a9 100644 --- a/apps/timo-web/components/layout/sidebar/NavigationSidebar.tsx +++ b/apps/timo-web/components/layout/sidebar/navigation/NavigationSidebar.tsx @@ -19,9 +19,11 @@ import { TodayOnIcon, } from "@repo/timo-design-system/icons"; import { TabButton } from "@repo/timo-design-system/ui"; +import { cn } from "@repo/timo-design-system/utils"; import Image from "next/image"; import { useTranslations } from "next-intl"; +import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext"; import { ROUTES } from "@/constants/routes"; import { Link, usePathname } from "@/i18n/navigation"; @@ -70,13 +72,24 @@ const NAV_ITEMS = [ export const NavigationSidebar = () => { const t = useTranslations("Navigation"); + const pathname = usePathname(); + + const { isOpen } = useNavigationSidebar(); + const isActivePath = (pathname: string, href: string) => pathname === href || pathname.startsWith(`${href}/`); return ( -