feat(nav, blog) new ThemeSwitcher, also several updates on ui

frontend/app/blog/BlogPostCard.tsx

@@ -33,19 +33,23 @@ function BlogPostCard({ post }: Props) {
                     <Image
                         alt={ 'cover picture' }
                         src={ header_img }
-                        className={ `w-full object-cover rounded-b-none` }
-                        style={ {
-                            'maskImage': 'linear-gradient(black 95%, transparent)',
-                            'backdropFilter': 'blur(20px)'
-                        } }
+                        className={ `w-full object-cover rounded-b-none z-10` }
+                        loading={ 'eager' }
+                        fill
+                    ></Image>
+                    <Image
+                        alt={ 'cover picture shadow' }
+                        src={ header_img }
+                        loading={ 'eager' }
+                        className={ `w-full object-cover rounded-b-none scale-y-110 blur-2xl` }
                         fill
                     ></Image>
                 </div> }
 
                 <CardBody className={ `overflow-visible` }>
                     <div className={ `flex flex-row justify-between` }>
-                        <div className={ `mx-2 ${ header_img !== '' ? '-mt-8' : 'mt-2' }` }>
-                            <Chip className={ `mb-2 z-30` } radius={ `sm` } color={ `secondary` }
+                        <div className={ `mx-2 ${ header_img !== '' ? '-mt-6' : 'mt-2' }` }>
+                            <Chip className={ `mb-2 z-30 text-lg` } radius={ `sm` } size={ 'lg' } color={ `secondary` }
                                   variant={ `solid` }>{ category }</Chip>
                             <p className={ `text-4xl font-bold` }> { title }</p>
                             <p className={ `text-xl` }> { sub_title }</p>
@@ -54,13 +58,7 @@ function BlogPostCard({ post }: Props) {
                     </div>
                 </CardBody>
 
-                {/*   <CardBody className={ `transition-all duration-300 hidden group-hover:block` }>
-                 <div className={ `mx-2` }>
-                 <p>{ summary }</p>
-                 </div>
-                 </CardBody>*/ }
-
-                <CardFooter>
+                <CardFooter className={ 'pt-0' }>
                     <div className={ `flex flex-row flex-wrap justify-between w-full` }>
                         <div>
                             <ul className={ `flex flex-row flex-wrap` }>

frontend/app/blog/Pagination.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Pagination as NextUIPagination } from '@nextui-org/react';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useScreenSizeTrigger } from '@/app/public/screenSizeTrigger';
 
 const Pagination = ({ total }: {
     total: number,
@@ -12,23 +13,7 @@ const Pagination = ({ total }: {
 
     const router = useRouter();
 
-    const maxMobileWidth: number = 768;
-    const [ isMobile, setIsMobile ] = useState(false);
-    useEffect(() => {
-        const updateMobileWidth = () => {
-            if (window.innerWidth <= maxMobileWidth) {
-                setIsMobile(true);
-            } else {
-                setIsMobile(false);
-            }
-        };
-        updateMobileWidth();
-        window.addEventListener('resize', updateMobileWidth);
-        return () => {
-            window.removeEventListener('resize', updateMobileWidth);
-        };
-
-    }, []);
+    const isMobile = useScreenSizeTrigger('md');
 
     return (
         <div className={ 'w-full p-4 pt-6 flex justify-center' }>

frontend/app/blog/post/[id]/Footer.tsx

@@ -25,7 +25,14 @@ const Footer = (props: Props) => {
         <div className={ `w-full` }>
 
             <div className={ 'flex transition bg-zinc-300/80 dark:bg-gray-600/25' }>
-                <div className={ `p-8 w-full` }>
+                <div className={ `p-8 w-full overflow-hidden` }>
+                    <div className={ 'relative' }>
+                        <FaCreativeCommons
+                            size={ '160px' }
+                            className={ 'absolute right-0 top-0 -mt-[4.8rem] -mr-16 opacity-30 brightness-50  ' }
+                        />
+                    </div>
+
                     <div className={ 'flex flex-col space-y-4 relative' }>
                         <div className={ 'z-[2]' }>
                             <p className={ 'text-xl font-bold' }>{ post['meta']['title'] }</p>
@@ -63,8 +70,6 @@ const Footer = (props: Props) => {
                                 </Link>
                             </div>
                         </div>
-                        <FaCreativeCommons size={ '80px' }
-                                           className={ 'absolute inset-y-0 right-0 opacity-50 brightness-75  z-0' } />
                     </div>
                 </div>
             </div>

frontend/app/blog/post/[id]/Headers.tsx

@@ -42,7 +42,7 @@ const Headers = (props: Props) => {
                     'mx-8 -mt-16 backdrop-blur transition bg-zinc-300/80 dark:bg-gray-600/25 rounded-2xl z-30'
                     : 'mx-6 mt-6'
                 }>
-                <div className={ `p-4` }>
+                <div className={ header_img !== '' ? `p-4` : 'p-4 pt-2' }>
                     <Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
                           variant={ `solid` }>{ category }</Chip>
                     <p className={ `text-4xl font-bold` }> { title }</p>