narrow navbar in deck view

packages/app/src/Pages/DeckLayout.tsx

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

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() {
     <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">

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