From a6f74e0c22bb394f4a74d34b930f10f99f24a1ad Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Mon, 16 Jun 2025 13:01:20 +0200 Subject: [PATCH] feat: add Radix UI components and implement sidebar functionality - Added new Radix UI components: Dialog, Tooltip, Separator, and updated existing components. - Introduced a Sidebar component with collapsible functionality and mobile responsiveness. - Implemented a custom hook `useIsMobile` to manage mobile state. - Updated package dependencies in package.json and yarn.lock for new components. - Created utility components such as Button, Skeleton, and Input for consistent styling. feat: add AppSidebar component with collapsible functionality and sidebar menu - Introduced AppSidebar component for a customizable sidebar layout. - Implemented collapsible sections using Radix UI's Collapsible component. - Added sidebar menu items with icons and links for navigation. - Created Sidebar UI components including SidebarHeader, SidebarFooter, and SidebarMenu. - Integrated ThemePicker for theme selection within the sidebar. - Updated sidebar styles and layout for better responsiveness. chore: add @radix-ui/react-collapsible dependency - Added @radix-ui/react-collapsible package to manage collapsible UI elements. --- package.json | 9 +- src/app/{ => (main)}/home/page.tsx | 4 +- src/app/(main)/layout.tsx | 23 + src/app/globals.css | 18 +- src/components/custom-ui/app-sidebar.tsx | 147 ++++ src/components/misc/header.tsx | 23 + src/components/misc/logo.tsx | 1 + src/components/ui/collapsible.tsx | 33 + src/components/ui/separator.tsx | 7 +- src/components/ui/sheet.tsx | 139 ++++ src/components/ui/sidebar.tsx | 725 +++++++++++++++++++ src/components/ui/skeleton.tsx | 13 + src/components/ui/tooltip.tsx | 61 ++ src/components/wrappers/sidebar-provider.tsx | 23 + src/hooks/use-mobile.ts | 19 + yarn.lock | 482 +++++++----- 16 files changed, 1520 insertions(+), 207 deletions(-) rename src/app/{ => (main)}/home/page.tsx (81%) create mode 100644 src/app/(main)/layout.tsx create mode 100644 src/components/custom-ui/app-sidebar.tsx create mode 100644 src/components/misc/header.tsx create mode 100644 src/components/ui/collapsible.tsx create mode 100644 src/components/ui/sheet.tsx create mode 100644 src/components/ui/sidebar.tsx create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/components/wrappers/sidebar-provider.tsx create mode 100644 src/hooks/use-mobile.ts diff --git a/package.json b/package.json index f943b16..1623ef9 100644 --- a/package.json +++ b/package.json @@ -27,20 +27,23 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@hookform/resolvers": "^5.0.1", "@prisma/client": "^6.9.0", + "@radix-ui/react-collapsible": "^1.1.11", + "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dropdown-menu": "^2.1.14", "@radix-ui/react-hover-card": "^1.1.13", "@radix-ui/react-label": "^2.1.6", "@radix-ui/react-scroll-area": "^1.2.8", "@radix-ui/react-select": "^2.2.4", - "@radix-ui/react-separator": "^1.1.6", - "@radix-ui/react-slot": "^1.2.2", + "@radix-ui/react-separator": "^1.1.7", + "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-switch": "^1.2.4", "@radix-ui/react-tabs": "^1.1.11", + "@radix-ui/react-tooltip": "^1.2.7", "@tanstack/react-query": "^5.80.7", "bcryptjs": "^3.0.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "lucide-react": "^0.511.0", + "lucide-react": "^0.515.0", "next": "15.4.0-canary.95", "next-auth": "^5.0.0-beta.25", "next-themes": "^0.4.6", diff --git a/src/app/home/page.tsx b/src/app/(main)/home/page.tsx similarity index 81% rename from src/app/home/page.tsx rename to src/app/(main)/home/page.tsx index 77f3cf8..c381c03 100644 --- a/src/app/home/page.tsx +++ b/src/app/(main)/home/page.tsx @@ -1,15 +1,13 @@ 'use client'; import { RedirectButton } from '@/components/buttons/redirect-button'; -import { ThemePicker } from '@/components/misc/theme-picker'; import { useGetApiUserMe } from '@/generated/api/user/user'; export default function Home() { const { data, isLoading } = useGetApiUserMe(); return ( -
-
{}
+

