hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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>
)
}