From e3e03775fc58f017c6453813b003fb5402e0e6e4 Mon Sep 17 00:00:00 2001 From: Ashwin-Khowala Date: Sat, 24 May 2025 12:40:18 +0530 Subject: [PATCH 1/2] enhanced the app bar collapse feature --- src/app/(main)/layout.tsx | 18 +++++++++++++++--- src/app/courses/layout.tsx | 12 +++++++++++- src/components/Appbar.tsx | 12 ++++++++++-- src/store/atoms/isSideBarCollabsed.ts | 6 ++++++ 4 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 src/store/atoms/isSideBarCollabsed.ts diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index a5fef82e1..0054a69f3 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -1,15 +1,27 @@ +"use client"; import { Appbar } from '@/components/Appbar'; +import { useRecoilValue } from 'recoil'; +import { isSideBarCollapsed } from '@/store/atoms/isSideBarCollabsed'; import React from 'react'; interface Props { children: React.ReactNode; } -export default (props: Props) => { +export default function Layout({ children }: Props) { + + const isCollapsed=useRecoilValue(isSideBarCollapsed); + return (
-
{props.children}
+
+ {children} +
); -}; +} diff --git a/src/app/courses/layout.tsx b/src/app/courses/layout.tsx index 377b9ecbf..8215191c0 100644 --- a/src/app/courses/layout.tsx +++ b/src/app/courses/layout.tsx @@ -1,15 +1,25 @@ +'use client'; import { Appbar } from '@/components/Appbar'; +import { isSideBarCollapsed } from '@/store/atoms/isSideBarCollabsed'; import React from 'react'; +import { useRecoilValue } from 'recoil'; interface Props { children: React.ReactNode; } const CourseLayout = (props: Props) => { + + const isCollapsed=useRecoilValue(isSideBarCollapsed); + return (
-
{props.children}
+
+ {props.children}
); }; diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx index 56a3cc30e..8fcd2e321 100644 --- a/src/components/Appbar.tsx +++ b/src/components/Appbar.tsx @@ -10,6 +10,8 @@ import { import { SidebarItems } from './ui/sidebar-items'; import { useState, useEffect, useRef } from 'react'; import { motion } from 'framer-motion'; +import { isSideBarCollapsed } from '@/store/atoms/isSideBarCollabsed'; +import { useRecoilState } from 'recoil'; export const menuOptions = [ { id: 1, name: 'Home', Component: Home, href: '/home' }, @@ -45,6 +47,8 @@ export default useMediaQuery; export const Appbar = () => { const [isCollapsed, setIsCollapsed] = useState(true); + const [isSidebarCollapsed,setIsSidebarCollapsed] = useRecoilState(isSideBarCollapsed); + setIsSidebarCollapsed(isCollapsed); const [isMounted, setIsMounted] = useState(false); const isMediumToXL = useMediaQuery( '(min-width: 768px) and (max-width: 1535px)', @@ -56,6 +60,7 @@ export const Appbar = () => { const handleClickOutside = (event: MouseEvent) => { if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) { setIsCollapsed(true); + setIsSidebarCollapsed(true); } }; document.addEventListener('mousedown', handleClickOutside); @@ -64,7 +69,10 @@ export const Appbar = () => { }; }, []); - const toggleCollapse = () => setIsCollapsed(!isCollapsed); + const toggleCollapse = () =>{ + setIsCollapsed(!isCollapsed); + setIsSidebarCollapsed(!isSidebarCollapsed); + } const sidebarVariants = { expanded: { width: '20vw' }, @@ -88,7 +96,7 @@ export const Appbar = () => { className="fixed left-0 top-0 z-[999] hidden h-full flex-col border-r border-primary/10 bg-background dark:bg-background lg:flex min-w-16" >
-
+
Date: Sat, 24 May 2025 15:05:43 +0530 Subject: [PATCH 2/2] fixed the linting issue --- package.json | 1 + src/app/(main)/layout.tsx | 4 +--- src/app/courses/layout.tsx | 2 -- src/components/Appbar.tsx | 4 ++-- src/components/VideoPlayer2.tsx | 2 -- src/components/posts/form/form-vote.tsx | 1 - 6 files changed, 4 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 6f5c62145..ce88f9493 100644 --- a/package.json +++ b/package.json @@ -103,6 +103,7 @@ "eslint": "^8.56.0", "jsdom": "^24.0.0", "prettier": "^3.2.4", + "prettier-plugin-tailwindcss": "^0.6.11", "prisma": "^5.18.0", "tailwindcss": "^3.3.0", "ts-node": "^10.9.2", diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 0054a69f3..84a094321 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -8,10 +8,8 @@ interface Props { children: React.ReactNode; } -export default function Layout({ children }: Props) { - +export default function Layout({children}: Props) { const isCollapsed=useRecoilValue(isSideBarCollapsed); - return (
diff --git a/src/app/courses/layout.tsx b/src/app/courses/layout.tsx index 8215191c0..57f3720a7 100644 --- a/src/app/courses/layout.tsx +++ b/src/app/courses/layout.tsx @@ -9,9 +9,7 @@ interface Props { } const CourseLayout = (props: Props) => { - const isCollapsed=useRecoilValue(isSideBarCollapsed); - return (
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx index 8fcd2e321..ed5741651 100644 --- a/src/components/Appbar.tsx +++ b/src/components/Appbar.tsx @@ -69,10 +69,10 @@ export const Appbar = () => { }; }, []); - const toggleCollapse = () =>{ + const toggleCollapse = () => { setIsCollapsed(!isCollapsed); setIsSidebarCollapsed(!isSidebarCollapsed); - } + }; const sidebarVariants = { expanded: { width: '20vw' }, diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx index 6e317c1ca..70cc1970b 100644 --- a/src/components/VideoPlayer2.tsx +++ b/src/components/VideoPlayer2.tsx @@ -111,9 +111,7 @@ export const VideoPlayer: FunctionComponent = ({ }; const setupZoomFeatures = (player: any) => { - if (typeof window === 'undefined' || typeof document === 'undefined') return; - const videoEl = player.el().querySelector('video'); const container = player.el(); diff --git a/src/components/posts/form/form-vote.tsx b/src/components/posts/form/form-vote.tsx index 1ac4cfcbc..77a48e5bf 100644 --- a/src/components/posts/form/form-vote.tsx +++ b/src/components/posts/form/form-vote.tsx @@ -54,7 +54,6 @@ const VoteForm: React.FC = ({ ); }; - const userVoted = Boolean(votesArr.length); const userVoteVal = votesArr[0];