left sidebar
This commit is contained in:
grngxd
parent
add5093fa3
commit
334445ece3
6 changed files with 79 additions and 28 deletions
|
|
@ -1,8 +1,12 @@
|
|||
import { component$, IntrinsicHTMLElements, Slot } from "@builder.io/qwik";
|
||||
|
||||
export default component$((props: IntrinsicHTMLElements["div"]) => {
|
||||
interface ButtonProps {
|
||||
light?: boolean;
|
||||
}
|
||||
|
||||
export default component$((props: IntrinsicHTMLElements["div"] & ButtonProps) => {
|
||||
return (
|
||||
<div class={`text-lg flex w-full justify-center items-center bg-clatter-gray-400 hover:bg-clatter-gray-300 active:bg-clatter-gray-500 duration-150 transition-all ease-in-out rounded-full py-2 h-min active:scale-95 select-none`} {...props}>
|
||||
<div class={`text-lg flex w-full justify-center items-center ${props.light ? "bg-clatter-gray-500" : "bg-clatter-gray-400"} ${props.light ? "hover:bg-clatter-gray-400" : "hover:bg-clatter-gray-300"} ${props.light ? "active:bg-clatter-gray-600" : "active:bg-clatter-gray-500"} duration-150 transition-all ease-in-out rounded-full py-2 h-min active:scale-95 select-none`} {...props}>
|
||||
<Slot />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { component$ } from "@builder.io/qwik";
|
||||
import { UserType } from "~/lib/types";
|
||||
import ButtonLight from "../button/ButtonLight";
|
||||
import User from "../user/User";
|
||||
import Button from "../button/Button";
|
||||
import { User } from "../user/User";
|
||||
|
||||
export const SidebarLeft = component$(() => {
|
||||
return (
|
||||
|
|
@ -11,11 +11,31 @@ export const SidebarLeft = component$(() => {
|
|||
|
||||
<div class="flex flex-col gap-4 rounded-5xl p-3 bg-clatter-gray-100 h-full justify-between">
|
||||
<div class="mx-2">
|
||||
<ButtonLight>
|
||||
Post
|
||||
</ButtonLight>
|
||||
<Button light={true}>
|
||||
<span class="font-semibold">Post</span>
|
||||
</Button>
|
||||
</div>
|
||||
<User background={true} accountSwitcher={true} action="" user={{
|
||||
|
||||
<div class="bg-clatter-gray-200 rounded-5xl p-3 gap-1.5 flex flex-col">
|
||||
<Button light={true}>
|
||||
<span class="font-semibold">Home</span>
|
||||
</Button>
|
||||
|
||||
<Button>
|
||||
<span>
|
||||
<span class="relative">
|
||||
Notifications
|
||||
<span class="bg-clatter-gray-500 text-white rounded-full text-xs font-semibold absolute -top-1 -right-8 px-1">99+</span>
|
||||
</span>
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
<Button>
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<User background={true} accountSwitcher={true} user={{
|
||||
id: "1",
|
||||
userName: "username",
|
||||
displayName: "Display Name",
|
||||
|
|
|
|||
|
|
@ -1,36 +1,57 @@
|
|||
import { component$, useSignal } from "@builder.io/qwik";
|
||||
import { component$, useContext, useContextProvider, useSignal } from "@builder.io/qwik";
|
||||
import * as contexts from "~/lib/contexts";
|
||||
import { UserType } from "~/lib/types";
|
||||
import { LucideUsers } from "../icons/lucide/LucideUsers";
|
||||
|
||||
interface UserProps {
|
||||
background: boolean;
|
||||
accountSwitcher: boolean;
|
||||
action: string | undefined;
|
||||
background?: boolean;
|
||||
accountSwitcher?: boolean;
|
||||
action? : string;
|
||||
user: UserType;
|
||||
accountSwitcherUser?: boolean;
|
||||
}
|
||||
|
||||
export default component$((props: UserProps) => {
|
||||
const visible = useSignal(false);
|
||||
export const AccountSwitcher = component$(() => {
|
||||
const visible = useContext(contexts.AccountSwitcher);
|
||||
|
||||
return (
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
id="account-switcher"
|
||||
class={`flex flex-col gap-2 overflow-auto absolute w-full max-h-48 min-h-16 p-2 bg-clatter-gray-300 rounded-4xl shadow-xl transition-all duration-300 ease-in-out transform ${visible.value ? 'opacity-100 bottom-2' : 'opacity-0 -bottom-2'}`}
|
||||
>
|
||||
<User accountSwitcherUser={true} user={{
|
||||
id: "1",
|
||||
userName: "username",
|
||||
displayName: "Display Name",
|
||||
avatar: "https://via.placeholder.com/150"
|
||||
} as UserType} />
|
||||
|
||||
<User accountSwitcherUser={true} user={{
|
||||
id: "1",
|
||||
userName: "username",
|
||||
displayName: "Display Name",
|
||||
avatar: "https://via.placeholder.com/150"
|
||||
} as UserType} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
||||
export const User = component$((props: UserProps) => {
|
||||
const visible = useSignal(false);
|
||||
useContextProvider(contexts.AccountSwitcher, visible);
|
||||
return (
|
||||
<div>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
id="account-switcher"
|
||||
class={`absolute bottom-2 w-full h-48 bg-clatter-gray-300 rounded-4xl shadow-lg overflow-hidden transition-opacity duration-300 ease-in-out transform ${visible.value ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
|
||||
>
|
||||
Account Switcher
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-16 rounded-full p-2 bg-clatter-gray-300 flex justify-between gap-2">
|
||||
{props.accountSwitcher && <AccountSwitcher />}
|
||||
<div class={`w-full h-16 rounded-full p-2 ${props.accountSwitcherUser ? "bg-clatter-gray-400" : "bg-clatter-gray-300"} flex justify-between gap-2`}>
|
||||
<div class="flex gap-2">
|
||||
<img src={props.user.avatar} alt="avatar" class="w-12 h-12 rounded-full" />
|
||||
<div class="flex flex-col gap-1 justify-center">
|
||||
<p class="text-md font-semibold">{props.user.displayName}</p>
|
||||
<p class="text-sm font-semibold -mt-2.5">
|
||||
<span class="text-clatter-gray-400">@</span>
|
||||
<span class="text-clatter-gray-500">
|
||||
<span class={props.accountSwitcherUser ? "text-clatter-gray-500" : "text-clatter-gray-400"}>@</span>
|
||||
<span class={props.accountSwitcherUser ? "text-clatter-gray-600" : "text-clatter-gray-500"}>
|
||||
{props.user.userName} {props.action}
|
||||
</span>
|
||||
</p>
|
||||
|
|
@ -48,4 +69,4 @@ export default component$((props: UserProps) => {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
});
|
||||
3
web/src/lib/contexts.ts
Normal file
3
web/src/lib/contexts.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { createContextId, Signal } from "@builder.io/qwik";
|
||||
|
||||
export const AccountSwitcher = createContextId<Signal<boolean>>("clatter.user.switcher");
|
||||
|
|
@ -15,7 +15,7 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
|
|||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<div class="bg-clatter-black text-white p-8 flex flex-grow h-screen gap-12 !font-lexend !font-semibold !tracking-[-4%]">
|
||||
<div class="bg-clatter-black text-white p-8 flex flex-grow h-screen gap-12 !font-lexend !font-medium !tracking-[-4%]">
|
||||
<SidebarLeft />
|
||||
<div class="flex-[0.55]">
|
||||
<Slot />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||
mode: "jit",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
@ -11,7 +12,9 @@ export default {
|
|||
300: "#4e4947",
|
||||
350: "#5a5553",
|
||||
400: "#6b6563",
|
||||
450: "#7c7674",
|
||||
500: "#9c9591",
|
||||
550: "#a9a4a1",
|
||||
600: "#b3adaa",
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue