134 improvement add a button that allows closing the sidebar (#135)

* Enhance sidebar navigation and layout configuration - Added support for configurable sidebar collapsed style - Updated layout components to use new sidebar configuration - Added environment variable for sidebar trigger display - Simplified page header and navigation components - Improved sidebar responsiveness and user experience * Refactor admin account page layout and action buttons - Moved action buttons from sidebar to PageHeader for both personal and team account pages - Updated button variants and styling for better visual hierarchy - Improved spacing and layout of account page components - Added border to PageHeader for better visual separation * Update version updater dialog styling - Replaced `space-x-4` with `gap-x-2` for better spacing - Wrapped translation text in a `span` for improved layout - Maintained consistent icon and text alignment in dialog title * Refactor sidebar state management and configuration - Simplified sidebar context and removed minimized state - Updated layout components to use new sidebar open/closed state - Modified sidebar navigation to handle collapsed state dynamically - Added environment variable for sidebar trigger and collapsed style - Improved sidebar responsiveness and rendering logic * Remove sidebar configuration and environment variables - Simplified sidebar context by removing `minimized` state in components - Updated account selector components to use simplified sidebar state - Removed unused helper functions in sidebar implementation
2025-02-04 08:45:16 +07:00
parent b319ceb5bb
commit 2a157e8baa
22 changed files with 295 additions and 338 deletions
--- a/packages/features/admin/src/components/admin-account-page.tsx
+++ b/packages/features/admin/src/components/admin-account-page.tsx
@@ -14,6 +14,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { PageBody, PageHeader } from '@kit/ui/page';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 import {
  Table,
@@ -61,38 +62,22 @@ async function PersonalAccountPage(props: { account: Account }) {
    'banned_until' in data.user && data.user.banned_until !== 'none';

  return (
-    <div className={'flex flex-col space-y-4'}>
-      <AppBreadcrumbs
-        values={{
-          [props.account.id]:
-            props.account.name ?? props.account.email ?? 'Account',
-        }}
-      />
-
-      <div className={'flex items-center justify-between'}>
-        <div className={'flex items-center gap-x-4'}>
-          <div className={'flex items-center gap-x-2.5'}>
-            <ProfileAvatar
-              pictureUrl={props.account.picture_url}
-              displayName={props.account.name}
-            />
-
-            <span className={'text-sm font-semibold capitalize'}>
-              {props.account.name}
-            </span>
-          </div>
-
-          <Badge variant={'outline'}>Personal Account</Badge>
-
-          <If condition={isBanned}>
-            <Badge variant={'destructive'}>Banned</Badge>
-          </If>
-        </div>
-
-        <div className={'flex gap-x-1'}>
+    <>
+      <PageHeader
+        className="border-b"
+        description={
+          <AppBreadcrumbs
+            values={{
+              [props.account.id]:
+                props.account.name ?? props.account.email ?? 'Account',
+            }}
+          />
+        }
+      >
+        <div className={'flex gap-x-2.5'}>
          <If condition={isBanned}>
            <AdminReactivateUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
+              <Button size={'sm'} variant={'secondary'}>
                <ShieldPlus className={'mr-1 h-4'} />
                Reactivate
              </Button>
@@ -101,15 +86,15 @@ async function PersonalAccountPage(props: { account: Account }) {

          <If condition={!isBanned}>
            <AdminBanUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
-                <Ban className={'mr-1 h-4'} />
+              <Button size={'sm'} variant={'secondary'}>
+                <Ban className={'text-destructive mr-1 h-3'} />
                Ban
              </Button>
            </AdminBanUserDialog>

            <AdminImpersonateUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
-                <VenetianMask className={'mr-1 h-4'} />
+              <Button size={'sm'} variant={'secondary'}>
+                <VenetianMask className={'mr-1 h-4 text-blue-500'} />
                Impersonate
              </Button>
            </AdminImpersonateUserDialog>
@@ -122,20 +107,43 @@ async function PersonalAccountPage(props: { account: Account }) {
            </Button>
          </AdminDeleteUserDialog>
        </div>
-      </div>
+      </PageHeader>

-      <div className={'flex flex-col gap-y-8'}>
-        <SubscriptionsTable accountId={props.account.id} />
+      <PageBody className={'space-y-6 py-4'}>
+        <div className={'flex items-center justify-between'}>
+          <div className={'flex items-center gap-x-4'}>
+            <div className={'flex items-center gap-x-2.5'}>
+              <ProfileAvatar
+                pictureUrl={props.account.picture_url}
+                displayName={props.account.name}
+              />

-        <div className={'divider-divider-x flex flex-col gap-y-2.5'}>
-          <Heading level={6}>Teams</Heading>
+              <span className={'text-sm font-semibold capitalize'}>
+                {props.account.name}
+              </span>
+            </div>

-          <div>
-            <AdminMembershipsTable memberships={memberships} />
+            <Badge variant={'outline'}>Personal Account</Badge>
+
+            <If condition={isBanned}>
+              <Badge variant={'destructive'}>Banned</Badge>
+            </If>
          </div>
        </div>
-      </div>
-    </div>
+
+        <div className={'flex flex-col gap-y-8'}>
+          <SubscriptionsTable accountId={props.account.id} />
+
+          <div className={'divider-divider-x flex flex-col gap-y-2.5'}>
+            <Heading level={6}>Teams</Heading>
+
+            <div>
+              <AdminMembershipsTable memberships={memberships} />
+            </div>
+          </div>
+        </div>
+      </PageBody>
+    </>
  );
 }

@@ -145,50 +153,57 @@ async function TeamAccountPage(props: {
  const members = await getMembers(props.account.slug ?? '');

  return (
-    <div className={'flex flex-col gap-y-4'}>
-      <AppBreadcrumbs
-        values={{
-          [props.account.id]:
-            props.account.name ?? props.account.email ?? 'Account',
-        }}
-      />
-
-      <div className={'flex justify-between'}>
-        <div className={'flex items-center gap-x-4'}>
-          <div className={'flex items-center gap-x-2.5'}>
-            <ProfileAvatar
-              pictureUrl={props.account.picture_url}
-              displayName={props.account.name}
-            />
-
-            <span className={'text-sm font-semibold capitalize'}>
-              {props.account.name}
-            </span>
-          </div>
-
-          <Badge variant={'outline'}>Team Account</Badge>
-        </div>
-
+    <>
+      <PageHeader
+        className="border-b"
+        description={
+          <AppBreadcrumbs
+            values={{
+              [props.account.id]:
+                props.account.name ?? props.account.email ?? 'Account',
+            }}
+          />
+        }
+      >
        <AdminDeleteAccountDialog accountId={props.account.id}>
          <Button size={'sm'} variant={'destructive'}>
            <BadgeX className={'mr-1 h-4'} />
            Delete
          </Button>
        </AdminDeleteAccountDialog>
-      </div>
+      </PageHeader>

-      <div>
-        <div className={'flex flex-col gap-y-8'}>
-          <SubscriptionsTable accountId={props.account.id} />
+      <PageBody className={'space-y-6 py-4'}>
+        <div className={'flex justify-between'}>
+          <div className={'flex items-center gap-x-4'}>
+            <div className={'flex items-center gap-x-2.5'}>
+              <ProfileAvatar
+                pictureUrl={props.account.picture_url}
+                displayName={props.account.name}
+              />

-          <div className={'flex flex-col gap-y-2.5'}>
-            <Heading level={6}>Team Members</Heading>
+              <span className={'text-sm font-semibold capitalize'}>
+                {props.account.name}
+              </span>
+            </div>

-            <AdminMembersTable members={members} />
+            <Badge variant={'outline'}>Team Account</Badge>
          </div>
        </div>
-      </div>
-    </div>
+
+        <div>
+          <div className={'flex flex-col gap-y-8'}>
+            <SubscriptionsTable accountId={props.account.id} />
+
+            <div className={'flex flex-col gap-y-2.5'}>
+              <Heading level={6}>Team Members</Heading>
+
+              <AdminMembersTable members={members} />
+            </div>
+          </div>
+        </div>
+      </PageBody>
+    </>
  );
 }

--- a/packages/ui/src/makerkit/navigation-config.schema.ts
+++ b/packages/ui/src/makerkit/navigation-config.schema.ts
@@ -40,8 +40,9 @@ export const NavigationConfigSchema = z.object({
  style: z.enum(['custom', 'sidebar', 'header']).default('sidebar'),
  sidebarCollapsed: z
    .enum(['false', 'true'])
-    .default('false')
+    .default('true')
    .optional()
    .transform((value) => value === `true`),
+  sidebarCollapsedStyle: z.enum(['offcanvas', 'icon', 'none']).default('icon'),
  routes: z.array(z.union([RouteGroup, Divider])),
 });
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';

 import { cn } from '../lib/utils';
+import { Separator } from '../shadcn/separator';
+import { SidebarTrigger } from '../shadcn/sidebar';
 import { If } from './if';

 export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
@@ -12,6 +14,10 @@ type PageProps = React.PropsWithChildren<{
  sticky?: boolean;
 }>;

+const ENABLE_SIDEBAR_TRIGGER = process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER
+  ? process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER === 'true'
+  : true;
+
 export function Page(props: PageProps) {
  switch (props.style) {
    case 'header':
@@ -118,7 +124,7 @@ export function PageNavigation(props: React.PropsWithChildren) {

 export function PageDescription(props: React.PropsWithChildren) {
  return (
-    <div className={'h-6'}>
+    <div className={'flex h-6 items-center'}>
      <div className={'text-muted-foreground text-xs leading-none font-normal'}>
        {props.children}
      </div>
@@ -130,7 +136,7 @@ export function PageTitle(props: React.PropsWithChildren) {
  return (
    <h1
      className={
-        'font-heading text-xl leading-none font-bold tracking-tight dark:text-white'
+        'font-heading text-base leading-none font-bold tracking-tight dark:text-white'
      }
    >
      {props.children}
@@ -147,10 +153,12 @@ export function PageHeader({
  title,
  description,
  className,
+  displaySidebarTrigger = ENABLE_SIDEBAR_TRIGGER,
 }: React.PropsWithChildren<{
  className?: string;
  title?: string | React.ReactNode;
  description?: string | React.ReactNode;
+  displaySidebarTrigger?: boolean;
 }>) {
  return (
    <div
@@ -159,10 +167,20 @@ export function PageHeader({
        className,
      )}
    >
-      <div className={'flex flex-col'}>
-        <If condition={description}>
-          <PageDescription>{description}</PageDescription>
-        </If>
+      <div className={'flex flex-col gap-y-2'}>
+        <div className="flex items-center gap-x-2.5">
+          {displaySidebarTrigger ? (
+            <SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground h-4.5 w-4.5 cursor-pointer" />
+          ) : null}
+
+          <If condition={description}>
+            <If condition={displaySidebarTrigger}>
+              <Separator orientation="vertical" className="h-4 w-px" />
+            </If>
+
+            <PageDescription>{description}</PageDescription>
+          </If>
+        </div>

        <If condition={title}>
          <PageTitle>{title}</PageTitle>
--- a/packages/ui/src/makerkit/version-updater.tsx
+++ b/packages/ui/src/makerkit/version-updater.tsx
@@ -50,9 +50,11 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
    <AlertDialog open={showDialog} onOpenChange={setShowDialog}>
      <AlertDialogContent>
        <AlertDialogHeader>
-          <AlertDialogTitle className={'flex items-center space-x-4'}>
+          <AlertDialogTitle className={'flex items-center gap-x-2'}>
            <RocketIcon className={'h-4'} />
-            <Trans i18nKey="common:newVersionAvailable" />
+            <span>
+              <Trans i18nKey="common:newVersionAvailable" />
+            </span>
          </AlertDialogTitle>

          <AlertDialogDescription>
--- a/packages/ui/src/shadcn/sidebar.tsx
+++ b/packages/ui/src/shadcn/sidebar.tsx
@@ -36,9 +36,9 @@ 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 = '3rem';
+const SIDEBAR_WIDTH_ICON = '4rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-const SIDEBAR_MINIMIZED_WIDTH = '4rem';
+const SIDEBAR_MINIMIZED_WIDTH = SIDEBAR_WIDTH_ICON;

 type SidebarContext = {
  state: 'expanded' | 'collapsed';
@@ -46,12 +46,8 @@ type SidebarContext = {
  setOpen: (open: boolean) => void;
  openMobile: boolean;
  setOpenMobile: (open: boolean) => void;
-  setMinimized: (minimized: boolean) => void;
  isMobile: boolean;
  toggleSidebar: () => void;
-  minimized: boolean;
-  startMinimized: boolean;
-  expandOnHover: boolean;
 };

 export const SidebarContext = React.createContext<SidebarContext | null>(null);
@@ -71,13 +67,10 @@ const SidebarProvider: React.FC<
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
-    minimized?: boolean;
-    expandOnHover?: boolean;
  }
 > = ({
  ref,
  defaultOpen = true,
-  minimized: isMinimized = false,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
@@ -87,11 +80,7 @@ const SidebarProvider: React.FC<
 }) => {
  const isMobile = useIsMobile();
  const [openMobile, setOpenMobile] = React.useState(false);
-  const [minimized, setMinimized] = React.useState(isMinimized);
-
-  const expandOnHover =
-    props.expandOnHover ??
-    process.env.NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER === 'true';
+  const collapsibleStyle = process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE;

  // This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
@@ -136,7 +125,6 @@ const SidebarProvider: React.FC<
  // 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 startMinimized = isMinimized;

  const contextValue = React.useMemo<SidebarContext>(
    () => ({
@@ -144,43 +132,33 @@ const SidebarProvider: React.FC<
      open,
      setOpen,
      isMobile,
-      minimized,
-      setMinimized,
-      expandOnHover,
      openMobile,
      setOpenMobile,
      toggleSidebar,
-      startMinimized,
    }),
-    [
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-      expandOnHover,
-      minimized,
-      setMinimized,
-      startMinimized,
-    ],
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  );

+  const sidebarWidth = !open
+    ? collapsibleStyle === 'icon'
+      ? SIDEBAR_WIDTH_ICON
+      : collapsibleStyle === 'offcanvas'
+        ? 0
+        : SIDEBAR_MINIMIZED_WIDTH
+    : SIDEBAR_WIDTH;
+
  return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          style={
            {
-              '--sidebar-width': minimized
-                ? SIDEBAR_MINIMIZED_WIDTH
-                : SIDEBAR_WIDTH,
+              '--sidebar-width': sidebarWidth,
              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
-          data-minimized={minimized}
+          data-minimized={!open}
          className={cn(
            'group text-sidebar-foreground has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
            className,
@@ -212,42 +190,7 @@ const Sidebar: React.FC<
  ref,
  ...props
 }) => {
-  const {
-    isMobile,
-    state,
-    openMobile,
-    setOpenMobile,
-    minimized,
-    setMinimized,
-    expandOnHover,
-    startMinimized,
-  } = useSidebar();
-  useSidebar();
-
-  const isExpandedRef = React.useRef<boolean>(false);
-
-  const onMouseEnter =
-    startMinimized && expandOnHover
-      ? () => {
-          setMinimized(false);
-          isExpandedRef.current = true;
-        }
-      : undefined;
-
-  const onMouseLeave =
-    startMinimized && expandOnHover
-      ? () => {
-          if (!isRadixPopupOpen()) {
-            setMinimized(true);
-            isExpandedRef.current = false;
-          } else {
-            onRadixPopupClose(() => {
-              setMinimized(true);
-              isExpandedRef.current = false;
-            });
-          }
-        }
-      : undefined;
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

  if (collapsible === 'none') {
    return (
@@ -256,7 +199,7 @@ const Sidebar: React.FC<
          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
          className,
          {
-            [SIDEBAR_MINIMIZED_WIDTH]: minimized,
+            [SIDEBAR_MINIMIZED_WIDTH]: !open,
          },
        )}
        ref={ref}
@@ -301,8 +244,6 @@ const Sidebar: React.FC<
      data-collapsible={state === 'collapsed' ? collapsible : ''}
      data-variant={variant}
      data-side={side}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
@@ -569,7 +510,10 @@ const SidebarMenu: React.FC<React.ComponentProps<'ul'>> = ({
 }) => (
  <ul
    data-sidebar="menu"
-    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    className={cn(
+      'flex w-full min-w-0 flex-col gap-1 group-data-[minimized=true]:items-center',
+      className,
+    )}
    {...props}
  />
 );
@@ -581,7 +525,10 @@ const SidebarMenuItem: React.FC<React.ComponentProps<'li'>> = ({
 }) => (
  <li
    data-sidebar="menu-item"
-    className={cn('group/menu-item relative', className)}
+    className={cn(
+      'group/menu-item relative flex group-data-[collapsible=icon]:justify-center',
+      className,
+    )}
    {...props}
  />
 );
@@ -625,7 +572,7 @@ const SidebarMenuButton: React.FC<
  ...props
 }) => {
  const Comp = asChild ? Slot : 'button';
-  const { isMobile, minimized } = useSidebar();
+  const { isMobile, open } = useSidebar();
  const { t } = useTranslation();

  const button = (
@@ -656,7 +603,7 @@ const SidebarMenuButton: React.FC<
      <TooltipContent
        side="right"
        align="center"
-        hidden={isMobile || !minimized}
+        hidden={isMobile || open}
        {...tooltip}
      />
    </Tooltip>
@@ -806,7 +753,7 @@ export function SidebarNavigation({
  config: SidebarConfig;
 }>) {
  const currentPath = usePathname() ?? '';
-  const { minimized } = useSidebar();
+  const { open } = useSidebar();

  return (
    <>
@@ -847,15 +794,12 @@ export function SidebarNavigation({
                <If
                  condition={item.collapsible}
                  fallback={
-                    <SidebarGroupLabel className={cn({ hidden: minimized })}>
+                    <SidebarGroupLabel className={cn({ hidden: !open })}>
                      <Trans i18nKey={item.label} defaults={item.label} />
                    </SidebarGroupLabel>
                  }
                >
-                  <SidebarGroupLabel
-                    className={cn({ hidden: minimized })}
-                    asChild
-                  >
+                  <SidebarGroupLabel className={cn({ hidden: !open })} asChild>
                    <CollapsibleTrigger>
                      <Trans i18nKey={item.label} defaults={item.label} />
                      <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
@@ -910,15 +854,15 @@ export function SidebarNavigation({
                                  <div
                                    className={cn('flex items-center gap-2', {
                                      'mx-auto w-full gap-0 [&>svg]:flex-1 [&>svg]:shrink-0':
-                                        minimized,
+                                        !open,
                                    })}
                                  >
                                    {child.Icon}
                                    <span
                                      className={cn(
-                                        'w-auto transition-opacity duration-300',
+                                        'transition-width w-auto transition-opacity duration-500',
                                        {
-                                          'w-0 opacity-0': minimized,
+                                          'w-0 opacity-0': !open,
                                        },
                                      )}
                                    >
@@ -927,11 +871,12 @@ export function SidebarNavigation({
                                        defaults={child.label}
                                      />
                                    </span>
+
                                    <ChevronDown
                                      className={cn(
                                        'ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-180',
                                        {
-                                          'hidden size-0': minimized,
+                                          'hidden size-0': !open,
                                        },
                                      )}
                                    />
@@ -958,8 +903,7 @@ export function SidebarNavigation({
                            >
                              <Link
                                className={cn('flex items-center', {
-                                  'mx-auto w-full gap-0! [&>svg]:flex-1':
-                                    minimized,
+                                  'mx-auto w-full gap-0! [&>svg]:flex-1': !open,
                                })}
                                href={path}
                              >
@@ -968,7 +912,7 @@ export function SidebarNavigation({
                                  className={cn(
                                    'w-auto transition-opacity duration-300',
                                    {
-                                      'w-0 opacity-0': minimized,
+                                      'w-0 opacity-0': !open,
                                    },
                                  )}
                                >
@@ -992,7 +936,7 @@ export function SidebarNavigation({
                                  {(children) => (
                                    <SidebarMenuSub
                                      className={cn({
-                                        'mx-0 px-1.5': minimized,
+                                        'mx-0 px-1.5': !open,
                                      })}
                                    >
                                      {children.map((child) => {
@@ -1023,7 +967,7 @@ export function SidebarNavigation({
                                                  'flex items-center',
                                                  {
                                                    'mx-auto w-full gap-0! [&>svg]:flex-1':
-                                                      minimized,
+                                                      !open,
                                                  },
                                                )}
                                                href={child.path}
@@ -1033,8 +977,7 @@ export function SidebarNavigation({
                                                  className={cn(
                                                    'w-auto transition-opacity duration-300',
                                                    {
-                                                      'w-0 opacity-0':
-                                                        minimized,
+                                                      'w-0 opacity-0': !open,
                                                    },
                                                  )}
                                                >
@@ -1065,7 +1008,7 @@ export function SidebarNavigation({
                </SidebarGroupContent>
              </SidebarGroup>

-              <If condition={minimized && !isLast}>
+              <If condition={!open && !isLast}>
                <SidebarSeparator />
              </If>
            </Container>
@@ -1102,30 +1045,3 @@ export {
  SidebarTrigger,
  useSidebar,
 };
-
-function getRadixPopup() {
-  return document.querySelector('[data-radix-popper-content-wrapper]');
-}
-
-function isRadixPopupOpen() {
-  return getRadixPopup() !== null;
-}
-
-function onRadixPopupClose(callback: () => void) {
-  const element = getRadixPopup();
-
-  if (element) {
-    const observer = new MutationObserver(() => {
-      if (!getRadixPopup()) {
-        callback();
-
-        observer.disconnect();
-      }
-    });
-
-    observer.observe(element.parentElement!, {
-      childList: true,
-      subtree: true,
-    });
-  }
-}