3-column layout #699
@ -10,7 +10,7 @@ import Icon from "@/Icons/Icon";
|
|||||||
import { useNoteCreator } from "@/State/NoteCreator";
|
import { useNoteCreator } from "@/State/NoteCreator";
|
||||||
import { NoteCreator } from "./NoteCreator";
|
import { NoteCreator } from "./NoteCreator";
|
||||||
|
|
||||||
export const NoteCreatorButton = ({ className }: { className?: string }) => {
|
export const NoteCreatorButton = ({ className, alwaysShow }: { className?: string, alwaysShow?: boolean }) => {
|
||||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { readonly } = useLogin(s => ({ readonly: s.readonly }));
|
const { readonly } = useLogin(s => ({ readonly: s.readonly }));
|
||||||
@ -27,6 +27,9 @@ export const NoteCreatorButton = ({ className }: { className?: string }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const shouldHideNoteCreator = useMemo(() => {
|
const shouldHideNoteCreator = useMemo(() => {
|
||||||
|
if (alwaysShow) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
const isReply = replyTo && show;
|
const isReply = replyTo && show;
|
||||||
const hideOn = [
|
const hideOn = [
|
||||||
"/settings",
|
"/settings",
|
||||||
|
@ -5,10 +5,11 @@ import {ProfileLink} from "../../Element/User/ProfileLink";
|
|||||||
import Avatar from "../../Element/User/Avatar";
|
import Avatar from "../../Element/User/Avatar";
|
||||||
import useLogin from "../../Hooks/useLogin";
|
import useLogin from "../../Hooks/useLogin";
|
||||||
import {useUserProfile} from "@snort/system-react";
|
import {useUserProfile} from "@snort/system-react";
|
||||||
|
import {NoteCreatorButton} from "../../Element/Event/NoteCreatorButton";
|
||||||
|
|
||||||
const MENU_ITEMS = [
|
const MENU_ITEMS = [
|
||||||
{
|
{
|
||||||
label: "Notes",
|
label: "Home",
|
||||||
icon: "notes",
|
icon: "notes",
|
||||||
link: "/",
|
link: "/",
|
||||||
},
|
},
|
||||||
@ -39,29 +40,34 @@ export default function NavSidebar() {
|
|||||||
const profile = useUserProfile(publicKey);
|
const profile = useUserProfile(publicKey);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sticky 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-2">
|
<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 />
|
<LogoHeader />
|
||||||
<div className="flex-grow flex flex-col justify-between">
|
<div className="flex-grow flex flex-col justify-between">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col items-center xl:items-start font-bold text-lg">
|
||||||
{MENU_ITEMS.map(item => (
|
{MENU_ITEMS.map(item => (
|
||||||
<NavLink
|
<NavLink
|
||||||
key={item.link}
|
key={item.link}
|
||||||
to={item.link}
|
to={item.link}
|
||||||
className="settings-row hover:no-underline"
|
className="py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center"
|
||||||
activeClassName="bg-neutral-800 text-neutral-200">
|
activeClassName="bg-neutral-800 text-neutral-200">
|
||||||
<Icon name={item.icon} size={24} />
|
<Icon name={item.icon} size={24} />
|
||||||
<span className="hidden xl:inline ml-2">{item.label}</span>
|
<span className="hidden xl:inline ml-2">{item.label}</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
))}
|
))}
|
||||||
|
<div className="mt-2">
|
||||||
|
<NoteCreatorButton alwaysShow={true} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{publicKey ? (
|
{publicKey ? (
|
||||||
<ProfileLink pubkey={publicKey} user={profile}>
|
<>
|
||||||
<div className="flex flex-row items-center">
|
<ProfileLink pubkey={publicKey} user={profile}>
|
||||||
<Avatar pubkey={publicKey} user={profile} size={40} />
|
<div className="flex flex-row items-center font-bold text-md">
|
||||||
<span className="hidden xl:inline ml-2">{profile?.name}</span>
|
<Avatar pubkey={publicKey} user={profile} size={40} />
|
||||||
</div>
|
<span className="hidden xl:inline ml-2">{profile?.name}</span>
|
||||||
</ProfileLink>
|
</div>
|
||||||
|
</ProfileLink>
|
||||||
|
</>
|
||||||
) : ''}
|
) : ''}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -61,7 +61,9 @@ export default function Index() {
|
|||||||
<MainContent shouldHideHeader={shouldHideHeader} />
|
<MainContent shouldHideHeader={shouldHideHeader} />
|
||||||
<RightColumn className="w-1/4 flex-shrink-0" />
|
<RightColumn className="w-1/4 flex-shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
<NoteCreatorButton className="note-create-button" />
|
<div className="md:hidden">
|
||||||
|
<NoteCreatorButton className="note-create-button" />
|
||||||
|
</div>
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</div>
|
</div>
|
||||||
<LoginUnlock />
|
<LoginUnlock />
|
||||||
|
Loading…
Reference in New Issue
Block a user