Kieran/snort
5
14
Fork 14
Code Issues 36 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

layout

Browse Source
This commit is contained in:
Martti Malmi 2023-11-21 17:41:37 +02:00
parent 8e5acc3ea5
commit c5d22b84be
3 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/src/Element/Event/NoteCreatorButton.tsx
View File

@ -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",

26
packages/app/src/Pages/Layout/NavSidebar.tsx
View File

@ -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>
); );

4
packages/app/src/Pages/Layout/index.tsx
View File

@ -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 />