harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-15 07:04:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added way to see name of account in sidebar

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-22 00:19:56 -05:00
parent 9cbabd9925
commit 587f4b4d78
2 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/MobileNav.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Plus, CalendarIcon, SettingsIcon, LogOut } from 'lucide-react';
import { Plus, CalendarIcon, SettingsIcon, LogOut, User } from 'lucide-react';
import { useThemeContext } from '../contexts/ThemeContext';
import { useAuth } from '../contexts/AuthContext';
@ -12,7 +12,7 @@ interface MobileNavProps {
export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView }) => {
const { theme } = useThemeContext();
const { signOut } = useAuth();
const { signOut, user } = useAuth();
return (
<>
@ -45,6 +45,11 @@ 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" />}
@ -59,10 +64,11 @@ export const MobileNav: React.FC<MobileNavProps> = ({ activeView, setActiveView
interface NavButtonProps {
active?: boolean;
onClick: () => void;
onClick?: () => void;
icon: React.ReactNode;
label: string;
variant?: 'default' | 'danger';
tooltip?: string;
}
const NavButton: React.FC<NavButtonProps> = ({
@ -70,7 +76,8 @@ const NavButton: React.FC<NavButtonProps> = ({
onClick,
icon,
label,
variant = 'default'
variant = 'default',
tooltip
}) => {
const { theme } = useThemeContext();
@ -85,8 +92,9 @@ const NavButton: React.FC<NavButtonProps> = ({
className={`
${baseStyles}
${variantStyles}
${active ? 'scale-95 shadow-inner' : 'hover:scale-105'}
${active ? 'scale-95 shadow-inner' : onClick ? 'hover:scale-105' : ''}
`}
title={tooltip}
>
<div className={`
${active ? 'scale-95' : ''}
@ -95,7 +103,7 @@ const NavButton: React.FC<NavButtonProps> = ({
{icon}
</div>
<span className={`
text-xs mt-1 font-medium
text-xs mt-1 font-medium truncate max-w-[60px]
${active ? 'opacity-100' : 'opacity-70'}
`}>
{label}

12
src/components/Sidebar.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Plus, CalendarIcon, SettingsIcon, LogOut } from 'lucide-react';
import { Plus, CalendarIcon, SettingsIcon, LogOut, User } from 'lucide-react';
import { useThemeContext } from '../contexts/ThemeContext';
import { useAuth } from '../contexts/AuthContext';
@ -12,7 +12,7 @@ interface SidebarProps {
export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) => {
const { theme } = useThemeContext();
const { signOut } = useAuth();
const { signOut, user } = useAuth();
return (
<nav className={`w-72 h-screen sticky top-0 border-r ${theme.border} ${theme.sidebarBackground} flex flex-col`}>
@ -62,7 +62,13 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) =
</li>
</ul>
</div>
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
<div className="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
<div className={`w-full px-6 py-3 rounded-lg ${theme.text} ${theme.habitItem} flex items-center`}>
<User className="h-5 w-5 mr-3" />
<div className="flex-1 truncate">
<span className="font-medium block truncate">{user?.email}</span>
</div>
</div>
<button
onClick={signOut}
className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center