Hello{' '} diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx new file mode 100644 index 0000000..7106e70 --- /dev/null +++ b/src/app/(main)/layout.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { cookies } from 'next/headers'; + +import { AppSidebar } from '@/components/custom-ui/app-sidebar'; +import SidebarProviderWrapper from '@/components/wrappers/sidebar-provider'; +import Header from '@/components/misc/header'; + +export default async function Layout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const cookieStore = await cookies(); + const defaultOpen = cookieStore.get('sidebar_state')?.value === 'true'; + return ( + <> + + +
{children}
+ + + ); +} diff --git a/src/app/globals.css b/src/app/globals.css index f85cb2f..a5f7eaf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -55,6 +55,8 @@ --card: var(--neutral-800); + --sidebar-width-icon: 32px; + /* ------------------- */ --foreground: oklch(0.13 0.028 261.692); @@ -95,17 +97,17 @@ --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0.002 247.839); + --sidebar: var(--background); - --sidebar-foreground: oklch(0.13 0.028 261.692); + --sidebar-foreground: var(--text); --sidebar-primary: oklch(0.21 0.034 264.665); - --sidebar-primary-foreground: oklch(0.985 0.002 247.839); + --sidebar-primary-foreground: var(--text); --sidebar-accent: oklch(0.967 0.003 264.542); - --sidebar-accent-foreground: oklch(0.21 0.034 264.665); + --sidebar-accent-foreground: var(--text); --sidebar-border: oklch(0.928 0.006 264.531); @@ -339,17 +341,17 @@ --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.21 0.034 264.665); + --sidebar: var(--background); - --sidebar-foreground: oklch(0.985 0.002 247.839); + --sidebar-foreground: var(--text); --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0.002 247.839); + --sidebar-primary-foreground: var(--text); --sidebar-accent: oklch(0.278 0.033 256.848); - --sidebar-accent-foreground: oklch(0.985 0.002 247.839); + --sidebar-accent-foreground: var(--text); --sidebar-border: oklch(1 0 0 / 10%); diff --git a/src/components/custom-ui/app-sidebar.tsx b/src/components/custom-ui/app-sidebar.tsx new file mode 100644 index 0000000..b279c73 --- /dev/null +++ b/src/components/custom-ui/app-sidebar.tsx @@ -0,0 +1,147 @@ +'use client'; + +import React from 'react'; +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupAction, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarInput, + SidebarInset, + SidebarMenu, + SidebarMenuAction, + SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSkeleton, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, + SidebarRail, + SidebarSeparator, + SidebarTrigger, + useSidebar, +} from '@/components/ui/sidebar'; + +import { ChevronDown } from 'lucide-react'; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '@/components/ui/collapsible'; + +import Logo from '@/components/misc/logo'; + +import Link from 'next/link'; + +import { ThemePicker } from '@/components/misc/theme-picker'; + +import { + Star, + CalendarDays, + User, + Users, + CalendarClock, + CalendarPlus, +} from 'lucide-react'; + +const items = [ + { + title: 'Calendar', + url: '#', + icon: CalendarDays, + }, + { + title: 'Friends', + url: '#', + icon: User, + }, + { + title: 'Groups', + url: '#', + icon: Users, + }, + { + title: 'Events', + url: '#', + icon: CalendarClock, + }, +]; + +export function AppSidebar() { + return ( + <> + + + + + + + + + + + + {' '} + + Favorites + + + + + + + + + + + + + {items.map((item) => ( + + + + + + {item.title} + + + + + ))} + + + + + + + + + New Event + + + + + + + + ); +} diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx new file mode 100644 index 0000000..dbf8a1f --- /dev/null +++ b/src/components/misc/header.tsx @@ -0,0 +1,23 @@ +import { SidebarTrigger } from '@/components/ui/sidebar'; +import { ThemePicker } from '@/components/misc/theme-picker'; + +export default function Header({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( +
+
+ + + + Search + + + +
+
{children}
+
+ ); +} diff --git a/src/components/misc/logo.tsx b/src/components/misc/logo.tsx index 129adef..739fc90 100644 --- a/src/components/misc/logo.tsx +++ b/src/components/misc/logo.tsx @@ -90,6 +90,7 @@ export default function Logo({ return ( {alt) { + return ; +} + +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent }; diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index 3b4f1ef..3234cdc 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -13,10 +13,13 @@ function Separator({ }: React.ComponentProps) { return ( ); diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx new file mode 100644 index 0000000..84649ad --- /dev/null +++ b/src/components/ui/sheet.tsx @@ -0,0 +1,139 @@ +"use client" + +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Sheet({ ...props }: React.ComponentProps) { + return +} + +function SheetTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function SheetClose({ + ...props +}: React.ComponentProps) { + return +} + +function SheetPortal({ + ...props +}: React.ComponentProps) { + return +} + +function SheetOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function SheetContent({ + className, + children, + side = "right", + ...props +}: React.ComponentProps & { + side?: "top" | "right" | "bottom" | "left" +}) { + return ( + + + + {children} + + + Close + + + + ) +} + +function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function SheetTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function SheetDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + Sheet, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +} diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx new file mode 100644 index 0000000..6b68b8f --- /dev/null +++ b/src/components/ui/sidebar.tsx @@ -0,0 +1,725 @@ +'use client'; + +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, VariantProps } from 'class-variance-authority'; +import { PanelLeftIcon } from 'lucide-react'; + +import { useIsMobile } from '@/hooks/use-mobile'; +import { cn } from '@/lib/utils'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Separator } from '@/components/ui/separator'; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, +} from '@/components/ui/sheet'; +import { Skeleton } from '@/components/ui/skeleton'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip'; + +const SIDEBAR_COOKIE_NAME = 'sidebar_state'; +const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; +const SIDEBAR_WIDTH = '16rem'; +const SIDEBAR_WIDTH_MOBILE = '18rem'; +const SIDEBAR_WIDTH_ICON = '4rem'; +const SIDEBAR_KEYBOARD_SHORTCUT = 'b'; + +type SidebarContextProps = { + state: 'expanded' | 'collapsed'; + open: boolean; + setOpen: (open: boolean) => void; + openMobile: boolean; + setOpenMobile: (open: boolean) => void; + isMobile: boolean; + toggleSidebar: () => void; +}; + +const SidebarContext = React.createContext(null); + +function useSidebar() { + const context = React.useContext(SidebarContext); + if (!context) { + throw new Error('useSidebar must be used within a SidebarProvider.'); + } + + return context; +} + +function SidebarProvider({ + defaultOpen = true, + open: openProp, + onOpenChange: setOpenProp, + className, + style, + children, + ...props +}: React.ComponentProps<'div'> & { + defaultOpen?: boolean; + open?: boolean; + onOpenChange?: (open: boolean) => void; +}) { + const isMobile = useIsMobile(); + const [openMobile, setOpenMobile] = React.useState(false); + + // This is the internal state of the sidebar. + // We use openProp and setOpenProp for control from outside the component. + const [_open, _setOpen] = React.useState(defaultOpen); + const open = openProp ?? _open; + const setOpen = React.useCallback( + (value: boolean | ((value: boolean) => boolean)) => { + const openState = typeof value === 'function' ? value(open) : value; + if (setOpenProp) { + setOpenProp(openState); + } else { + _setOpen(openState); + } + + // This sets the cookie to keep the sidebar state. + document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; + }, + [setOpenProp, open], + ); + + // Helper to toggle the sidebar. + const toggleSidebar = React.useCallback(() => { + return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open); + }, [isMobile, setOpen, setOpenMobile]); + + // Adds a keyboard shortcut to toggle the sidebar. + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if ( + event.key === SIDEBAR_KEYBOARD_SHORTCUT && + (event.metaKey || event.ctrlKey) + ) { + event.preventDefault(); + toggleSidebar(); + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [toggleSidebar]); + + // We add a state so that we can do data-state="expanded" or "collapsed". + // This makes it easier to style the sidebar with Tailwind classes. + const state = open ? 'expanded' : 'collapsed'; + + const contextValue = React.useMemo( + () => ({ + state, + open, + setOpen, + isMobile, + openMobile, + setOpenMobile, + toggleSidebar, + }), + [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar], + ); + + return ( + + +
+ {children} +
+ + + ); +} + +function Sidebar({ + side = 'left', + variant = 'sidebar', + collapsible = 'offcanvas', + className, + children, + ...props +}: React.ComponentProps<'div'> & { + side?: 'left' | 'right'; + variant?: 'sidebar' | 'floating' | 'inset'; + collapsible?: 'offcanvas' | 'icon' | 'none'; +}) { + const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); + + if (collapsible === 'none') { + return ( +
+ {children} +
+ ); + } + + if (isMobile) { + return ( + + + + Sidebar + Displays the mobile sidebar. + +
{children}
+ + + ); + } + + return ( +
+ {/* This is what handles the sidebar gap on desktop */} +
+ +
+ ); +} + +function SidebarTrigger({ + className, + onClick, + ...props +}: React.ComponentProps) { + const { toggleSidebar } = useSidebar(); + + return ( + + ); +} + +function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) { + const { toggleSidebar } = useSidebar(); + + return ( +