diff --git a/packages/app/src/Pages/DeckLayout.tsx b/packages/app/src/Pages/DeckLayout.tsx
index 82b9625c..a87c658f 100644
--- a/packages/app/src/Pages/DeckLayout.tsx
+++ b/packages/app/src/Pages/DeckLayout.tsx
@@ -67,7 +67,7 @@ export function SnortDeckLayout() {
setArticle: (e?: TaggedNostrEvent) => setDeckState({ article: e }),
reset: () => setDeckState({}),
}}>
-
+
{cols.map(c => {
switch (c) {
diff --git a/packages/app/src/Pages/Layout/LogoHeader.tsx b/packages/app/src/Pages/Layout/LogoHeader.tsx
index 4641afaf..0779353c 100644
--- a/packages/app/src/Pages/Layout/LogoHeader.tsx
+++ b/packages/app/src/Pages/Layout/LogoHeader.tsx
@@ -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() {
-
+ {showText &&
{extra()}
{CONFIG.appName}
-
+
}
{currentSubscription && (
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index f3c2c708..0b8fbfa3 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -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 (
-
-
+
+
-
+
{MENU_ITEMS.map(item => {
if (!item.nonLoggedIn && !publicKey) {
return "";
}
return (
-
getNavLinkClass(isActive)}>
+ getNavLinkClass(isActive, narrow)}>
- {item.label}
+ {!narrow && {item.label}}
);
})}
{publicKey ? (
-
+
) : (
)}
@@ -95,7 +99,7 @@ export default function NavSidebar() {
-
{profile?.name}
+ {!narrow &&
{profile?.name}}
>