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>
<NotificationProvider>
<div className="flex justify-around w-full">
<div className="sticky top-0 w-full flex justify-end self-start h-[var(--vh)]">
<div className="flex xl:justify-around w-full">
<div className="sticky top-0 xl:w-full flex justify-end self-start h-[var(--vh)]">
<Sidebar />
</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.map((item, index) => (
<div
key={item.index}
className="flex flex-col w-full"
style={{
display: index === secondaryStack.length - 1 ? 'block' : 'none'
}}
@@ -381,7 +380,6 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
{primaryPages.map(({ name, element, props }) => (
<div
key={name}
className="flex flex-col w-full"
style={{
display:
secondaryStack.length === 0 && currentPrimaryPage === name
@@ -393,7 +391,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
</div>
))}
</div>
<div className="w-full" />
<div className="hidden xl:w-full xl:block" />
</div>
<TooManyRelaysAlertDialog />
<CreateWalletGuideToast />

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

@@ -19,7 +19,7 @@ import SettingsButton from './SettingsButton'
export default function PrimaryPageSidebar() {
const { isSmallScreen } = useScreenSize()
const { themeSetting } = useTheme()
const { sidebarCollapse, updateSidebarCollapse, enableSingleColumnLayout } = useUserPreferences()
const { sidebarCollapse, updateSidebarCollapse } = useUserPreferences()
const { pubkey } = useNostr()
if (isSmallScreen) return null
@@ -28,11 +28,11 @@ export default function PrimaryPageSidebar() {
<div
className={cn(
'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">
{sidebarCollapse && !enableSingleColumnLayout ? (
{sidebarCollapse ? (
<div className="px-3 py-1 mb-6 w-full">
<Icon />
</div>
@@ -41,30 +41,28 @@ export default function PrimaryPageSidebar() {
<Logo />
</div>
)}
<HomeButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
<RelaysButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
<NotificationsButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
<SearchButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
<ProfileButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
{pubkey && <BookmarkButton collapse={sidebarCollapse && !enableSingleColumnLayout} />}
<SettingsButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
<PostButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
<HomeButton collapse={sidebarCollapse} />
<RelaysButton collapse={sidebarCollapse} />
<NotificationsButton collapse={sidebarCollapse} />
<SearchButton collapse={sidebarCollapse} />
<ProfileButton collapse={sidebarCollapse} />
{pubkey && <BookmarkButton collapse={sidebarCollapse} />}
<SettingsButton collapse={sidebarCollapse} />
<PostButton collapse={sidebarCollapse} />
</div>
<AccountButton collapse={sidebarCollapse && !enableSingleColumnLayout} />
{!enableSingleColumnLayout && (
<button
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',
themeSetting === 'pure-black' ? 'top-3' : 'top-5'
)}
onClick={(e) => {
e.stopPropagation()
updateSidebarCollapse(!sidebarCollapse)
}}
>
{sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
</button>
)}
<AccountButton collapse={sidebarCollapse} />
<button
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',
themeSetting === 'pure-black' ? 'top-3' : 'top-5'
)}
onClick={(e) => {
e.stopPropagation()
updateSidebarCollapse(!sidebarCollapse)
}}
>
{sidebarCollapse ? <ChevronsRight /> : <ChevronsLeft />}
</button>
</div>
)
}