create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/Sidebar.tsx

@@ -1,204 +1,204 @@
-import React from 'react'
-import classNames from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
-import { SidebarProps } from 'nextjs-cms/core/types'
-import SidebarItem from '@/components/SidebarItem'
-import SidebarDropdownItem from '@/components/SidebarDropdownItem'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { useI18n } from 'nextjs-cms/translations/client'
-import ProtectedImage from '@/components/ProtectedImage'
-import { trpc } from '@/app/_trpc/client'
-import { useToast } from '@/components/ui/use-toast'
-import { logout, useSession } from 'nextjs-cms/auth/react'
-import { LogOut } from 'lucide-react'
-
-const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string; isRTL: boolean }) => {
-    const t = useI18n()
-    const session = useSession()
-    const [navItems] = trpc.navigation.getSidebar.useSuspenseQuery()
-    const { toast } = useToast()
-    const handleLogout = async (e: React.MouseEvent<HTMLAnchorElement>) => {
-        e.preventDefault()
-        e.stopPropagation()
-        try {
-            await logout()
-        } catch (error: any) {
-            toast({
-                variant: 'destructive',
-                title: t('logoutError'),
-                description: error.message,
-            })
-        }
-    }
-    return (
-        <div
-            className={classNames({
-                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950':
-                    true,
-                'transition-all duration-100 ease-in-out': true,
-                'w-[300px] md:w-[275px]': true,
-                // LTR: sidebar on left, slides in from left
-                'left-0': !props.isRTL,
-                'md:translate-x-0': !props.isRTL,
-                '-translate-x-full': !props.isRTL && !props.mobileSidebar,
-                // RTL: sidebar on right, slides in from right
-                'right-0': props.isRTL,
-                'translate-x-full md:translate-x-0': props.isRTL && !props.mobileSidebar,
-                // Mobile sidebar shown (both LTR and RTL)
-                'translate-x-0': props.mobileSidebar,
-            })}
-        >
-            <div
-                className={classNames({
-                    'sticky inset-0 flex h-screen flex-col justify-between overflow-auto md:h-full': true,
-                })}
-            >
-                {/* logo and collapse button */}
-                <div
-                    className={classNames({
-                        'sticky top-0 flex h-[65px] shrink-0 items-center bg-indigo-700 transition-none dark:bg-slate-900': true,
-                        'justify-start gap-2 p-4': true,
-                    })}
-                >
-                    <Image src={props.logoUrlPath} alt={t('logo') as string} width={32} height={32} />
-                    <span className='bg-transparent px-2 font-normal tracking-[0.1em] text-white/90 transition-all duration-150'>
-                        {props.logoText}
-                    </span>
-                </div>
-                <ScrollArea dir={props.isRTL ? 'rtl' : 'ltr'} type='always' className='grow'>
-                    <ul
-                        className={classNames({
-                            'my-2 flex flex-col items-stretch gap-2': true,
-                        })}
-                    >
-                        {navItems && (
-                            <>
-                                {navItems.fixed_sections && navItems.fixed_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('main')}</h2>
-                                        {navItems.fixed_sections.map((item, index) => {
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-
-                                {navItems.cat_sections && navItems.cat_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('categorySections')}</h2>
-                                        {navItems.cat_sections.map((item, index) => {
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-
-                                {navItems.has_items_sections && navItems.has_items_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('sectionsWithItems')}</h2>
-                                        <div className='flex flex-col gap-y-2'>
-                                            {navItems.has_items_sections.map((item, index) => {
-                                                return (
-                                                    <SidebarDropdownItem
-                                                        closeSideBar={props.closeSideBar}
-                                                        key={index}
-                                                        item={item}
-                                                    />
-                                                )
-                                            })}
-                                        </div>
-                                    </div>
-                                )}
-                                {navItems.simple_sections && navItems.simple_sections.length > 0 && (
-                                    <div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('simpleSections')}</h2>
-                                        {navItems.simple_sections.map((item, index) => {
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-                                <div className='mx-3 flex flex-col py-2'>
-                                    <h2 className='my-2 text-start text-xs text-gray-300'>{t('settings')}</h2>
-                                    <SidebarItem
-                                        closeSideBar={props.closeSideBar}
-                                        key={101}
-                                        item={{
-                                            path: '/settings',
-                                            title: t('accountSettings'),
-                                            icon: 'cog'
-                                        }}
-                                    />
-                                    <Link
-                                        href='#'
-                                        onClick={handleLogout}
-                                        className={classNames({
-                                            'flex flex-row gap-1 items-center rounded-lg hover:text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
-                                            'transition-colors duration-100': false, //animation
-                                            'gap-4 p-2 text-start': true,
-                                        })}
-                                    >
-                                        <LogOut className='size-4' />
-                                        <span>{t('logout')}</span>
-                                    </Link>
-                                </div>
-                            </>
-                        )}
-                    </ul>
-                </ScrollArea>
-                <div
-                    className={classNames({
-                        'grid place-content-stretch bg-indigo-700 p-2 dark:bg-slate-800': true,
-                    })}
-                >
-                        <div className='flex h-12 items-center gap-4'>
-                        {session?.data?.user.image ? (
-                            <ProtectedImage
-                                section={'admins'}
-                                photo={session.data.user.image}
-                                isThumb={true}
-                                alt={session?.data?.user.name}
-                                width={40}
-                                height={40}
-                                // fill={true}
-                                className='ring-foreground rounded-full ring-3'
-                            />
-                        ) : (
-                            <Image
-                                src='/blank_avatar.png'
-                                height={36}
-                                width={36}
-                                alt={t('profileImage') as string}
-                                className='rounded-full ring-2 ring-amber-300 ring-inset'
-                            />
-                        )}
-
-                        <div className='flex flex-col text-start'>
-                            <span className='my-0 text-indigo-50'>{session?.data?.user.name}</span>
-                            <Link href='/settings' className='text-sm text-indigo-200'>
-                                {t('settings')}
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-export default Sidebar
+import React from 'react'
+import classNames from 'classnames'
+import Link from 'next/link'
+import Image from 'next/image'
+import { SidebarProps } from 'nextjs-cms/core/types'
+import SidebarItem from '@/components/SidebarItem'
+import SidebarDropdownItem from '@/components/SidebarDropdownItem'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { useI18n } from 'nextjs-cms/translations/client'
+import ProtectedImage from '@/components/ProtectedImage'
+import { trpc } from '@/app/_trpc/client'
+import { useToast } from '@/components/ui/use-toast'
+import { logout, useSession } from 'nextjs-cms/auth/react'
+import { LogOut } from 'lucide-react'
+
+const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string; isRTL: boolean }) => {
+    const t = useI18n()
+    const session = useSession()
+    const [navItems] = trpc.navigation.getSidebar.useSuspenseQuery()
+    const { toast } = useToast()
+    const handleLogout = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+            await logout()
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                title: t('logoutError'),
+                description: error.message,
+            })
+        }
+    }
+    return (
+        <div
+            className={classNames({
+                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950':
+                    true,
+                'transition-all duration-100 ease-in-out': true,
+                'w-[300px] md:w-[275px]': true,
+                // LTR: sidebar on left, slides in from left
+                'left-0': !props.isRTL,
+                'md:translate-x-0': !props.isRTL,
+                '-translate-x-full': !props.isRTL && !props.mobileSidebar,
+                // RTL: sidebar on right, slides in from right
+                'right-0': props.isRTL,
+                'translate-x-full md:translate-x-0': props.isRTL && !props.mobileSidebar,
+                // Mobile sidebar shown (both LTR and RTL)
+                'translate-x-0': props.mobileSidebar,
+            })}
+        >
+            <div
+                className={classNames({
+                    'sticky inset-0 flex h-screen flex-col justify-between overflow-auto md:h-full': true,
+                })}
+            >
+                {/* logo and collapse button */}
+                <div
+                    className={classNames({
+                        'sticky top-0 flex h-[65px] shrink-0 items-center bg-indigo-700 transition-none dark:bg-slate-900': true,
+                        'justify-start gap-2 p-4': true,
+                    })}
+                >
+                    <Image src={props.logoUrlPath} alt={t('logo') as string} width={32} height={32} />
+                    <span className='bg-transparent px-2 font-normal tracking-[0.1em] text-white/90 transition-all duration-150'>
+                        {props.logoText}
+                    </span>
+                </div>
+                <ScrollArea dir={props.isRTL ? 'rtl' : 'ltr'} type='always' className='grow'>
+                    <ul
+                        className={classNames({
+                            'my-2 flex flex-col items-stretch gap-2': true,
+                        })}
+                    >
+                        {navItems && (
+                            <>
+                                {navItems.fixed_sections && navItems.fixed_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('main')}</h2>
+                                        {navItems.fixed_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.cat_sections && navItems.cat_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('categorySections')}</h2>
+                                        {navItems.cat_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.has_items_sections && navItems.has_items_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('sectionsWithItems')}</h2>
+                                        <div className='flex flex-col gap-y-2'>
+                                            {navItems.has_items_sections.map((item, index) => {
+                                                return (
+                                                    <SidebarDropdownItem
+                                                        closeSideBar={props.closeSideBar}
+                                                        key={index}
+                                                        item={item}
+                                                    />
+                                                )
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+                                {navItems.simple_sections && navItems.simple_sections.length > 0 && (
+                                    <div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('simpleSections')}</h2>
+                                        {navItems.simple_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+                                <div className='mx-3 flex flex-col py-2'>
+                                    <h2 className='my-2 text-start text-xs text-gray-300'>{t('settings')}</h2>
+                                    <SidebarItem
+                                        closeSideBar={props.closeSideBar}
+                                        key={101}
+                                        item={{
+                                            path: '/settings',
+                                            title: t('accountSettings'),
+                                            icon: 'cog'
+                                        }}
+                                    />
+                                    <Link
+                                        href='#'
+                                        onClick={handleLogout}
+                                        className={classNames({
+                                            'flex flex-row gap-1 items-center rounded-lg hover:text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                                            'transition-colors duration-100': false, //animation
+                                            'gap-4 p-2 text-start': true,
+                                        })}
+                                    >
+                                        <LogOut className='size-4' />
+                                        <span>{t('logout')}</span>
+                                    </Link>
+                                </div>
+                            </>
+                        )}
+                    </ul>
+                </ScrollArea>
+                <div
+                    className={classNames({
+                        'grid place-content-stretch bg-indigo-700 p-2 dark:bg-slate-800': true,
+                    })}
+                >
+                        <div className='flex h-12 items-center gap-4'>
+                        {session?.data?.user.image ? (
+                            <ProtectedImage
+                                section={'admins'}
+                                photo={session.data.user.image}
+                                isThumb={true}
+                                alt={session?.data?.user.name}
+                                width={40}
+                                height={40}
+                                // fill={true}
+                                className='ring-foreground rounded-full ring-3'
+                            />
+                        ) : (
+                            <Image
+                                src='/blank_avatar.png'
+                                height={36}
+                                width={36}
+                                alt={t('profileImage') as string}
+                                className='rounded-full ring-2 ring-amber-300 ring-inset'
+                            />
+                        )}
+
+                        <div className='flex flex-col text-start'>
+                            <span className='my-0 text-indigo-50'>{session?.data?.user.name}</span>
+                            <Link href='/settings' className='text-sm text-indigo-200'>
+                                {t('settings')}
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Sidebar

package/templates/default/components/SidebarDropdownItem.tsx

@@ -1,83 +1,83 @@
-import Link from 'next/link'
-import classNames from 'classnames'
-import { useState } from 'react'
-import { SidebarItemProps } from 'nextjs-cms/core/types'
-import { useAutoAnimate } from '@formkit/auto-animate/react'
-import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusIcon } from 'lucide-react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import SectionIcon from '@/components/SectionIcon'
-
-export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemProps) {
-    const t = useI18n()
-    const [parent] = useAutoAnimate()
-    const [open, setOpen] = useState(false)
-    return (
-        <div ref={parent}>
-            <div
-                className={classNames({
-                    'flex cursor-pointer text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
-                    'transition-colors duration-100': false, //animation
-                    'gap-4 rounded-md p-2': true,
-                    'rounded-b-none bg-indigo-700 dark:bg-emerald-600': open,
-                })}
-                onClick={() => setOpen((prev) => !prev)}
-            >
-                <li className='relative flex w-full items-center justify-between gap-2'>
-                    <span className='flex items-center gap-2 text-start'>
-                        {item.icon && <SectionIcon name={item.icon} className='size-4' />}
-                        <span>{item.title}</span>
-                    </span>
-                    <span>
-                        {open ? (
-                            <ChevronUpIcon className='h-5 w-5' />
-                        ) : (
-                            <ChevronDownIcon className='h-5 w-5' />
-                        )}
-                    </span>
-                </li>
-            </div>
-            {open && (
-                <div
-                    className={classNames({
-                        'rounded border border-t-0 border-indigo-700/50 text-white dark:border-emerald-600/50': true, //colors
-                        'transition-colors duration-100': false, //animation
-                        'flex flex-col items-stretch rounded-md rounded-t-none py-2': true,
-                    })}
-                >
-                    <Link
-                        onClick={closeSideBar}
-                        href={`/new${item.path}`}
-                        className={classNames({
-                            'flex rounded text-white hover:underline': true, //colors
-                            'transition-colors duration-100': false, //animation
-                            'mx-3 gap-4 p-2': true,
-                        })}
-                    >
-                        <li className='flex flex-row items-center gap-1'>
-                            <span>
-                                <PlusIcon className='size-4' />
-                            </span>
-                            <span>{t('new')}</span>
-                        </li>
-                    </Link>
-                    <Link
-                        onClick={closeSideBar}
-                        href={`/browse${item.path}`}
-                        className={classNames({
-                            'flex rounded text-white hover:underline': true, //colors
-                            'transition-colors duration-100': false, //animation
-                            'mx-3 gap-4 p-2': true,
-                        })}
-                    >
-                        <li className='flex flex-row items-center gap-1'>
-                            <span>
-                                <FolderIcon className='size-4' />
-                            </span>
-                            <span>{t('browse')}</span>
-                        </li>
-                    </Link>
-                </div>
-            )}
-        </div>
-    )
-}
+import Link from 'next/link'
+import classNames from 'classnames'
+import { useState } from 'react'
+import { SidebarItemProps } from 'nextjs-cms/core/types'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusIcon } from 'lucide-react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import SectionIcon from '@/components/SectionIcon'
+
+export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemProps) {
+    const t = useI18n()
+    const [parent] = useAutoAnimate()
+    const [open, setOpen] = useState(false)
+    return (
+        <div ref={parent}>
+            <div
+                className={classNames({
+                    'flex cursor-pointer text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                    'transition-colors duration-100': false, //animation
+                    'gap-4 rounded-md p-2': true,
+                    'rounded-b-none bg-indigo-700 dark:bg-emerald-600': open,
+                })}
+                onClick={() => setOpen((prev) => !prev)}
+            >
+                <li className='relative flex w-full items-center justify-between gap-2'>
+                    <span className='flex items-center gap-2 text-start'>
+                        {item.icon && <SectionIcon name={item.icon} className='size-4' />}
+                        <span>{item.title}</span>
+                    </span>
+                    <span>
+                        {open ? (
+                            <ChevronUpIcon className='h-5 w-5' />
+                        ) : (
+                            <ChevronDownIcon className='h-5 w-5' />
+                        )}
+                    </span>
+                </li>
+            </div>
+            {open && (
+                <div
+                    className={classNames({
+                        'rounded border border-t-0 border-indigo-700/50 text-white dark:border-emerald-600/50': true, //colors
+                        'transition-colors duration-100': false, //animation
+                        'flex flex-col items-stretch rounded-md rounded-t-none py-2': true,
+                    })}
+                >
+                    <Link
+                        onClick={closeSideBar}
+                        href={`/new${item.path}`}
+                        className={classNames({
+                            'flex rounded text-white hover:underline': true, //colors
+                            'transition-colors duration-100': false, //animation
+                            'mx-3 gap-4 p-2': true,
+                        })}
+                    >
+                        <li className='flex flex-row items-center gap-1'>
+                            <span>
+                                <PlusIcon className='size-4' />
+                            </span>
+                            <span>{t('new')}</span>
+                        </li>
+                    </Link>
+                    <Link
+                        onClick={closeSideBar}
+                        href={`/browse${item.path}`}
+                        className={classNames({
+                            'flex rounded text-white hover:underline': true, //colors
+                            'transition-colors duration-100': false, //animation
+                            'mx-3 gap-4 p-2': true,
+                        })}
+                    >
+                        <li className='flex flex-row items-center gap-1'>
+                            <span>
+                                <FolderIcon className='size-4' />
+                            </span>
+                            <span>{t('browse')}</span>
+                        </li>
+                    </Link>
+                </div>
+            )}
+        </div>
+    )
+}

package/templates/default/components/SidebarItem.tsx

@@ -1,24 +1,24 @@
-import Link from 'next/link'
-import classNames from 'classnames'
-import { SidebarItemProps } from 'nextjs-cms/core/types'
-import SectionIcon from '@/components/SectionIcon'
-
-export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
-    return (
-        <Link
-            onClick={closeSideBar}
-            href={item.path}
-            className={classNames({
-                'rounded-lg text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
-                'transition-colors duration-100': false, //animation
-                'gap-4 p-2': true,
-                'text-start': true, // RTL support
-            })}
-        >
-            <span className='flex items-center gap-2'>
-                {item.icon && <SectionIcon name={item.icon} className='size-4' />}
-                <span>{item.title}</span>
-            </span>
-        </Link>
-    )
-}
+import Link from 'next/link'
+import classNames from 'classnames'
+import { SidebarItemProps } from 'nextjs-cms/core/types'
+import SectionIcon from '@/components/SectionIcon'
+
+export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
+    return (
+        <Link
+            onClick={closeSideBar}
+            href={item.path}
+            className={classNames({
+                'rounded-lg text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                'transition-colors duration-100': false, //animation
+                'gap-4 p-2': true,
+                'text-start': true, // RTL support
+            })}
+        >
+            <span className='flex items-center gap-2'>
+                {item.icon && <SectionIcon name={item.icon} className='size-4' />}
+                <span>{item.title}</span>
+            </span>
+        </Link>
+    )
+}