taqi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar: adapt sidebar to mobile display

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-21 19:00:27 +03:00
parent 92913fb20f
commit a8824e3864
4 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.tsx
View File

@ -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 />} />

2
frontend/src/components/Footer.tsx
View File

@ -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">

40
frontend/src/components/Sidebar.tsx
View File

@ -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>
))}

5
frontend/src/components/Tooltip.tsx
View File

@ -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">