Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1703 Side nav bar design #1806

Closed
wants to merge 3 commits into from
Closed

1703 Side nav bar design #1806

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
964fc5a
1703 sidebar design
tiwarineelu59 May 29, 2024
4b78d54
1703 sidebar design
tiwarineelu59 May 30, 2024
b6ca222
Side navbar
tiwarineelu59 Jun 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 26 additions & 53 deletions apps/user-profile/src/components/modules/UserProfile/SideBar/SideBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState } from 'react';
import { useRouter } from 'next/router';

const images = require.context(
'./../../../../images/UserProfile',
false,
/\.(png|jpe?g|svg)$/
);

const getImage = (name) => {
const image = images(`./${name}`);
console.log(`Image loaded: ${name} -> ${image}`);
Expand All @@ -14,21 +14,16 @@ const getImage = (name) => {

function Avatar({ src, alt }) {
return (
<div className="flex justify-center items-center rounded-full overflow-hidden w-16 h-16">
<img
loading="lazy"
src={src}
alt={alt}
className="w-full h-full object-cover"
/>
<div className="flex justify-center items-center rounded-full overflow-hidden w-10 h-10">
<img loading="lazy" src={src} alt={alt} className="w-10 h-10 object-cover" />
</div>
);
}

function UserInfo({ name, title }) {
return (
<div className="flex flex-col items-center">
<div className="text-sky-300 text-xl font-normal font-['Oswald'] leading-normal tracking-wide">
<div className="text-sky-blue text-md font-normal font-['Oswald'] leading-normal tracking-wide">
{name}
</div>
<div className="text-zinc-100 text-sm font-normal font-['Nunito Sans'] leading-tight">
Expand All @@ -38,109 +33,87 @@ function UserInfo({ name, title }) {
);
}

export function NavItem({ icon, hoverIcon, label, href, isActive, onClick }) {
export function NavItem({ icon, hoverIcon, label, isActive, onClick }) {
const [isHovered, setIsHovered] = useState(false);

return (
<div className="flex w-full">
<a
href={href}
onClick={onClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className={`flex items-center w-full py-2 px-6 rounded-full transition-colors duration-200 ${
className={`flex items-center w-full py-2 px-6 rounded-full transition-colors duration-200 cursor-pointer ${
isActive ? 'text-black bg-white' : 'text-white bg-black'
} ${isHovered ? 'hover:bg-white hover:text-black' : ''}`}
} ${isHovered || isActive ? 'hover:bg-white hover:text-black' : ''}`}
>
<img
loading="lazy"
src={isHovered ? hoverIcon : icon}
alt=""
className="w-5 h-5 mr-3"
/>
<img loading="lazy" src={isHovered || isActive ? icon : hoverIcon} alt="" className="w-5 h-5 mr-3" />
<span>{label}</span>
</a>
</div>
);
}

const Sidebar = ({ isPublic, profilePictureUrl, displayName, title }) => {
const router = useRouter();
const routerPathname = router.pathname;

const Sidebar = ({ isPublic, profilePictureUrl, displayName, title, activeTab, onTabClick }) => {
const navItems = [
{
icon: getImage('overview.png'),
hoverIcon: getImage('naoverview.png'),
label: 'Overview',
href: '/UserProjects',
tab: 'overview',
},
{
icon: getImage('projects.png'),
hoverIcon: getImage('naprojects.png'),
label: 'Projects',
href: '/UserProjects',
tab: 'projects',
},
{
icon: getImage('profiles.png'),
hoverIcon: getImage('naprofiles.png'),
label: 'Profiles',
href: '/UserProfiles',
tab: 'profiles',
},
{
icon: getImage('ideas.png'),
hoverIcon: getImage('naideas.png'),
label: 'Ideas',
href: '/UserIdeas',
tab: 'ideas',
},
{
icon: getImage('opportunities.png'),
hoverIcon: getImage('naopportunities.png'),
label: 'Opportunities',
href: '/UserOpportunities',
tab: 'opportunities',
},
];

if (isPublic) {
return null;
}
if (isPublic) return null;

return (
<div className="flex flex-col gap-5 pt-6 text-white border-r-2 bg-black border-black border-solid shadow-sm bg-zinc-900 max-w-[288px]">
<div className="flex flex-col gap-5 w-full">
<div className="flex gap-3 self-start ml-8">
<Avatar src={profilePictureUrl} alt="Profile avatar" />
<UserInfo name={displayName} title="Software Engineer" />
<UserInfo name={displayName} title={title} />
</div>
<div className="gap-0 mt-5 w-full border border-solid bg-zinc-700 border-zinc-700 min-h-[1px]" />
</div>
<nav className="flex flex-col items-center gap-3 w-full text-base font-light tracking-wider text-white uppercase">
{navItems.map((item, index) => (
{navItems.map(({ icon, hoverIcon, label, tab }) => (
<NavItem
key={index}
icon={item.hoverIcon}
hoverIcon={item.icon}
label={item.label}
href={item.href}
isActive={routerPathname === item.href}
onClick={(e) => {
e.preventDefault();
router.push(item.href);
}}
key={tab}
icon={icon}
hoverIcon={hoverIcon}
label={label}
isActive={activeTab === tab}
onClick={() => onTabClick(tab)}
/>
))}
</nav>
<div className="flex flex-col gap-5 w-full p-6" />
<div className="flex flex-col gap-0 items-center justify-center px-7 py-6 mt-auto w-full text-base font-light tracking-wider text-center uppercase border-t border-solid border-zinc-700 text-zinc-100">
<a
href="/logout"
className="flex gap-2.5 px-6 py-3 shadow-sm rounded-full hover:bg-zinc-800"
>
<img
loading="lazy"
src="/icons/logout.svg"
alt=""
className="w-5 h-5"
/>
<a href="/logout" className="flex gap-2.5 px-6 py-3 shadow-sm rounded-full hover:bg-zinc-800">
<img loading="lazy" src="/icons/logout.svg" alt="" className="w-5 h-5" />
<div>Log out</div>
</a>
</div>
Expand Down
Loading
Loading