From a8824e386414777567200bee188a7cacbfe0bc04 Mon Sep 17 00:00:00 2001
From: Taqi Tahmid <mdtaqitahmid@gmail.com>
Date: Mon, 21 Apr 2025 19:00:27 +0300
Subject: [PATCH] sidebar: adapt sidebar to mobile display

---
 frontend/src/App.tsx                |  6 ++---
 frontend/src/components/Footer.tsx  |  2 +-
 frontend/src/components/Sidebar.tsx | 40 +++++++++++++++++------------
 frontend/src/components/Tooltip.tsx |  5 ++--
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 72e9f4a..361992a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,11 +25,11 @@ function App() {
         <main className="bg-amber-50 px-10 dark:bg-gray-900">
           <section className="min-h-screen">
             <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
-            <div className="flex flex-row h-full">
-              <div className="w-1/4 max-w-[260px] max-h-[928px] border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
+            <div className="md:flex md:flex-row md:h-full">
+              <div className="mb-4 md:w-1/4 md:max-w-[260px] md:max-h-[900px] border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
                 <Sidebar />
               </div>
-              <div className="flex-1">
+              <div className="md:flex-1">
                 <Router>
                   <Routes>
                     <Route path="/" element={<Home />} />
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index ebf0fe4..beb23fe 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -4,7 +4,7 @@ const Footer = () => {
   const currentYear = new Date().getFullYear()
 
   return (
-    <footer className="mt-24 py-6 border-t border-gray-200 dark:border-gray-800">
+    <footer className="mt-12 md:mt-24 py-6 border-t border-gray-200 dark:border-gray-800">
       <div className="max-w-4xl mx-auto px-4">
         <div className="flex flex-col items-center gap-4 text-gray-600 dark:text-gray-400 text-sm">
           <div className="flex items-center gap-2">
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 07330bc..5640dab 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,24 +1,28 @@
 import { COLORS, SOCIALLINKS } from '../constants'
+import { Tooltip } from './Tooltip'
 
 interface LinkProps {
   href: string
   children: React.ReactNode
   icon: React.ReactNode
+  label: string
 }
 
-const Link: React.FC<LinkProps> = ({ icon, href, children }) => {
+const Link: React.FC<LinkProps> = ({ icon, href, children, label }) => {
   return (
     <div className="transition-all duration-200 hover:translate-x-1">
-      <div className="mb-2 border border-gray-200 dark:border-gray-700 p-3 rounded-lg hover:shadow-md">
-        <a
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
-        >
-          {icon}
-          <span className="text-sm font-medium hidden md:inline">{children}</span>
-        </a>
+      <div className="m-2 border border-gray-200 dark:border-gray-700 p-2 md:p-3 rounded-lg hover:shadow-md">
+        <Tooltip label={label} position="top" additionalClass="md:hidden">
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+          >
+            {icon}
+            <span className="text-sm font-medium hidden md:inline">{children}</span>
+          </a>
+        </Tooltip>
       </div>
     </div>
   )
@@ -26,39 +30,41 @@ const Link: React.FC<LinkProps> = ({ icon, href, children }) => {
 
 const Sidebar = () => {
   const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-    <h2 className={`mt-6 mb-4 text-lg font-semibold ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
+    <h2
+      className={`mt-4 mb-4 text-lg font-semibold ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} hidden md:block`}
+    >
       {children}
     </h2>
   )
 
   return (
     <div
-      className={`p-6 max-w-xs mx-auto ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} rounded-xl shadow-sm`}
+      className={`grid grid-cols-4 md:grid-cols-1 p-2 md:p-6 max-w-xs mx-auto ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} rounded-xl shadow-sm`}
     >
       <SectionTitle>Contact</SectionTitle>
       {SOCIALLINKS.contact.map((link, index) => (
-        <Link key={index} icon={link.icon} href={link.href}>
+        <Link key={index} icon={link.icon} href={link.href} label={link.text}>
           {link.text}
         </Link>
       ))}
 
       <SectionTitle>Connect</SectionTitle>
       {SOCIALLINKS.connect.map((link, index) => (
-        <Link key={index} icon={link.icon} href={link.href}>
+        <Link key={index} icon={link.icon} href={link.href} label={link.text}>
           {link.text}
         </Link>
       ))}
 
       <SectionTitle>Follow</SectionTitle>
       {SOCIALLINKS.follow.map((link, index) => (
-        <Link key={index} icon={link.icon} href={link.href}>
+        <Link key={index} icon={link.icon} href={link.href} label={link.text}>
           {link.text}
         </Link>
       ))}
 
       <SectionTitle>Achievements</SectionTitle>
       {SOCIALLINKS.publications.map((link, index) => (
-        <Link key={index} icon={link.icon} href={link.href}>
+        <Link key={index} icon={link.icon} href={link.href} label={link.text}>
           {link.text}
         </Link>
       ))}
diff --git a/frontend/src/components/Tooltip.tsx b/frontend/src/components/Tooltip.tsx
index 6fd38e9..6dc6fac 100644
--- a/frontend/src/components/Tooltip.tsx
+++ b/frontend/src/components/Tooltip.tsx
@@ -2,9 +2,10 @@ export interface TooltipProps {
   children: React.ReactNode
   label: string
   position: 'top' | 'bottom' | 'left' | 'right'
+  additionalClass?: string
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({ children, label, position }) => {
+export const Tooltip: React.FC<TooltipProps> = ({ children, label, position, additionalClass }) => {
   const tooltipStyles = {
     top: 'bottom-full left-1/2 -translate-x-1/2',
     bottom: 'top-full left-1/2 -translate-x-1/2',
@@ -12,7 +13,7 @@ export const Tooltip: React.FC<TooltipProps> = ({ children, label, position }) =
     right: 'left-full top-1/2 -translate-y-1/2',
   }
   const tooltipPosition: string = tooltipStyles[position]
-  const tooltipClass = `pointer-events-none absolute mt-2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100 ${tooltipPosition}`
+  const tooltipClass = `pointer-events-none absolute mt-2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100 ${tooltipPosition} ${additionalClass}`
 
   return (
     <div className="group relative">