forked from Kieran/snort
sidebar items for non-logged-in user
This commit is contained in:
parent
9aafc329cb
commit
cb5fd78382
@ -1,17 +1,19 @@
|
||||
import { LogoHeader } from "./LogoHeader";
|
||||
import { Link } from "react-router-dom";
|
||||
import {Link, useNavigate} from "react-router-dom";
|
||||
import Icon from "@/Icons/Icon";
|
||||
import {ProfileLink} from "../../Element/User/ProfileLink";
|
||||
import Avatar from "../../Element/User/Avatar";
|
||||
import useLogin from "../../Hooks/useLogin";
|
||||
import {useUserProfile} from "@snort/system-react";
|
||||
import {NoteCreatorButton} from "../../Element/Event/NoteCreatorButton";
|
||||
import {FormattedMessage} from "react-intl";
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{
|
||||
label: "Home",
|
||||
icon: "home",
|
||||
link: "/",
|
||||
nonLoggedIn: true,
|
||||
},
|
||||
{
|
||||
label: "Messages",
|
||||
@ -38,25 +40,42 @@ export default function NavSidebar() {
|
||||
readonly: s.readonly,
|
||||
}));
|
||||
const profile = useUserProfile(publicKey);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="sticky items-center xl:items-start border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex xl:w-56 flex-col px-2 py-4 flex-shrink-0 gap-4">
|
||||
<LogoHeader />
|
||||
<div className="flex-grow flex flex-col justify-between">
|
||||
<div className="flex flex-col items-center xl:items-start font-bold text-lg">
|
||||
{MENU_ITEMS.map(item => (
|
||||
<NavLink
|
||||
key={item.link}
|
||||
to={item.link}
|
||||
className="py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center"
|
||||
activeClassName="bg-neutral-800 text-neutral-200">
|
||||
<Icon name={item.icon} size={24} />
|
||||
<span className="hidden xl:inline ml-2">{item.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
<div className="mt-2">
|
||||
<NoteCreatorButton alwaysShow={true} />
|
||||
</div>
|
||||
{MENU_ITEMS.map(item => {
|
||||
if (!item.nonLoggedIn && !publicKey) {
|
||||
return '';
|
||||
}
|
||||
return (
|
||||
<NavLink
|
||||
key={item.link}
|
||||
to={item.link}
|
||||
className="py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center"
|
||||
activeClassName="bg-neutral-800 text-neutral-200">
|
||||
<Icon name={item.icon} size={24} />
|
||||
<span className="hidden xl:inline ml-2">{item.label}</span>
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
{publicKey ? (
|
||||
<div className="mt-2">
|
||||
<NoteCreatorButton alwaysShow={true} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2">
|
||||
<button onClick={() => navigate("/login/sign-up")} className="flex flex-row items-center primary">
|
||||
<Icon name="sign-in" size={24} />
|
||||
<span className="hidden xl:inline ml-2">
|
||||
<FormattedMessage defaultMessage="Sign up" id="8HJxXG" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{publicKey ? (
|
||||
|
@ -392,5 +392,8 @@
|
||||
<symbol id="home" fill="currentColor" viewBox="0 0 495.398 495.398">
|
||||
<g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <g> <g> <g> <path d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z"></path> <path d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z"></path> </g> </g> </g> </g>
|
||||
</symbol>
|
||||
<symbol id="sign-in" viewBox="0 0 24 24" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C6.44772 3 6 3.44772 6 4C6 4.55228 6.44772 5 7 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H7C6.44772 19 6 19.4477 6 20C6 20.5523 6.44772 21 7 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H7ZM12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289C10.9024 7.68342 10.9024 8.31658 11.2929 8.70711L13.5858 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H13.5858L11.2929 15.2929C10.9024 15.6834 10.9024 16.3166 11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L16.7071 12.7071C17.0976 12.3166 17.0976 11.6834 16.7071 11.2929L12.7071 7.29289Z" fill="currentColor"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
Loading…
Reference in New Issue
Block a user