left sidebar

web/src/components/button/Button.tsx

@@ -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>
     );

web/src/components/sidebars/Sidebars.tsx

@@ -1,7 +1,7 @@
 import { component$ } from "@builder.io/qwik";
 import { UserType } from "~/lib/types";
-import ButtonLight from "../button/ButtonLight";
+import Button from "../button/Button";
-import User from "../user/User";
+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>
+                    <Button light={true}>
-                        Post
+                    <span class="font-semibold">Post</span>
-                    </ButtonLight>
+                    </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",

web/src/components/user/User.tsx

@@ -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;
+    background?: boolean;
-    accountSwitcher: boolean;
+    accountSwitcher?: boolean;
-    action: string | undefined;
+    action? : string;
     user: UserType;
+    accountSwitcherUser?: boolean;
 }
 
-export default component$((props: UserProps) => {
+export const AccountSwitcher = component$(() => {
-    const visible = useSignal(false);
+    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">
+            {props.accountSwitcher && <AccountSwitcher />}
-                <div
+            <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`}>
-                    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">
                 <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={props.accountSwitcherUser ? "text-clatter-gray-500" : "text-clatter-gray-400"}>@</span>
-                            <span class="text-clatter-gray-500">
+                            <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>
     );
-});
+}); 

web/src/lib/contexts.ts

@@ -0,0 +1,3 @@
+import { createContextId, Signal } from "@builder.io/qwik";
+
+export const AccountSwitcher = createContextId<Signal<boolean>>("clatter.user.switcher");

web/src/routes/layout.tsx

@@ -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 />

web/tailwind.config.js

@@ -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",
         }
       },