Skip to content

Commit

Permalink
layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@RedBeardEth
RedBeardEth committed Oct 16, 2024
1 parent 3f9c2d7 commit 7f5f6c4
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 85 deletions.
2 changes: 1 addition & 1 deletion apps/nextjs/src/app/(app)/account/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function RootLayout({
<AppSidebar />
<SidebarTrigger
className={cn(
"fixed z-30 ml-3 mt-5 h-8 w-8 border sm:top-1.5 sm:z-50",
"fixed top-24 z-30 ml-3 h-8 w-8 border sm:left-[98px] sm:top-5 sm:z-50",
)}
/>
<div className="flex flex-1 flex-col transition-all duration-300 ease-in-out">
Expand Down
9 changes: 6 additions & 3 deletions apps/nextjs/src/app/(app)/collection/[id]/(list)/RealmResources.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@realms-world/ui/components/ui/tooltip"; // Assuming you're using a tooltip library
import { Button } from "@realms-world/ui/components/ui/button";

export default function RealmResources({
traits,
Expand All @@ -32,12 +33,14 @@ export default function RealmResources({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<button
<Button
variant={"outline"}
size={"xs"}
className="px-2 pt-1"
//onClick={() => setShowMore(!showMore)}
className="text-sm underline"
>
{`+(${hiddenCount})`}
</button>
</Button>
</TooltipTrigger>

<TooltipContent
Expand Down
7 changes: 6 additions & 1 deletion apps/nextjs/src/app/_components/SideMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import LordsIcon from "@/icons/lords.svg";
import RWLogo from "@/icons/rw-logo.svg";
import SideHeaderImg from "@/icons/side-header.svg";
import { Github, Newspaper, Twitter, User } from "lucide-react";
import { cn } from "@realms-world/utils";

import { Button } from "@realms-world/ui/components/ui/button";
import { ScrollArea } from "@realms-world/ui/components/ui/scroll-area";
Expand Down Expand Up @@ -96,7 +97,11 @@ const Sidebar = () => {
onClick={toggleSidebar}
>
<Crown className="absolute w-14 group-hover:opacity-0" />
<RWLogo className="absolute w-[152px] fill-white opacity-0 transition-all duration-500 group-hover:opacity-100" />
<RWLogo
className={cn(
"invisible absolute w-[152px] fill-white opacity-0 transition-all duration-500 group-hover:visible group-hover:opacity-100",
)}
/>
</Link>
<div className="h-full pt-[calc(var(--site-header-height)_-_3px)]">
<div className="z-50 h-full w-full border-t-[3px] pb-3">
Expand Down
171 changes: 91 additions & 80 deletions apps/ui/src/components/ui/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,47 @@
'use client'
import * as React from "react"
import { PanelLeft } from "lucide-react"
"use client";
import * as React from "react";
import { PanelLeft, PanelLeftClose, PanelLeftOpen } from "lucide-react";

import { useIsMobile } from "../../hooks/use-mobile"
import { cn } from "@realms-world/utils"
import { Button } from "./button"
import { Sheet, SheetContent } from "./sheet"
import { ScrollArea } from "./scroll-area"
import { useIsMobile } from "../../hooks/use-mobile";
import { cn } from "@realms-world/utils";
import { Button } from "./button";
import { Sheet, SheetContent } from "./sheet";
import { ScrollArea } from "./scroll-area";

export const SIDEBAR_STATE_COOKIE = "sidebar:state"
export const SIDEBAR_STATE_COOKIE = "sidebar:state";

interface SidebarContext {
state: "open" | "closed"
open: boolean
onOpenChange: (open: boolean) => void
state: "open" | "closed";
open: boolean;
onOpenChange: (open: boolean) => void;
}

const SidebarContext = React.createContext<SidebarContext>({
state: "open",
open: true,
onOpenChange: () => { },
})
onOpenChange: () => {},
});

function useSidebar() {
return React.useContext(SidebarContext)
return React.useContext(SidebarContext);
}

const SidebarLayout = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
defaultOpen?: boolean
defaultOpen?: boolean;
}
>(({ defaultOpen, className, ...props }, ref) => {
const [open, setOpen] = React.useState(defaultOpen ?? true)
const [open, setOpen] = React.useState(defaultOpen ?? true);

const onOpenChange = React.useCallback((open: boolean) => {
setOpen(open)
document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${60 * 60 * 24 * 7
}`
}, [])
setOpen(open);
document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${
60 * 60 * 24 * 7
}`;
}, []);

const state = open ? "open" : "closed"
const state = open ? "open" : "closed";

return (
<SidebarContext.Provider value={{ state, open, onOpenChange }}>
Expand All @@ -54,20 +55,20 @@ const SidebarLayout = React.forwardRef<
}
className={cn(
"flex min-h-screen pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]",
className
className,
)}
{...props}
/>
</SidebarContext.Provider>
)
})
SidebarLayout.displayName = "SidebarLayout"
);
});
SidebarLayout.displayName = "SidebarLayout";

