narrow navbar in deck view
This commit is contained in:
parent
4eb0408c27
commit
6a6accfed6
@ -67,7 +67,7 @@ export function SnortDeckLayout() {
|
||||
setArticle: (e?: TaggedNostrEvent) => setDeckState({ article: e }),
|
||||
reset: () => setDeckState({}),
|
||||
}}>
|
||||
<NavSidebar />
|
||||
<NavSidebar narrow={true} />
|
||||
<div className="deck-cols">
|
||||
{cols.map(c => {
|
||||
switch (c) {
|
||||
|
@ -3,7 +3,7 @@ import { getCurrentSubscription } from "../../Subscription";
|
||||
import { isChristmas, isHalloween, isStPatricksDay } from "../../SnortUtils";
|
||||
import { Link } from "react-router-dom";
|
||||
import { mapPlanName } from "../subscribe";
|
||||
export function LogoHeader() {
|
||||
export function LogoHeader({ showText = false }) {
|
||||
const { subscriptions } = useLogin();
|
||||
const currentSubscription = getCurrentSubscription(subscriptions);
|
||||
|
||||
@ -21,10 +21,10 @@ export function LogoHeader() {
|
||||
<Link to="/" className="logo" onClick={handleLogoClick}>
|
||||
<h1 className="flex flex-row items-center">
|
||||
<img src={CONFIG.navLogo} className="w-8 h-8" />
|
||||
<div className="md:hidden xl:inline ml-2">
|
||||
{showText && <div className="md:hidden xl:inline ml-2">
|
||||
{extra()}
|
||||
{CONFIG.appName}
|
||||
</div>
|
||||
</div>}
|
||||
</h1>
|
||||
{currentSubscription && (
|
||||
<div className="flex items-center g4 text-sm font-semibold tracking-wider">
|
||||
|
@ -7,6 +7,7 @@ import useLogin from "../../Hooks/useLogin";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { NoteCreatorButton } from "../../Element/Event/NoteCreatorButton";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import classNames from "classnames";
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{
|
||||
@ -42,13 +43,14 @@ const MENU_ITEMS = [
|
||||
},
|
||||
];
|
||||
|
||||
const getNavLinkClass = (isActive: boolean) => {
|
||||
return isActive
|
||||
? "xl:ml-1 py-4 hover:no-underline flex flex-row items-center text-nostr-purple"
|
||||
: "xl:ml-1 py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
|
||||
const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
||||
const c = isActive
|
||||
? "py-4 hover:no-underline flex flex-row items-center text-nostr-purple"
|
||||
: "py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
|
||||
return classNames(c, { "xl:ml-1": !narrow })
|
||||
};
|
||||
|
||||
export default function NavSidebar() {
|
||||
export default function NavSidebar({ narrow = false }) {
|
||||
const { publicKey } = useLogin(s => ({
|
||||
publicKey: s.publicKey,
|
||||
latestNotification: s.latestNotification,
|
||||
@ -58,33 +60,35 @@ export default function NavSidebar() {
|
||||
const profile = useUserProfile(publicKey);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const className = classNames({"xl:w-56 xl:gap-3 xl:items-start": !narrow}, "sticky items-center border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2")
|
||||
|
||||
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-2 xl:gap-3">
|
||||
<LogoHeader />
|
||||
<div className={className}>
|
||||
<LogoHeader showText={!narrow} />
|
||||
<div className="flex-grow flex flex-col justify-between">
|
||||
<div className="flex flex-col items-center xl:items-start font-bold text-lg">
|
||||
<div className={classNames({"xl:items-start": !narrow }, "flex flex-col items-center font-bold text-lg")}>
|
||||
{MENU_ITEMS.map(item => {
|
||||
if (!item.nonLoggedIn && !publicKey) {
|
||||
return "";
|
||||
}
|
||||
return (
|
||||
<NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive)}>
|
||||
<NavLink key={item.link} to={item.link} className={({ isActive }) => getNavLinkClass(isActive, narrow)}>
|
||||
<Icon name={item.icon} size={24} />
|
||||
<span className="hidden xl:inline ml-3">{item.label}</span>
|
||||
{!narrow && <span className="hidden xl:inline ml-3">{item.label}</span>}
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
{publicKey ? (
|
||||
<div className="mt-2">
|
||||
<NoteCreatorButton alwaysShow={true} showText={true} />
|
||||
<NoteCreatorButton alwaysShow={true} showText={!narrow} />
|
||||
</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-3">
|
||||
<FormattedMessage defaultMessage="Sign up" id="8HJxXG" />
|
||||
</span>
|
||||
{!narrow && <span className="hidden xl:inline ml-3">
|
||||
<FormattedMessage defaultMessage="Sign up" id="8HJxXG"/>
|
||||
</span>}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@ -95,7 +99,7 @@ export default function NavSidebar() {
|
||||
<ProfileLink pubkey={publicKey} user={profile}>
|
||||
<div className="flex flex-row items-center font-bold text-md">
|
||||
<Avatar pubkey={publicKey} user={profile} size={40} />
|
||||
<span className="hidden xl:inline ml-3">{profile?.name}</span>
|
||||
{!narrow && <span className="hidden xl:inline ml-3">{profile?.name}</span>}
|
||||
</div>
|
||||
</ProfileLink>
|
||||
</>
|
||||
|
Loading…
Reference in New Issue
Block a user