Skip to content

Commit

Permalink
rtl fix for sidebar icon + mark custom comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sebastian-ubs
Sebastian-ubs committed Dec 12, 2024
1 parent 08afe7b commit c1884c7
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 80 deletions.
148 changes: 70 additions & 78 deletions lib/platform-bible-react/src/components/shadcn-ui/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { VariantProps, cva } from 'class-variance-authority';
import { PanelLeft } from 'lucide-react';
import { PanelLeft, PanelRight } from 'lucide-react';

import { Button } from '@/components/shadcn-ui/button';
import { Input } from '@/components/shadcn-ui/input';
Expand All @@ -16,20 +16,22 @@ import {
import { cn } from '@/utils/shadcn-ui.util';

/**
* Changes from the original code from Shadcn- Removed uses of useIsMobile, Sheet, and SheetContent.
* Also removed the parts setting COOKIES.
* CUSTOM: Changes from the original code from Shadcn- Removed uses of useIsMobile, Sheet, and
* SheetContent. Also removed the parts setting COOKIES.
*/

const SIDEBAR_WIDTH = '16rem';
const SIDEBAR_WIDTH_ICON = '3rem';
// Commented this out pending a discussion with UX about keyboard shortcuts
// CUSTOM: Commented this out pending a discussion with UX about keyboard shortcuts
// const SIDEBAR_KEYBOARD_SHORTCUT = 'b';

type SidebarContextProps = {
state: 'expanded' | 'collapsed';
open: boolean;
setOpen: (open: boolean) => void;
toggleSidebar: () => void;
// CUSTOM: this was moved from Sidebar to SidebarProvider to also be able to flip the icon based on the side
side: 'left' | 'right';
};

const SidebarContext = React.createContext<SidebarContextProps | undefined>(undefined);
Expand All @@ -49,6 +51,7 @@ const SidebarProvider = React.forwardRef<
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
side?: 'left' | 'right';
}
>(
(
Expand All @@ -59,6 +62,7 @@ const SidebarProvider = React.forwardRef<
className,
style,
children,
side = 'left',
...props
},
ref,
Expand All @@ -84,7 +88,7 @@ const SidebarProvider = React.forwardRef<
return setOpen((open) => !open);
}, [setOpen]);

// Commented this out pending a discussion with UX about keyboard shortcuts
// CUSTOM: Commented this out pending a discussion with UX about keyboard shortcuts
// Adds a keyboard shortcut to toggle the sidebar.
// React.useEffect(() => {
// const handleKeyDown = (event: KeyboardEvent) => {
Expand All @@ -108,8 +112,9 @@ const SidebarProvider = React.forwardRef<
open: isOpen,
setOpen,
toggleSidebar,
side,
}),
[state, isOpen, setOpen, toggleSidebar],
[state, isOpen, setOpen, toggleSidebar, side],
);

return (
Expand Down Expand Up @@ -144,92 +149,79 @@ SidebarProvider.displayName = 'SidebarProvider';
const Sidebar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<'div'> & {
side?: 'left' | 'right';
variant?: 'sidebar' | 'floating' | 'inset';
collapsible?: 'offcanvas' | 'icon' | 'none';
}
>(
(
{
side = 'left',
variant = 'sidebar',
collapsible = 'offcanvas',
className,
children,
...props
},
ref,
) => {
const { state } = useSidebar();

if (collapsible === 'none') {
return (
<div
className={cn(
'tw-flex tw-h-full tw-w-[--sidebar-width] tw-flex-col tw-bg-sidebar tw-text-sidebar-foreground',
className,
)}
ref={ref}
{...props}
>
{children}
</div>
);
}
>(({ variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {
const context = useSidebar();

if (collapsible === 'none') {
return (
<div
className={cn(
'tw-flex tw-h-full tw-w-[--sidebar-width] tw-flex-col tw-bg-sidebar tw-text-sidebar-foreground',
className,
)}
ref={ref}
className="tw-group tw-peer tw-hidden tw-text-sidebar-foreground md:tw-block"
data-state={state}
data-collapsible={state === 'collapsed' ? collapsible : ''}
data-variant={variant}
data-side={side}
{...props}
>
{children}
</div>
);
}

return (
<div
ref={ref}
className="tw-group tw-peer tw-hidden tw-text-sidebar-foreground md:tw-block"
data-state={context.state}
data-collapsible={context.state === 'collapsed' ? collapsible : ''}
data-variant={variant}
data-side={context.side}
>
{/* This is what handles the sidebar gap on desktop */}
<div
className={cn(
'tw-relative tw-h-svh tw-w-[--sidebar-width] tw-bg-transparent tw-transition-[width] tw-duration-200 tw-ease-linear',
'group-data-[collapsible=offcanvas]:tw-w-0',
'group-data-[side=right]:tw-rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:tw-w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
: 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon]',
)}
/>
<div
className={cn(
// CUSTOM: Switched tw-fixed to tw-absolute here to scope the sidebar inside of it's container
'tw-absolute tw-inset-y-0 tw-z-10 tw-hidden tw-h-svh tw-w-[--sidebar-width] tw-transition-[left,right,width] tw-duration-200 tw-ease-linear md:tw-flex',
context.side === 'left'
? 'tw-left-0 group-data-[collapsible=offcanvas]:tw-left-[calc(var(--sidebar-width)*-1)]'
: 'tw-right-0 group-data-[collapsible=offcanvas]:tw-right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'tw-p-2 group-data-[collapsible=icon]:tw-w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon] group-data-[side=left]:tw-border-r group-data-[side=right]:tw-border-l',
className,
)}
{...props}
>
{/* This is what handles the sidebar gap on desktop */}
<div
className={cn(
'tw-relative tw-h-svh tw-w-[--sidebar-width] tw-bg-transparent tw-transition-[width] tw-duration-200 tw-ease-linear',
'group-data-[collapsible=offcanvas]:tw-w-0',
'group-data-[side=right]:tw-rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:tw-w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
: 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon]',
)}
/>
<div
className={cn(
// Switched tw-fixed to tw-absolute here to scope the sidebar inside of it's container
'tw-absolute tw-inset-y-0 tw-z-10 tw-hidden tw-h-svh tw-w-[--sidebar-width] tw-transition-[left,right,width] tw-duration-200 tw-ease-linear md:tw-flex',
side === 'left'
? 'tw-left-0 group-data-[collapsible=offcanvas]:tw-left-[calc(var(--sidebar-width)*-1)]'
: 'tw-right-0 group-data-[collapsible=offcanvas]:tw-right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'tw-p-2 group-data-[collapsible=icon]:tw-w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:tw-w-[--sidebar-width-icon] group-data-[side=left]:tw-border-r group-data-[side=right]:tw-border-l',
className,
)}
{...props}
data-sidebar="sidebar"
className="tw-flex tw-h-full tw-w-full tw-flex-col tw-bg-sidebar group-data-[variant=floating]:tw-rounded-lg group-data-[variant=floating]:tw-border group-data-[variant=floating]:tw-border-sidebar-border group-data-[variant=floating]:tw-shadow"
>
<div
data-sidebar="sidebar"
className="tw-flex tw-h-full tw-w-full tw-flex-col tw-bg-sidebar group-data-[variant=floating]:tw-rounded-lg group-data-[variant=floating]:tw-border group-data-[variant=floating]:tw-border-sidebar-border group-data-[variant=floating]:tw-shadow"
>
{children}
</div>
{children}
</div>
</div>
);
},
);
</div>
);
});
Sidebar.displayName = 'Sidebar';

