Merge pull request #296 from 0x74h51N/Staging

hotfix
0x74h51N · Sep 18, 2024 · d6932df · d6932df · vercel · Sep 18, 2024
2 parents df6bf18 + e46b488
commit d6932df
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/app/[lang]/blog/[uid]/page.tsx b/app/[lang]/blog/[uid]/page.tsx
@@ -14,6 +14,7 @@ import { createTranslation } from '@/i18n/server';
 import { Locales } from '@/i18n/settings';
 import { langMap } from '@/utils/langMap';
 import dynamic from 'next/dynamic';
+import ShareButtons from '../components/ui/ShareButtons';
 
 const PostCard = dynamic(
   () => import('../components/PostCard').then((mod) => mod.PostCard),
@@ -103,7 +104,7 @@ export default async function Page({ params }: { params: Params }) {
     <div className="flex flex-col items-center bg-base-100 w-full h-full lg:py-32 md:py-28 py-20">
       <div
         id={'article-wrapper'}
-        className="flex flex-col gap-10 w-full xl:max-w-[1450px] max-w-[1150px] lg:pl-[265px] sm:px-5 px-3 transition-all ease-in-out duration-500"
+        className="flex flex-col gap-10 w-full max-w-[1150px] lg:pl-[265px] sm:px-5 px-3 transition-all ease-in-out duration-500"
       >
         <section className="flex flex-col mb-10 relative">
           <div className="flex flex-col items-center gap-3 w-full mb-6">
@@ -128,9 +129,12 @@ export default async function Page({ params }: { params: Params }) {
           <Toc slices={slices} title={title} />
           <section
             id={'article-content'}
-            className="flex flex-col md:pt-8 pt-4 sm:border rounded-b-lg border-t-base-100 border-base-300 pb-16 xl:px-10 lg:px-6 md:px-2 gap-4"
+            className="flex flex-col md:pt-8 pt-4 sm:border rounded-b-lg border-t-base-100 border-base-300 pb-16 xl:px-10 lg:px-6 md:px-2 gap-4 relative"
           >
             <SliceZone slices={slices} components={components} />
+            <div className="absolute right-3 -bottom-8 bg-base-100 sm:border border-base-300 p-4 ">
+              <ShareButtons textHidden={false} />
+            </div>
           </section>
           <div className="min-h-14"></div>
         </section>

diff --git a/app/[lang]/blog/components/RichText.tsx b/app/[lang]/blog/components/RichText.tsx
@@ -15,7 +15,7 @@ export const richTextComponents: JSXMapSerializer = {
   heading1: ({ children, node }) => (
     <Heading
       as="h2"
-      className="!mb-10 !mt-24 w-full h1-blog text-h1"
+      className="md:!mb-10 md:!mt-24 !mt-16 !mb-5 w-full h1-blog text-h1"
       id={slugifyHeading(node)}
     >
       {children}

diff --git a/app/[lang]/blog/components/ui/Menu.tsx b/app/[lang]/blog/components/ui/Menu.tsx
@@ -36,25 +36,27 @@ const Menu = () => {
       <div
         ref={stickyRef}
         className={clsx(
-          'sticky flex items-center justify-end border border-base-300 backdrop-blur-sm backdrop-filter bg-base-100 top-0 rigth-0 p-2 !select-none z-50 self-end transition-all ease-in-out duration-500',
+          'sticky flex items-center justify-end border border-base-300 backdrop-blur-sm backdrop-filter bg-base-100 top-0 rigth-0 xl:p-2 py-1 !select-none z-50 self-end transition-all ease-in-out duration-500',
           open
-            ? 'w-full md:pl-6 h-[58px] pr-2 bg-opacity-25'
-            : '-mr-8 w-16 h-22 bg-opacity-100',
+            ? 'w-full md:pl-6 h-[58px] bg-opacity-25'
+            : 'xl:-mr-8 lg:-mr-5  md:-mr-4 -mr-3 xl:w-16 w-12 h-22 bg-opacity-100',
         )}
       >
-        <div
-          className={clsx(
-            'justify-between w-full transition-all ease-in-out duration-500 delay-200 flex',
-            open ? 'opacity-100 ' : 'opacity-0 hidden',
-          )}
-        >
-          <div className="flex items-center">
-            <ThemeToggle />
-            <ExpandButton isWide={isWide} setWide={setWide} />
-            <FontSizeChanger />
+        {open && (
+          <div
+            className={clsx(
+              'justify-between w-full transition-all ease-in-out delay-200 duration-200 flex',
+              open ? 'opacity-100 ' : 'opacity-0 hidden',
+            )}
+          >
+            <div className="flex items-center">
+              <ThemeToggle />
+              <ExpandButton isWide={isWide} setWide={setWide} />
+              <FontSizeChanger />
+            </div>
+            <ShareButtons />
           </div>
-          <ShareButtons />
-        </div>
+        )}
 
         <div
           className={clsx(
@@ -63,12 +65,12 @@ const Menu = () => {
         >
           <div
             className={clsx(
-              'py-0 px-auto transition-all w-full max-w-11 ease-in-out duration-200 btn btn-ghost btn-sm h-10',
+              'py-0 px-auto transition-all w-full sm:max-w-11 max-w-8 ease-in-out duration-200 btn btn-ghost btn-sm h-10',
               stickyTop ? 'opacity-0 hidden delay-75' : 'opacity-100',
             )}
             onClick={() => !stickyTop && setOpen(!open)}
           >
-            <div className="ml-2 mt-1.5">
+            <div className="sm:ml-2 mt-1.5">
               <BurgerButton
                 color={'#eeb30d'}
                 width={32}

diff --git a/app/[lang]/blog/components/ui/ShareButtons.tsx b/app/[lang]/blog/components/ui/ShareButtons.tsx
@@ -1,11 +1,13 @@
+'use client';
 import IconButton from '@/components/Buttons/IconButton';
+import clsx from 'clsx';
 import { usePathname } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdCheck } from 'react-icons/md';
 import { RiShare2Fill } from 'react-icons/ri';
 
-const ShareButtons = () => {
+const ShareButtons = ({ textHidden = true }) => {
   const [shareUrl, setShareUrl] = useState('');
   const pathname = usePathname();
   const { t } = useTranslation('blog');
@@ -29,7 +31,12 @@ const ShareButtons = () => {
 
   return (
     <div className="flex justify-between items-center">
-      <span className="max-md:hidden cool-text font-bold text-lg antialiased">
+      <span
+        className={clsx(
+          'cool-text font-bold text-lg antialiased',
+          textHidden && 'max-md:hidden',
+        )}
+      >
         {t('blog-post.share.share')}
       </span>
       <div className="flex items-center justify-center ml-2">
@@ -74,7 +81,7 @@ const ShareButtons = () => {
           />
         </div>
         <button
-          className="btn btn-sm btn-ghost px-1 "
+          className="btn btn-sm btn-ghost px-1"
           onClick={handleCopy}
           aria-label={t('blog-post.share.facebook')}
         >