From ef6e9e0fe5b3828a2113712e7ceee5f45164b20b Mon Sep 17 00:00:00 2001
From: Manas Kumar Pradhan <pkmanas22@gmail.com>
Date: Mon, 9 Dec 2024 00:27:28 +0530
Subject: [PATCH] fix/1635 content title with scrolling effect

---
 src/components/Sidebar.tsx | 14 ++++++++++++--
 tailwind.config.js         |  5 +++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d3bf61eb3..e35b6e690 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -204,12 +204,21 @@ export function Sidebar({
             }
           >
             <div className="flex w-full items-center justify-between gap-2">
-              <div className="flex items-center gap-2">
+              <div className="flex items-center w-full gap-2">
                 <div className="flex gap-2">
                   {content.type === 'video' && <Check content={content} />}
                   {content.type === 'video' && <Play className="size-4" />}
                   {content.type === 'notion' && <File className="size-4" />}
                 </div>
+                <div className="relative w-[70%] overflow-hidden">
+                  <div
+                    className="w-full whitespace-nowrap transition-transform ease-linear hover:animate-content-scroll group"
+                  >
+                    <span className="truncate group-hover:overflow-visible group-hover:whitespace-nowrap group-hover:text-clip">
+                      {content.title}
+                    </span>
+                  </div>
+                </div>
                 {content.type === 'video' && (
                   <BookmarkButton
                     bookmark={content.bookmark ?? null}
@@ -219,6 +228,7 @@ export function Sidebar({
               </div>
             </div>
           </Link>
+
         );
       });
     },
@@ -249,7 +259,7 @@ export function Sidebar({
             ref={sidebarRef}
             exit="closed"
             variants={sidebarVariants}
-            className="fixed right-0 top-[64px] z-[99999] flex h-screen w-full flex-col gap-4 overflow-y-auto rounded-r-lg border-l border-primary/10 bg-neutral-50 dark:bg-neutral-900 md:max-w-[30vw]"
+            className="fixed right-0 top-[64px] z-[99999] flex h-screen w-full flex-col gap-4 overflow-y-auto rounded-r-lg border-l border-primary/10 bg-neutral-50 dark:bg-neutral-900 md:max-w-[50vw] lg:max-w-[35vw]"
           >
             <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 bg-neutral-50 p-5 dark:bg-neutral-900">
               {' '}
diff --git a/tailwind.config.js b/tailwind.config.js
index 2767ee02d..09bc4e10d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -76,6 +76,10 @@ module.exports = {
           '0%, 100%': { opacity: 1 },
           '50%': { opacity: 0.5 },
         },
+        'content-scroll': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-50%)' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
@@ -83,6 +87,7 @@ module.exports = {
         scroll:
           'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite',
         pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'content-scroll': 'content-scroll 5s linear infinite',
       },
       height: {
         sidebar: 'calc(100vh - 64px)',