blog + sidebar

src/app/blogs/components/BigBlogItem.tsx

@@ -12,11 +12,11 @@ interface BigBlogItemProps {
 const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
     return (
         <div className='w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6'>
-            <Link href={`/blogs/${item.id}`}>
+            <Link href={`/blogs/${item.slug}`}>
                 <Image src={item.imageUrl} alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
             </Link>
             <div className='flex-1'>
-                <Link href={`/blogs/${item.id}`}>
+                <Link href={`/blogs/${item.slug}`}>
                     <h4 className='font-bold text-sm leading-6 hover:opacity-70 transition-opacity'>
                         {item.title}
                     </h4>
@@ -47,7 +47,7 @@ const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
                     {item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
                 </div>
 
-                <Link href={`/blogs/${item.id}`}>
+                <Link href={`/blogs/${item.slug}`}>
                     <div className='mt-3 flex gap-1 text-sm text-[#8C90A3]'>
                         <div>ادامه ی مطلب</div>
                         <ArrowLeft

src/app/blogs/components/MiniBlogItem.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
     return (
         <div className='flex items-center gap-2'>
-            <Link href={`/blogs/${item.id}`}>
+            <Link href={`/blogs/${item.slug}`}>
                 <Image
                     src={item.imageUrl}
                     alt={item.title}
@@ -15,7 +15,7 @@ const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
                 />
             </Link>
 
-            <Link href={`/blogs/${item.id}`}>
+            <Link href={`/blogs/${item.slug}`}>
                 <h6 className='text-xs leading-5 font-bold hover:opacity-70 transition-opacity'>
                     {item.title}
                 </h6>

src/app/blogs/service/BlogService.ts

@@ -37,7 +37,7 @@ export const getCombinedBlogs = async () => {
   return data;
 };
 
-export const getBlogSingle = async (id: string) => {
-  const { data } = await axios.get<BlogSingleResponse>(`/blogs/${id}`);
+export const getBlogSingle = async (slug: string) => {
+  const { data } = await axios.get<BlogSingleResponse>(`/blogs/slug/${slug}`);
   return data;
 };

src/components/BlogItem.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 const BlogItem: FC<Props> = ({ item }) => {
     return (
-        <Link href={`/blogs/${item.id}`} className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
+        <Link href={`/blogs/${item.slug}`} className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
             <Image
                 src={item.imageUrl}
                 layout='fill'

src/shared/SideBar.tsx

@@ -6,6 +6,7 @@ import { useSharedStore } from './store/sharedStore'
 import { clx } from '../helpers/utils'
 import Image from 'next/image'
 import { usePathname } from 'next/navigation'
+import Button from '@/components/Button'
 
 const SideBar: FC = () => {
 
@@ -35,7 +36,7 @@ const SideBar: FC = () => {
                     <Image src={'/images/logo.svg'} width={140} height={40} alt='logo' className='w-[140px]' />
                 </div>
 
-                <div className='flex-1 h-full overflow-y-auto no-scrollbar'>
+                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
                     <div className='mt-10 px-12 text-header text-sm font-normal'>
                         منو
                     </div>
@@ -90,6 +91,19 @@ const SideBar: FC = () => {
                             link={'/blogs'}
                         />
 
+                        <SideBarItem
+                            icon={<DocumentText variant={isActive('contact') ? 'Bold' : 'Outline'} color={isActive('contact') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'تماس با ما'}
+                            isActive={isActive('contact')}
+                            link={'/contact'}
+                        />
+
+                    </div>
+
+                    <div className='flex-1 flex items-end justify-center px-12'>
+                        <Button
+                            label='ورود | ثبت نام'
+                        />
                     </div>
 
                 </div>