const SidebarTrigger = React.forwardRef<
React.ElementRef<typeof Button>,
React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
const { toggleSidebar } = useSidebar();
const context = useSidebar();

return (
<Button
Expand All @@ -240,11 +232,11 @@ const SidebarTrigger = React.forwardRef<
className={cn('tw-h-7 tw-w-7', className)}
onClick={(event) => {
onClick?.(event);
toggleSidebar();
context.toggleSidebar();
}}
{...props}
>
<PanelLeft />
{context.side === 'left' ? <PanelLeft /> : <PanelRight />}
<span className="tw-sr-only">Toggle Sidebar</span>
</Button>
);
Expand Down Expand Up @@ -286,7 +278,7 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main
<main
ref={ref}
className={cn(
// Removed tw-min-h-svh
// CUSTOM: Removed tw-min-h-svh
'tw-relative tw-flex tw-flex-1 tw-flex-col tw-bg-background',
'peer-data-[variant=inset]:tw-min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:tw-m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:tw-ml-2 md:peer-data-[variant=inset]:tw-ml-0 md:peer-data-[variant=inset]:tw-rounded-xl md:peer-data-[variant=inset]:tw-shadow',
className,
Expand Down Expand Up @@ -471,7 +463,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
SidebarMenuItem.displayName = 'SidebarMenuItem';

const sidebarMenuButtonVariants = cva(
// Removed data-[active=true]:tw-bg-sidebar-accent
// CUSTOM: Removed data-[active=true]:tw-bg-sidebar-accent
'tw-peer/menu-button tw-flex tw-w-full tw-items-center tw-gap-2 tw-overflow-hidden tw-rounded-md tw-p-2 tw-text-left tw-text-sm tw-outline-none tw-ring-sidebar-ring tw-transition-[width,height,padding] hover:tw-bg-sidebar-accent hover:tw-text-sidebar-accent-foreground focus-visible:tw-ring-2 active:tw-bg-sidebar-accent active:tw-text-sidebar-accent-foreground disabled:tw-pointer-events-none disabled:tw-opacity-50 tw-group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:tw-pointer-events-none aria-disabled:tw-opacity-50 data-[active=true]:tw-font-medium data-[active=true]:tw-text-sidebar-accent-foreground data-[state=open]:hover:tw-bg-sidebar-accent data-[state=open]:hover:tw-text-sidebar-accent-foreground group-data-[collapsible=icon]:tw-!size-8 group-data-[collapsible=icon]:tw-!p-2 [&>span:last-child]:tw-truncate [&>svg]:tw-size-4 [&>svg]:tw-shrink-0',
{
variants: {
Expand Down
4 changes: 2 additions & 2 deletions lib/platform-bible-react/src/preview/pages/components/basics/sidebar.examples.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ export default function SidebarExamples({ direction }: SidebarExamplesProps) {
};

return (
<SidebarProvider dir={direction}>
<Sidebar side={direction === 'rtl' ? 'right' : 'left'}>
<SidebarProvider dir={direction} side={direction === 'rtl' ? 'right' : 'left'}>
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
Expand Down

0 comments on commit c1884c7

Please sign in to comment.