mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve single-column layout

Browse Source
This commit is contained in:
codytseng
2025-10-19 21:42:01 +08:00
parent 80a2f38272
commit 325d3ca5c3
2 changed files with 28 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/PageManager.tsx
View File

@@ -361,16 +361,15 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
> >
<CurrentRelaysProvider> <CurrentRelaysProvider>
<NotificationProvider> <NotificationProvider>
<div className="flex justify-around w-full"> <div className="flex xl:justify-around w-full">
<div className="sticky top-0 w-full flex justify-end self-start h-[var(--vh)]"> <div className="sticky top-0 xl:w-full flex justify-end self-start h-[var(--vh)]">
<Sidebar /> <Sidebar />
</div> </div>
<div className="w-[45vw] min-w-96 max-w-4xl bg-background border-x shrink-0"> <div className="flex-1 w-0 bg-background border-x xl:w-[900px] xl:shrink-0">
{!!secondaryStack.length && {!!secondaryStack.length &&
secondaryStack.map((item, index) => ( secondaryStack.map((item, index) => (
<div <div
key={item.index} key={item.index}
className="flex flex-col w-full"
style={{ style={{
display: index === secondaryStack.length - 1 ? 'block' : 'none' display: index === secondaryStack.length - 1 ? 'block' : 'none'
}} }}
@@ -381,7 +380,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
{primaryPages.map(({ name, element, props }) => ( {primaryPages.map(({ name, element, props }) => (
<div <div
key={name} key={name}
className="flex flex-col w-full"
style={{ style={{
display: display:
secondaryStack.length === 0 && currentPrimaryPage === name secondaryStack.length === 0 && currentPrimaryPage === name
@@ -393,7 +391,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
</div> </div>
))} ))}
</div> </div>
<div className="w-full" /> <div className="hidden xl:w-full xl:block" />
</div> </div>
<TooManyRelaysAlertDialog /> <TooManyRelaysAlertDialog />
<CreateWalletGuideToast /> <CreateWalletGuideToast />

50
src/components/Sidebar/index.tsx
View File

@@ -19,7 +19,7 @@ import SettingsButton from './SettingsButton'
export default function PrimaryPageSidebar() { export default function PrimaryPageSidebar() {
const { isSmallScreen } = useScreenSize() const { isSmallScreen } = useScreenSize()
const { themeSetting } = useTheme() const { themeSetting } = useTheme()
const { sidebarCollapse, updateSidebarCollapse, enableSingleColumnLayout } = useUserPreferences() const { sidebarCollapse, updateSidebarCollapse } = useUserPreferences()
const { pubkey } = useNostr() const { pubkey } = useNostr()
if (isSmallScreen) return null if (isSmallScreen) return null
@@ -28,11 +28,11 @@ export default function PrimaryPageSidebar() {
<div <div
className={cn( className={cn(
'relative flex flex-col pb-2 pt-3 justify-between h-full shrink-0', 'relative flex flex-col pb-2 pt-3 justify-between h-full shrink-0',
sidebarCollapse && !enableSingleColumnLayout ? 'px-2 w-16' : 'px-4 w-52' sidebarCollapse ? 'px-2 w-16' : 'px-4 w-52'
)} )}
> >
<div className="space-y-2"> <div className="space-y-2">
{sidebarCollapse && !enableSingleColumnLayout ? ( {sidebarCollapse ? (
<div className="px-3 py-1 mb-6 w-full"> <div className="px-3 py-1 mb-6 w-full">
<Icon /> <Icon />
</div> </div>
@@ -41,30 +41,28 @@ export default function PrimaryPageSidebar() {
<Logo /> <Logo />
</div> </div>
)} )}
<HomeButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <HomeButton collapse={sidebarCollapse} />
<RelaysButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <RelaysButton collapse={sidebarCollapse} />
<NotificationsButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <NotificationsButton collapse={sidebarCollapse} />
<SearchButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <SearchButton collapse={sidebarCollapse} />
<ProfileButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <ProfileButton collapse={sidebarCollapse} />
{pubkey && <BookmarkButton collapse={sidebarCollapse && !enableSingleColumnLayout} />} {pubkey && <BookmarkButton collapse={sidebarCollapse} />}
<SettingsButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <SettingsButton collapse={sidebarCollapse} />
<PostButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <PostButton collapse={sidebarCollapse} />
</div> </div>
<AccountButton collapse={sidebarCollapse && !enableSingleColumnLayout} /> <AccountButton collapse={sidebarCollapse} />
{!enableSingleColumnLayout && ( <button
<button className={cn(
className={cn( 'absolute flex flex-col justify-center items-center right-0 w-5 h-6 p-0 rounded-l-md hover:shadow-md text-muted-foreground hover:text-foreground hover:bg-background transition-colors [&_svg]:size-4',
'absolute flex flex-col justify-center items-center right-0 w-5 h-6 p-0 rounded-l-md hover:shadow-md text-muted-foreground hover:text-foreground hover:bg-background transition-colors [&_svg]:size-4', themeSetting === 'pure-black' ? 'top-3' : 'top-5'
themeSetting === 'pure-black' ? 'top-3' : 'top-5' )}
)} onClick={(e) => {
onClick={(e) => { e.stopPropagation()
e.stopPropagation() updateSidebarCollapse(!sidebarCollapse)
updateSidebarCollapse(!sidebarCollapse) }}
}} >
> {sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
{sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />} </button>
</button>
)}
</div> </div>
) )
} }