Improved UI of mobile sidebar

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ChevronLeft, ChevronRight, Sun, Moon, Plus, Circle } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Sun, Moon, Plus, Circle, User } from 'lucide-react';
 import { HabitList } from './components/HabitList';
 import { Calendar } from './components/Calendar';
 import { Sidebar } from './components/Sidebar';
@@ -98,6 +98,28 @@ function HabitTrackerContent() {
       </div>
 
       <div className="max-w-5xl mx-auto relative">
+        <div className="md:hidden mb-4">
+          <div className={`
+            p-4 rounded-lg
+            ${theme.cardBackground}
+            ${theme.border}
+            border
+            flex items-center gap-3
+          `}>
+            <div className="h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+              <User className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className={`text-sm font-medium ${theme.text} truncate`}>
+                {user?.email}
+              </div>
+              <div className={`text-xs ${theme.mutedText}`}>
+                Logged in
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div className={`
           mb-8 p-4 md:p-6 
           rounded-lg shadow-md

src/components/MobileNav.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plus, CalendarIcon, SettingsIcon, LogOut, User } from 'lucide-react';
+import { Plus, CalendarIcon, SettingsIcon, LogOut } from 'lucide-react';
 import { useThemeContext } from '../contexts/ThemeContext';
 import { useAuth } from '../contexts/AuthContext';
 
@@ -12,21 +12,22 @@ interface MobileNavProps {
 
 export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView }) => {
   const { theme } = useThemeContext();
-  const { signOut, user } = useAuth();
+  const { signOut } = useAuth();
 
   return (
     <>
-      {/* Spacer to prevent content from being hidden behind the nav */}
-      <div className="h-20 md:hidden" />
+      <div className="h-24 md:hidden" />
       
       <nav className={`
-        fixed bottom-4 left-4 right-4 md:hidden
+        fixed bottom-0 left-0 right-0 md:hidden
         ${theme.cardBackground} 
-        rounded-2xl shadow-lg backdrop-blur-lg
-        border ${theme.border}
+        rounded-t-2xl shadow-lg backdrop-blur-lg
+        border-t ${theme.border}
         z-50
+        safe-bottom
+        pb-safe
       `}>
-        <div className="flex justify-around items-center p-2">
+        <div className="flex justify-around items-center p-4">
           <NavButton
             active={activeView === 'habits'}
             onClick={() => setActiveView('habits')}
@@ -45,11 +46,6 @@ export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView
             icon={<SettingsIcon className="h-5 w-5" />}
             label="Settings"
           />
-          <NavButton
-            icon={<User className="h-5 w-5" />}
-            label={user?.email?.split('@')[0] ?? 'Account'}
-            tooltip={user?.email}
-          />
           <NavButton
             onClick={signOut}
             icon={<LogOut className="h-5 w-5" />}