added tons of features

components/shared/sidebar/app-catalog-render.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import {useLocale} from 'next-intl'
+
+import {Link} from '@/i18n/routing'
+import {Button} from '@/ui/button'
+
+export default function AppCatalogRender(items: Array<object>) {
+	const locale = useLocale()
+
+	return (
+		<div className='flex w-full justify-center'>
+			<div className='bw-dd-menu group inline-block w-full'>
+				<Button className='py-13 flex h-10 w-full items-center rounded-sm border-none bg-brand-yellow-300 px-3 outline-none focus:outline-none'>
+					<span className='flex-1 pr-1 font-semibold'>Каталог</span>
+					<span>
+						<svg
+							className='h-4 w-4 transform fill-current transition duration-300 ease-in-out group-hover:-rotate-180'
+							xmlns='http://www.w3.org/2000/svg'
+							viewBox='0 0 20 20'
+						>
+							<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
+						</svg>
+					</span>
+				</Button>
+				<ul className='-bw-app-catalog-collapse mt-2 w-full min-w-32 origin-top transform rounded-sm border bg-white shadow-xl transition duration-300 ease-in-out group-hover:scale-100 hover:shadow-2xl'>
+					{items?.items.map((item: any) => (
+						<li
+							className='cursor-pointer rounded-none py-2.5 pl-3 pr-1.5 text-sm font-medium hover:bg-[#442d88]/10 xl:py-3'
+							key={item.id}
+						>
+							<button className='flex w-full items-center text-left outline-none focus:outline-none'>
+								<Link
+									className='flex-1 pr-1 leading-none xl:leading-[1.3]'
+									href={`/category/${item.id}-${item.locales[locale === 'uk' ? 0 : 1].slug}`}
+								>
+									{item.locales[locale === 'uk' ? 0 : 1].title}
+								</Link>
+								<span className='mr-auto'>
+									<svg
+										className='h-4 w-4 fill-current transition duration-150 ease-in-out'
+										xmlns='http://www.w3.org/2000/svg'
+										viewBox='0 0 20 20'
+									>
+										<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
+									</svg>
+								</span>
+							</button>
+						</li>
+					))}
+				</ul>
+			</div>
+		</div>
+	)
+}

components/shared/sidebar/app-catalog.tsx

@@ -0,0 +1,16 @@
+'use server'
+
+import AppCatalogRender from '@/components/shared/sidebar/app-catalog-render'
+import {db} from '@/lib/db/prisma/client'
+
+const appCatalog = async () => {
+	return db.category.findMany({
+		include: {
+			locales: true
+		}
+	})
+}
+
+export default async function AppCatalog() {
+	return <AppCatalogRender items={await appCatalog()} />
+}