david/ai-job-application
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Maximize interface for mobile phone viewports with touch-friendly swipeable navigation bar and responsive layouts

Browse Source
This commit is contained in:
david
2026-07-23 12:16:02 -04:00
parent 74d402784e
commit 3b00cceafb
3 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.app.pid
+1 -1
View File
@@ -1 +1 @@
269065
270801
src/components/Sidebar.tsx
+8 -8
View File
@@ -81,13 +81,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
];
return (
<aside className="w-full md:w-64 bg-slate-900 border-r border-slate-800 flex flex-col p-3 gap-1 shrink-0">
<aside className="w-full md:w-64 bg-slate-900 border-b md:border-b-0 md:border-r border-slate-800 flex flex-col p-2.5 sm:p-3 gap-1 shrink-0 overflow-x-auto md:overflow-x-visible">
<div className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
<div className="hidden md:block px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
Portal Navigation
</div>
<nav className="flex flex-col gap-1">
<nav className="flex flex-row md:flex-col gap-1 overflow-x-auto md:overflow-x-visible no-scrollbar py-1 md:py-0">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = activeTab === item.id;
@@ -96,19 +96,19 @@ export const Sidebar: React.FC<SidebarProps> = ({
<button
key={item.id}
onClick={() => setActiveTab(item.id)}
className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl font-medium text-xs transition-all ${
className={`flex items-center justify-between px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl font-medium text-xs whitespace-nowrap transition-all shrink-0 md:shrink ${
isActive
? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30 font-semibold'
: 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/80'
: 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/80 bg-slate-950/60 md:bg-transparent border border-slate-800/80 md:border-none'
}`}
>
<div className="flex items-center gap-2.5">
<div className="flex items-center gap-2">
<Icon className={`w-4 h-4 ${isActive ? 'text-white' : item.highlight ? 'text-amber-400' : 'text-slate-400'}`} />
<span>{item.label}</span>
</div>
{item.badge && (
<span className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${item.badgeColor}`}>
<span className={`hidden sm:inline-block ml-2 px-1.5 py-0.5 rounded-full text-[10px] font-bold border ${item.badgeColor}`}>
{item.badge}
</span>
)}
@@ -118,7 +118,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
</nav>
{/* Quick AI Assist Card in Sidebar */}
<div className="mt-auto pt-4 border-t border-slate-800/80 px-2">
<div className="hidden md:block mt-auto pt-4 border-t border-slate-800/80 px-2">
<div className="p-3 rounded-xl bg-gradient-to-br from-indigo-950/60 to-slate-900 border border-indigo-500/20 text-slate-300">
<div className="flex items-center gap-2 text-xs font-semibold text-indigo-300 mb-1">
<Zap className="w-3.5 h-3.5 text-amber-400" />
src/index.css
+16
View File
@@ -1 +1,17 @@
@import "tailwindcss";
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Smooth mobile touch scrolling */
* {
-webkit-overflow-scrolling: touch;
}