fix: display overlap on small screen
This commit is contained in:
DIYgod
parent
338ca81e9e
commit
386e05495a
|
|
@ -172,77 +172,78 @@ export function DashboardLayout({
|
|||
<DashboardSidebar>
|
||||
{(isOpen) => (
|
||||
<>
|
||||
<div className="mb-2 px-5 pt-3 pb-2 text-2xl font-extrabold flex items-center">
|
||||
<div className="inline-block w-9 h-9 mr-3">
|
||||
<Logo
|
||||
type="lottie"
|
||||
width={36}
|
||||
height={36}
|
||||
autoplay={false}
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
<div className="mb-2 px-5 pt-3 pb-2 text-2xl font-extrabold flex items-center">
|
||||
<div className="inline-block w-9 h-9 mr-3">
|
||||
<Logo
|
||||
type="lottie"
|
||||
width={36}
|
||||
height={36}
|
||||
autoplay={false}
|
||||
/>
|
||||
</div>
|
||||
{isOpen && "xLog"}
|
||||
</div>
|
||||
{userSite.data?.[0]?.username &&
|
||||
subdomain &&
|
||||
userSite.data[0].username !== subdomain && (
|
||||
<div className="mb-2 px-5 pt-3 pb-2 bg-orange-50 text-center">
|
||||
<div className="mb-2">
|
||||
{isOpen && "You are operating"}
|
||||
</div>
|
||||
<Avatar
|
||||
images={site.data?.avatars || []}
|
||||
size={isOpen ? 60 : 40}
|
||||
name={site.data?.name}
|
||||
/>
|
||||
{isOpen && (
|
||||
<span className="flex flex-col justify-center">
|
||||
<span className="block">{site.data?.name}</span>
|
||||
<span className="block text-sm text-zinc-400">
|
||||
@{site.data?.username}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-2 px-2 pt-3 pb-2">
|
||||
<ConnectButton
|
||||
left={true}
|
||||
size="base"
|
||||
hideNotification={true}
|
||||
hideName={!isOpen}
|
||||
/>
|
||||
</div>
|
||||
{isOpen && "xLog"}
|
||||
</div>
|
||||
{userSite.data?.[0]?.username &&
|
||||
subdomain &&
|
||||
userSite.data[0].username !== subdomain && (
|
||||
<div className="mb-2 px-5 pt-3 pb-2 bg-orange-50 text-center">
|
||||
<div className="mb-2">
|
||||
{isOpen && "You are operating"}
|
||||
</div>
|
||||
<Avatar
|
||||
images={site.data?.avatars || []}
|
||||
size={isOpen ? 60 : 40}
|
||||
name={site.data?.name}
|
||||
/>
|
||||
{isOpen && (
|
||||
<span className="flex flex-col justify-center">
|
||||
<span className="block">{site.data?.name}</span>
|
||||
<span className="block text-sm text-zinc-400">
|
||||
@{site.data?.username}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-2 px-2 pt-3 pb-2">
|
||||
<ConnectButton
|
||||
left={true}
|
||||
size="base"
|
||||
hideNotification={true}
|
||||
hideName={!isOpen}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="px-3 space-y-[2px] text-zinc-500">
|
||||
{links.map((link) => {
|
||||
const active =
|
||||
link.href &&
|
||||
link.isActive({
|
||||
pathname: router.asPath,
|
||||
href: link.href,
|
||||
})
|
||||
return (
|
||||
<UniLink
|
||||
href={link.href}
|
||||
key={link.text}
|
||||
className={cn(
|
||||
`flex px-4 h-12 items-center rounded-md space-x-2 w-full transition-colors`,
|
||||
active
|
||||
? `bg-slate-200 font-medium text-accent`
|
||||
: `hover:bg-slate-200 hover:bg-opacity-50`,
|
||||
!isOpen && "justify-center",
|
||||
)}
|
||||
onClick={link.onClick}
|
||||
>
|
||||
<span className={cn(link.icon, "text-xl")}></span>
|
||||
{isOpen && <span>{t(link.text)}</span>}
|
||||
</UniLink>
|
||||
)
|
||||
})}
|
||||
<div className="px-3 space-y-[2px] text-zinc-500 flex-1 min-h-0 overflow-y-auto">
|
||||
{links.map((link) => {
|
||||
const active =
|
||||
link.href &&
|
||||
link.isActive({
|
||||
pathname: router.asPath,
|
||||
href: link.href,
|
||||
})
|
||||
return (
|
||||
<UniLink
|
||||
href={link.href}
|
||||
key={link.text}
|
||||
className={cn(
|
||||
`flex px-4 h-12 items-center rounded-md space-x-2 w-full transition-colors`,
|
||||
active
|
||||
? `bg-slate-200 font-medium text-accent`
|
||||
: `hover:bg-slate-200 hover:bg-opacity-50`,
|
||||
!isOpen && "justify-center",
|
||||
)}
|
||||
onClick={link.onClick}
|
||||
>
|
||||
<span className={cn(link.icon, "text-xl")}></span>
|
||||
{isOpen && <span>{t(link.text)}</span>}
|
||||
</UniLink>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-5 left-0 right-0 flex items-center px-4 flex-col">
|
||||
<div className="flex items-center px-4 flex-col pb-4">
|
||||
<UniLink
|
||||
href={DISCORD_LINK}
|
||||
className="space-x-1 text-zinc-500 hover:text-zinc-800 flex w-full h-12 items-center justify-center transition-colors mb-2"
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const DashboardSidebar: React.FC<{
|
|||
<div
|
||||
className={`${
|
||||
isOpen ? `w-sidebar` : "w-20"
|
||||
} relative bg-slate-50 z-10 h-full transition-all`}
|
||||
} relative bg-slate-50 z-10 h-full transition-all flex flex-col`}
|
||||
>
|
||||
{children(isOpen)}
|
||||
<div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ function Home() {
|
|||
return (
|
||||
<div className="max-w-screen-lg px-5 mx-auto">
|
||||
<div className="h-screen w-full flex justify-center flex-col relative text-center">
|
||||
<h2 className="text-7xl sm:text-8xl font-bold mb-5">
|
||||
<h2 className="text-6xl sm:text-8xl font-bold mb-5">
|
||||
{features.map((feature) => (
|
||||
<span
|
||||
key={feature.title}
|
||||
|
|
@ -262,7 +262,7 @@ function Home() {
|
|||
</span>
|
||||
))}
|
||||
</h2>
|
||||
<h3 className="mt-5 text-zinc-800 text-2xl sm:text-4xl font-light">
|
||||
<h3 className="mt-3 sm:mt-5 text-zinc-800 text-2xl sm:text-4xl font-light">
|
||||
<Trans i18nKey="description" ns="index">
|
||||
<strong className="font-medium">xLog</strong> is the best{" "}
|
||||
<UniLink
|
||||
|
|
@ -281,7 +281,7 @@ function Home() {
|
|||
blogging community for everyone.
|
||||
</Trans>
|
||||
</h3>
|
||||
<div className="my-6 sm:my-12 flex items-center justify-center sm:flex-row flex-col">
|
||||
<div className="my-4 sm:my-12 flex items-center justify-center sm:flex-row flex-col">
|
||||
<Button
|
||||
className="text-accent h-10 mt-4 flex items-center"
|
||||
onClick={tryNow}
|
||||
|
|
@ -318,8 +318,8 @@ function Home() {
|
|||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-center absolute bottom-14 w-full flex items-center justify-center flex-col">
|
||||
<span className="mb-3">{t("Explore the xLog way")}</span>
|
||||
<div className="text-center absolute bottom-4 sm:bottom-14 w-full flex items-center justify-center flex-col">
|
||||
<span className="mb-1 sm:mb-3">{t("Explore the xLog way")}</span>
|
||||
<Link
|
||||
to="Features"
|
||||
spy={true}
|
||||
|
|
|
|||
Loading…
Reference in New Issue