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

12
src/components/Sidebar.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'; 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 { useThemeContext } from '../contexts/ThemeContext';
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from '../contexts/AuthContext';
@ -12,7 +12,7 @@ interface SidebarProps {
export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) => { export const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) => {
const { theme } = useThemeContext(); const { theme } = useThemeContext();
const { signOut } = useAuth(); const { signOut, user } = useAuth();
return ( return (
<nav className={`w-72 h-screen sticky top-0 border-r ${theme.border} ${theme.sidebarBackground} flex flex-col`}> <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> </li>
</ul> </ul>
</div> </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 <button
onClick={signOut} onClick={signOut}
className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center className={`w-full px-6 py-3 text-left rounded-lg transition-all duration-200 flex items-center