Skip to content

Commit a39bc61

Browse files
AmirMohammad CheraghaliAmirMohammad Cheraghali
AmirMohammad Cheraghali
authored and
AmirMohammad Cheraghali
committed
feat(guide): Redesign for mobile responsiveness
1 parent 0266a59 commit a39bc61

1 file changed

Lines changed: 40 additions & 18 deletions

File tree

‎src/components/HelpGuide.tsx‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import {
33
CircleHelp, X, MousePointer2, Keyboard, Sparkles,
4-
BookOpen, Layers, Activity, Share2, FileUp
4+
BookOpen, Layers, Activity, Share2, FileUp, ArrowLeft
55
} from 'lucide-react';
66

77
type FeatureSection = {
@@ -15,6 +15,7 @@ type FeatureSection = {
1515
export const HelpGuide: React.FC = () => {
1616
const [isOpen, setIsOpen] = useState(false);
1717
const [activeTab, setActiveTab] = useState('start');
18+
const [showMobileList, setShowMobileList] = useState(true);
1819

1920
React.useEffect(() => {
2021
const handleKeyDown = (e: KeyboardEvent) => {
@@ -271,10 +272,10 @@ export const HelpGuide: React.FC = () => {
271272
{/* Modal Overlay */}
272273
{isOpen && (
273274
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
274-
<div className="relative w-full max-w-5xl h-[85vh] flex bg-neutral-950 border border-neutral-800 rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
275+
<div className="relative w-full max-w-5xl h-[85vh] flex flex-col md:flex-row bg-neutral-950 border border-neutral-800 rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
275276

276277
{/* Sidebar */}
277-
<div className="w-64 flex-shrink-0 border-r border-neutral-800 bg-neutral-900/50 flex flex-col">
278+
<div className={`w-full md:w-64 flex-shrink-0 border-b md:border-b-0 md:border-r border-neutral-800 bg-neutral-900/50 flex-col ${showMobileList ? 'flex' : 'hidden md:flex'}`}>
278279
<div className="p-5 border-b border-neutral-800">
279280
<h2 className="text-lg font-bold text-white flex items-center gap-2">
280281
<CircleHelp className="w-5 h-5 text-blue-500" />
@@ -286,31 +287,49 @@ export const HelpGuide: React.FC = () => {
286287
{features.map(feature => (
287288
<button
288289
key={feature.id}
289-
onClick={() => setActiveTab(feature.id)}
290-
className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-medium transition-all ${activeTab === feature.id
291-
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
292-
: 'text-neutral-400 hover:text-white hover:bg-white/5'
290+
onClick={() => {
291+
setActiveTab(feature.id);
292+
setShowMobileList(false);
293+
}}
294+
className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-medium transition-all ${activeTab === feature.id && !showMobileList // Highlight only if not looking at list (mobile) logic doesn't apply well, keep simple active state
295+
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
296+
: activeTab === feature.id
297+
? 'bg-blue-600/10 text-blue-400 md:bg-blue-600 md:text-white md:shadow-lg'
298+
: 'text-neutral-400 hover:text-white hover:bg-white/5'
293299
}`}
294300
>
295-
<feature.icon className={`w-4 h-4 ${activeTab === feature.id ? 'text-white' : 'text-neutral-500'}`} />
301+
<feature.icon className={`w-4 h-4 ${activeTab === feature.id ? 'text-blue-400 md:text-white' : 'text-neutral-500'}`} />
296302
{feature.title}
303+
<div className="flex-1" />
304+
<div className="md:hidden text-neutral-600">→</div>
297305
</button>
298306
))}
299307
</div>
300-
<div className="p-4 border-t border-neutral-800 text-center">
301-
<p className="text-[10px] text-neutral-600">
308+
<div className="p-4 border-t border-neutral-800 text-center flex justify-between md:justify-center items-center">
309+
<button onClick={() => setIsOpen(false)} className="md:hidden text-xs text-neutral-400 flex items-center gap-1">
310+
<X className="w-3 h-3" /> Close
311+
</button>
312+
<p className="text-[10px] text-neutral-600 hidden md:block">
302313
Press <kbd className="font-mono bg-neutral-800 px-1 rounded text-neutral-400">Esc</kbd> to close
303314
</p>
304315
</div>
305316
</div>
306317

307318
{/* Content Area */}
308-
<div className="flex-1 flex flex-col min-w-0 bg-neutral-900/30">
319+
<div className={`flex-1 flex-col min-w-0 bg-neutral-900/30 ${showMobileList ? 'hidden md:flex' : 'flex'}`}>
309320
{/* Header */}
310-
<div className="h-16 flex items-center justify-between px-8 border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-xl">
311-
<div>
312-
<h3 className="text-xl font-bold text-white">{activeFeature.title}</h3>
313-
<p className="text-xs text-neutral-400">{activeFeature.description}</p>
321+
<div className="h-16 flex items-center justify-between px-4 md:px-8 border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-xl shrink-0">
322+
<div className="flex items-center gap-3">
323+
<button
324+
onClick={() => setShowMobileList(true)}
325+
className="md:hidden p-1.5 -ml-2 text-neutral-400 hover:text-white rounded-lg hover:bg-white/5 active:scale-95 transition-all"
326+
>
327+
<ArrowLeft className="w-5 h-5" />
328+
</button>
329+
<div>
330+
<h3 className="text-xl font-bold text-white">{activeFeature.title}</h3>
331+
<p className="text-xs text-neutral-400 hidden sm:block">{activeFeature.description}</p>
332+
</div>
314333
</div>
315334
<button
316335
onClick={() => setIsOpen(false)}
@@ -321,15 +340,18 @@ export const HelpGuide: React.FC = () => {
321340
</div>
322341

323342
{/* Scrollable Body */}
324-
<div className="flex-1 overflow-y-auto p-8 scrollbar-thin scrollbar-thumb-neutral-700">
343+
<div className="flex-1 overflow-y-auto p-4 md:p-8 scrollbar-thin scrollbar-thumb-neutral-700">
325344
<div className="max-w-3xl mx-auto">
326-
<div className="animate-in fade-in duration-300">
345+
<p className="sm:hidden text-xs text-neutral-500 mb-6 pb-4 border-b border-neutral-800/50">
346+
{activeFeature.description}
347+
</p>
348+
<div className="animate-in fade-in slide-in-from-right-4 duration-300">
327349
{activeFeature.content}
328350
</div>
329351
</div>
330352

331353
{/* Shared Footer Attribution */}
332-
<div className="mt-12 pt-6 border-t border-neutral-800/50 flex justify-between items-center opacity-50 hover:opacity-100 transition-opacity">
354+
<div className="mt-12 pt-6 border-t border-neutral-800/50 flex flex-col sm:flex-row justify-between items-center opacity-50 hover:opacity-100 transition-opacity gap-4">
333355
<div className="flex gap-4 text-[10px] text-neutral-500">
334356
<a href="https://www.rcsb.org/" target="_blank" rel="noopener noreferrer" className="hover:text-blue-400">RCSB PDB</a>
335357
<a href="http://nglviewer.org/" target="_blank" rel="noopener noreferrer" className="hover:text-blue-400">NGL Viewer</a>

0 commit comments

Comments
 (0)