Skip to content

Commit

Permalink
updated navigation sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinreber
kevinreber committed Sep 2, 2024
1 parent 5f57e15 commit a4020a8
Showing 1 changed file with 105 additions and 131 deletions.
236 changes: 105 additions & 131 deletions app/components/NavigationSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,6 @@ import React from "react";
import PixelStudioIcon from "components/PixelStudioIcon";
import { Link } from "@remix-run/react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Search,
Layers,
Expand All @@ -19,7 +11,44 @@ import {
LogOut,
CreditCard,
} from "lucide-react";
// import { useLoggedInUser } from "~/hooks";
import {
SignedIn,
SignedOut,
SignInButton,
SignUpButton,
UserButton,
useUser,
} from "@clerk/remix";

const NAV_LINKS = [
{
title: "Explore",
icon: <Search className="md:h-4 md:w-4" />,
href: "/explore",
},
{
title: "Collections",
icon: <Layers className="md:h-4 md:w-4" />,
href: "/collections",
},
{
title: "Create",
icon: <PenTool className="md:h-4 md:w-4" />,
href: "/create",
},
{
title: "Profile",
icon: <User className="md:h-4 md:w-4" />,
// href: `/profile/${userData?.username || ""}`,
href: `/profile/`,
},
// ! TODO: Hide for now, get barebones out first
// {
// title: "Manage",
// icon: <Settings className="md:h-4 md:w-4" />,
// href: "/manage",
// },
];

const NavButton = ({
title,
Expand All @@ -37,58 +66,22 @@ const NavButton = ({
{...props}
>
{icon}
{/* </span> */}
<span className="ml-2">{title}</span>
</a>
);

const NavigationSidebar = () => {
const { user } = useUser();
console.log(user);

const [credits, setCredits] = React.useState(31);
// const userData = React.useContext(UserContext);
// const userData = useLoggedInUser();
// const isLoggedIn = Boolean(userData?.id);
const userData = {
name: "John Doe",
username: "johndoe",
};
const NAV_LINKS = [
{
title: "Explore",
icon: <Search className="md:h-4 md:w-4" />,
href: "/explore",
},
{
title: "Collections",
icon: <Layers className="md:h-4 md:w-4" />,
href: "/collections",
},
{
title: "Create",
icon: <PenTool className="md:h-4 md:w-4" />,
href: "/create",
},
{
title: "Profile",
icon: <User className="md:h-4 md:w-4" />,
// href: `/profile/${userData?.username || ""}`,
href: `/profile/`,
},
// ! TODO: Hide for now, get barebones out first
// {
// title: "Manage",
// icon: <Settings className="md:h-4 md:w-4" />,
// href: "/manage",
// },
];

// const navLinksToRender = isLoggedIn ? NAV_LINKS : [];
const navLinksToRender = NAV_LINKS;

return (
<>
{/* <div className="flex h-screen bg-black text-white"> */}
<aside className="hidden md:flex flex-col w-64 p-4 border-r h-screen fixed top-0 left-0 bottom-0 z-10 text-xl">
{/* <aside className="flex flex-col w-64 bg-[#111] p-4"> */}
<div className="flex items-center mb-8">
<div className="flex align-baseline">
<div className="w-8 mr-3">
Expand All @@ -99,65 +92,54 @@ const NavigationSidebar = () => {
</div>

<nav className="flex-1 space-y-1 font-medium">
{navLinksToRender.map((link) => (
<NavButton
key={link.href}
title={link.title}
icon={link.icon}
link={link.href}
/>
))}
<SignedIn>
{NAV_LINKS.map((link) => (
<NavButton
key={link.href}
title={link.title}
icon={link.icon}
link={link.href}
/>
))}
</SignedIn>
</nav>

<div className="mt-auto pt-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
<Avatar>
<AvatarImage
src="/placeholder.svg?height=32&width=32"
alt="User"
/>
<AvatarFallback>JS</AvatarFallback>
</Avatar>
<div className="text-left flex-1">
<div className="font-medium">Jon Smith</div>
<div className="text-xs text-gray-400">jonsmith</div>
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">Jon Smith</p>
<p className="text-xs leading-none text-muted-foreground">
jonsmith
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<CreditCard className="mr-2 h-4 w-4" />
<span>{credits} Credits</span>
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard className="mr-2 h-4 w-4" />
<span>Buy Credits</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuItem>
<LogOut className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<SignedIn>
<div className="w-full flex flex-col items-start align-baseline px-3 py-2 rounded-md text-gray-300 transition-colors font-medium mb-3">
<div className="flex items-center ">
<CreditCard className="md:h-4 md:w-4" />
<span className="ml-2">{credits} Credits</span>
</div>
<div className="underline text-xs text-gray-400 ml-6">
<a href="/">Buy Credits</a>
</div>
</div>
<div className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-gray-300 ">
<UserButton />
<div className="text-left flex-1">
<div className="font-medium">{user?.fullName}</div>
<div className="text-xs text-gray-400">{user?.username}</div>
</div>
</div>
</SignedIn>
<SignedOut>
<div className="flex flex-col text-center">
<SignInButton>
<button className="rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 border border-gray-500 hover:bg-gray-800 hover:text-gray-200 mb-4">
Sign In
</button>
</SignInButton>
<SignUpButton>
<a href="/sign-up" className="text-sm underline">
Create an account
</a>
</SignUpButton>
</div>
</SignedOut>
</div>
</aside>
{/* </div> */}

<div
className="flex flex-col min-w-0 flex-1 overflow-hidden"
style={{
Expand All @@ -180,44 +162,36 @@ const NavigationSidebar = () => {
</Link>
</div>

{/* <div className="w-3"> */}
{/* <div className="w-8">
<PixelStudioIcon />
</div> */}
{/* </div> */}
{/* {isLoggedIn && ( */}
<div className="flex items-center">
{/* <UserAvatar /> */}
<Avatar>
<AvatarImage
src="/placeholder.svg?height=32&width=32"
alt="User"
/>
<AvatarFallback>JS</AvatarFallback>
</Avatar>
</div>
{/* )} */}
<SignedIn>
<UserButton />
</SignedIn>
</div>

{/* {isLoggedIn && ( */}
<div
className="fixed bottom-0 left-0 right-0 z-10 flex items-center justify-around bg-black py-4"
style={{
borderTop: "rgb(38, 38, 38) 1px solid",
}}
>
{navLinksToRender.map((link) => (
<Link
key={link.href}
className="text-white group flex items-center px-2 py-2 text-medium font-medium rounded-md"
// className="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"
to={link.href}
>
<span>{link.icon}</span>
</Link>
))}
<SignedIn>
{NAV_LINKS.map((link) => (
<Link
key={link.href}
className="text-white group flex items-center px-2 py-2 text-medium font-medium rounded-md"
to={link.href}
>
<span>{link.icon}</span>
</Link>
))}
</SignedIn>
<SignedOut>
<SignInButton>
<button className="mx-6 w-full rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 border border-gray-500 hover:bg-gray-800 hover:text-gray-200">
Sign In
</button>
</SignInButton>
</SignedOut>
</div>
{/* )} */}
</div>
</div>
</>
Expand Down

0 comments on commit a4020a8

Please sign in to comment.