const SidebarTrigger = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
const { open, onOpenChange } = useSidebar()
const { open, onOpenChange } = useSidebar();

return (
<Button
Expand All @@ -78,48 +79,58 @@ const SidebarTrigger = React.forwardRef<
onClick={() => onOpenChange(!open)}
{...props}
>
<PanelLeft className="h-4 w-4" />
{open ? (
<PanelLeftClose className="h-4 w-4" />
) : (
<PanelLeftOpen className="h-4 w-4" />
)}
<span className="sr-only">Toggle Sidebar</span>
</Button>
)
})
SidebarTrigger.displayName = "SidebarTrigger"
);
});
SidebarTrigger.displayName = "SidebarTrigger";

const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asideClassname?: string }>(
({ className, children, asideClassname }, ref) => {
const isMobile = useIsMobile()
const { open, onOpenChange } = useSidebar()
const Sidebar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & { asideClassname?: string }
>(({ className, children, asideClassname }, ref) => {
const isMobile = useIsMobile();
const { open, onOpenChange } = useSidebar();

const sidebar = (
<div
ref={ref}
className={cn("flex h-full flex-col border-r bg-background", className)}
>
{children}
</div>
)

if (isMobile) {
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent
className="w-[260px] p-0 md:w-[--sidebar-width] [&>button]:hidden"
side="left"
>
{sidebar}
</SheetContent>
</Sheet>
)
}
const sidebar = (
<div
ref={ref}
className={cn("flex h-full flex-col border-r bg-background", className)}
>
{children}
</div>
);

if (isMobile) {
return (
<aside className={cn("fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]", asideClassname)}>
{sidebar}
</aside>
)
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent
className="w-[260px] p-0 md:w-[--sidebar-width] [&>button]:hidden"
side="left"
>
{sidebar}
</SheetContent>
</Sheet>
);
}
)
Sidebar.displayName = "Sidebar"

return (
<aside
className={cn(
"fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]",
asideClassname,
)}
>
{sidebar}
</aside>
);
});
Sidebar.displayName = "Sidebar";

const SidebarHeader = React.forwardRef<
HTMLDivElement,
Expand All @@ -131,9 +142,9 @@ const SidebarHeader = React.forwardRef<
className={cn("flex items-center border-b px-2.5 py-2", className)}
{...props}
/>
)
})
SidebarHeader.displayName = "SidebarHeader"
);
});
SidebarHeader.displayName = "SidebarHeader";

const SidebarFooter = React.forwardRef<
HTMLDivElement,
Expand All @@ -145,9 +156,9 @@ const SidebarFooter = React.forwardRef<
className={cn("flex items-center border-t px-2.5 py-2", className)}
{...props}
/>
)
})
SidebarFooter.displayName = "SidebarFooter"
);
});
SidebarFooter.displayName = "SidebarFooter";

const SidebarContent = React.forwardRef<
HTMLDivElement,
Expand All @@ -156,22 +167,22 @@ const SidebarContent = React.forwardRef<
return (
<ScrollArea
ref={ref}
className={cn("flex flex-1 flex-col gap-5 py-4", className)}
className={cn("flex flex-1 flex-col gap-5 py-4", className)}
{...props}
/>
)
})
SidebarContent.displayName = "SidebarContent"
);
});
SidebarContent.displayName = "SidebarContent";

const SidebarItem = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
return (
<div ref={ref} className={cn("grid gap-2 px-2.5", className)} {...props} />
)
})
SidebarItem.displayName = "SidebarItem"
);
});
SidebarItem.displayName = "SidebarItem";

const SidebarLabel = React.forwardRef<
HTMLDivElement,
Expand All @@ -182,13 +193,13 @@ const SidebarLabel = React.forwardRef<
ref={ref}
className={cn(
"px-1.5 text-xs font-medium text-muted-foreground",
className
className,
)}
{...props}
/>
)
})
SidebarLabel.displayName = "SidebarLabel"
);
});
SidebarLabel.displayName = "SidebarLabel";

export {
Sidebar,
Expand All @@ -200,4 +211,4 @@ export {
SidebarLayout,
SidebarTrigger,
useSidebar,
}
};

0 comments on commit 7f5f6c4

Please sign in to comment.