Skip to content

Commit 09f96f9

Browse files
ArunkooArunkoo
committed
web design made for sideBar skeleton
1 parent 09efc4a commit 09f96f9

File tree

3 files changed

+171
-128
lines changed

3 files changed

+171
-128
lines changed

‎Client/src/Theme/index.css‎

Lines changed: 115 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,126 @@
11
@import "tailwindcss";
2-
@import "tw-animate-css";
3-
4-
@custom-variant dark (&:is(.dark *));
52

6-
@theme inline {
7-
--radius-sm: calc(var(--radius) - 4px);
8-
--radius-md: calc(var(--radius) - 2px);
9-
--radius-lg: var(--radius);
10-
--radius-xl: calc(var(--radius) + 4px);
11-
--color-background: var(--background);
12-
--color-foreground: var(--foreground);
13-
--color-card: var(--card);
14-
--color-card-foreground: var(--card-foreground);
15-
--color-popover: var(--popover);
16-
--color-popover-foreground: var(--popover-foreground);
17-
--color-primary: var(--primary);
18-
--color-primary-foreground: var(--primary-foreground);
19-
--color-secondary: var(--secondary);
20-
--color-secondary-foreground: var(--secondary-foreground);
21-
--color-muted: var(--muted);
22-
--color-muted-foreground: var(--muted-foreground);
23-
--color-accent: var(--accent);
24-
--color-accent-foreground: var(--accent-foreground);
25-
--color-destructive: var(--destructive);
26-
--color-border: var(--border);
27-
--color-input: var(--input);
28-
--color-ring: var(--ring);
29-
--color-chart-1: var(--chart-1);
30-
--color-chart-2: var(--chart-2);
31-
--color-chart-3: var(--chart-3);
32-
--color-chart-4: var(--chart-4);
33-
--color-chart-5: var(--chart-5);
34-
--color-sidebar: var(--sidebar);
35-
--color-sidebar-foreground: var(--sidebar-foreground);
36-
--color-sidebar-primary: var(--sidebar-primary);
37-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
38-
--color-sidebar-accent: var(--sidebar-accent);
39-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
40-
--color-sidebar-border: var(--sidebar-border);
41-
--color-sidebar-ring: var(--sidebar-ring);
42-
}
43-
44-
:root {
45-
--radius: 0.65rem;
46-
--background: oklch(1 0 0);
47-
--foreground: oklch(0.141 0.005 285.823);
48-
--card: oklch(1 0 0);
49-
--card-foreground: oklch(0.141 0.005 285.823);
50-
--popover: oklch(1 0 0);
51-
--popover-foreground: oklch(0.141 0.005 285.823);
52-
--primary: oklch(0.541 0.281 293.009);
53-
--primary-foreground: oklch(0.969 0.016 293.756);
54-
--secondary: oklch(0.967 0.001 286.375);
55-
--secondary-foreground: oklch(0.21 0.006 285.885);
56-
--muted: oklch(0.967 0.001 286.375);
57-
--muted-foreground: oklch(0.552 0.016 285.938);
58-
--accent: oklch(0.967 0.001 286.375);
59-
--accent-foreground: oklch(0.21 0.006 285.885);
60-
--destructive: oklch(0.577 0.245 27.325);
61-
--border: oklch(0.92 0.004 286.32);
62-
--input: oklch(0.92 0.004 286.32);
63-
--ring: oklch(0.702 0.183 293.541);
64-
--chart-1: oklch(0.811 0.111 293.571);
65-
--chart-2: oklch(0.606 0.25 292.717);
66-
--chart-3: oklch(0.541 0.281 293.009);
67-
--chart-4: oklch(0.491 0.27 292.581);
68-
--chart-5: oklch(0.432 0.232 292.759);
69-
--sidebar: oklch(0.985 0 0);
70-
--sidebar-foreground: oklch(0.141 0.005 285.823);
71-
--sidebar-primary: oklch(0.541 0.281 293.009);
72-
--sidebar-primary-foreground: oklch(0.969 0.016 293.756);
73-
--sidebar-accent: oklch(0.967 0.001 286.375);
74-
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
75-
--sidebar-border: oklch(0.92 0.004 286.32);
76-
--sidebar-ring: oklch(0.702 0.183 293.541);
77-
}
3+
/* * NOTE on @custom-variant and tw-animate-css:
4+
* Tailwind CSS v4 focuses on a standard CSS workflow.
5+
* If 'tw-animate-css' and '@custom-variant' are needed,
6+
* you must ensure they are supported by your specific PostCSS setup.
7+
* For standard v4, you'd usually define the dark mode class in your config.
8+
* * Assuming 'tw-animate-css' is a necessary plugin/import:
9+
*/
10+
@import "tw-animate-css";
7811

79-
.dark {
80-
--background: oklch(0.141 0.005 285.823);
81-
--foreground: oklch(0.985 0 0);
82-
--card: oklch(0.21 0.006 285.885);
83-
--card-foreground: oklch(0.985 0 0);
84-
--popover: oklch(0.21 0.006 285.885);
85-
--popover-foreground: oklch(0.985 0 0);
86-
--primary: oklch(0.606 0.25 292.717);
87-
--primary-foreground: oklch(0.969 0.016 293.756);
88-
--secondary: oklch(0.274 0.006 286.033);
89-
--secondary-foreground: oklch(0.985 0 0);
90-
--muted: oklch(0.274 0.006 286.033);
91-
--muted-foreground: oklch(0.705 0.015 286.067);
92-
--accent: oklch(0.274 0.006 286.033);
93-
--accent-foreground: oklch(0.985 0 0);
94-
--destructive: oklch(0.704 0.191 22.216);
95-
--border: oklch(1 0 0 / 10%);
96-
--input: oklch(1 0 0 / 15%);
97-
--ring: oklch(0.38 0.189 293.745);
98-
--chart-1: oklch(0.811 0.111 293.571);
99-
--chart-2: oklch(0.606 0.25 292.717);
100-
--chart-3: oklch(0.541 0.281 293.009);
101-
--chart-4: oklch(0.491 0.27 292.581);
102-
--chart-5: oklch(0.432 0.232 292.759);
103-
--sidebar: oklch(0.21 0.006 285.885);
104-
--sidebar-foreground: oklch(0.985 0 0);
105-
--sidebar-primary: oklch(0.606 0.25 292.717);
106-
--sidebar-primary-foreground: oklch(0.969 0.016 293.756);
107-
--sidebar-accent: oklch(0.274 0.006 286.033);
108-
--sidebar-accent-foreground: oklch(0.985 0 0);
109-
--sidebar-border: oklch(1 0 0 / 10%);
110-
--sidebar-ring: oklch(0.38 0.189 293.745);
12+
/* * V4 Recommendation: Define the dark variant directly in your tailwind.config.js
13+
* if possible (e.g., darkMode: ['class', '.dark']).
14+
* If you must define a custom variant here, the syntax is correct for PostCSS/Tailwind:
15+
*/
16+
@custom-variant dark {
17+
:is(.dark &) ;
11118
}
11219

11320
@layer base {
21+
/* Global reset for border color. */
11422
* {
115-
@apply border-border outline-ring/50;
23+
border-color: hsl(var(--border));
24+
/* Improved focus state for accessibility */
25+
&:focus-visible {
26+
outline-color: hsl(var(--ring));
27+
outline: 2px solid;
28+
outline-offset: 2px;
29+
}
11630
}
31+
32+
/* Correct placement of body selector, sibling to * */
11733
body {
118-
@apply bg-background text-foreground;
34+
background-color: hsl(var(--background));
35+
color: hsl(var(--foreground));
36+
}
37+
38+
/* ---------------------- ☀️ Light Theme (:root) ---------------------- */
39+
:root {
40+
/* Base Colors */
41+
--background: 0 0% 100%;
42+
--foreground: 222.2 84% 4.9%;
43+
--card: 0 0% 100%;
44+
--card-foreground: 222.2 84% 4.9%;
45+
--popover: 0 0% 100%;
46+
--popover-foreground: 222.2 84% 4.9%;
47+
48+
/* Primary / Secondary / Functional */
49+
--primary: 221.2 83.2% 53.3%;
50+
--primary-foreground: 210 40% 98%;
51+
--secondary: 210 40% 96.1%;
52+
--secondary-foreground: 222.2 47.4% 11.2%;
53+
--muted: 210 40% 96.1%;
54+
--muted-foreground: 215.4 16.3% 46.9%;
55+
--accent: 210 40% 96.1%;
56+
--accent-foreground: 222.2 47.4% 11.2%;
57+
--destructive: 0 84.2% 60.2%;
58+
--destructive-foreground: 210 40% 98%;
59+
60+
/* Borders & Interaction */
61+
--border: 214.3 31.8% 91.4%;
62+
--input: 214.3 31.8% 91.4%;
63+
--ring: 221.2 83.2% 53.3%;
64+
65+
/* Radius */
66+
--radius: 0.5rem;
67+
--radius-sm: calc(var(--radius) - 4px);
68+
--radius-md: calc(var(--radius) - 2px);
69+
--radius-lg: var(--radius);
70+
--radius-xl: calc(var(--radius) + 4px);
71+
72+
/* Chart Colors */
73+
--chart-1: 12 76% 61%;
74+
--chart-2: 173 58% 39%;
75+
--chart-3: 197 37% 24%;
76+
--chart-4: 43 74% 66%;
77+
--chart-5: 27 87% 67%;
78+
79+
/* Sidebar Variables (Simplified to reference existing colors) */
80+
--sidebar: var(--background);
81+
--sidebar-foreground: var(--foreground);
82+
--sidebar-primary: var(--primary);
83+
--sidebar-primary-foreground: var(--primary-foreground);
84+
--sidebar-accent: var(--accent);
85+
--sidebar-accent-foreground: var(--accent-foreground);
86+
--sidebar-border: var(--border);
87+
--sidebar-ring: var(--ring);
88+
}
89+
90+
/* ---------------------- 🌙 Dark Theme (.dark) ---------------------- */
91+
.dark {
92+
/* Base Colors */
93+
--background: 222.2 84% 4.9%;
94+
--foreground: 210 40% 98%;
95+
--card: 222.2 84% 4.9%;
96+
--card-foreground: 210 40% 98%;
97+
--popover: 222.2 84% 4.9%;
98+
--popover-foreground: 210 40% 98%;
99+
100+
/* Primary / Secondary / Functional */
101+
--primary: 217.2 91.2% 59.8%;
102+
--primary-foreground: 222.2 47.4% 11.2%;
103+
--secondary: 217.2 32.6% 17.5%;
104+
--secondary-foreground: 210 40% 98%;
105+
--muted: 217.2 32.6% 17.5%;
106+
--muted-foreground: 215 20.2% 65.1%;
107+
--accent: 217.2 32.6% 17.5%;
108+
--accent-foreground: 210 40% 98%;
109+
--destructive: 0 62.8% 30.6%;
110+
--destructive-foreground: 210 40% 98%;
111+
112+
/* Borders & Interaction */
113+
--border: 217.2 32.6% 17.5%;
114+
--input: 217.2 32.6% 17.5%;
115+
--ring: 224.3 76.3% 48%;
116+
117+
/* Chart Colors */
118+
--chart-1: 220 70% 50%;
119+
--chart-2: 160 60% 45%;
120+
--chart-3: 30 80% 55%;
121+
--chart-4: 280 65% 60%;
122+
--chart-5: 340 75% 55%;
123+
124+
/* Sidebar variables will inherit from the dark base colors defined here. */
119125
}
120126
}

‎Client/src/components/Layout/AppLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SideBar from "./SideBar";
44

55
const AppLayout = () => {
66
return (
7-
<div className="flex gap-1 flex-col min-h-screen text-foreground lg:ml-36 md:ml-[60px] lg:mr-36 ml-5 md:mr-[60px] mr-5 mt-6">
7+
<div className="flex gap-1 flex-col text-foreground lg:ml-36 md:ml-[60px] lg:mr-36 ml-5 md:mr-[60px] mr-5 mt-6 overflow-hidden">
88
<Navbar />
99
<div className="flex flex-1 w-full">
1010
<SideBar />

‎Client/src/components/Layout/SideBar.tsx‎

Lines changed: 55 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,65 @@
1+
import type { FC, ComponentType, SVGProps } from "react";
12
import { Button } from "../ui/button";
2-
import { FileText } from "lucide-react";
3-
import { Star } from "lucide-react";
4-
import { Users } from "lucide-react";
3+
import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar";
4+
5+
import { FileText, Star, Users, LogOut } from "lucide-react";
6+
7+
const sidebarLinks = [
8+
{ icon: FileText, label: "All Workspaces" },
9+
{ icon: Star, label: "Starred" },
10+
{ icon: Users, label: "Owned by me" },
11+
];
12+
13+
interface SidebarLinkProps {
14+
icon: ComponentType<SVGProps<SVGSVGElement>>;
15+
label: string;
16+
}
17+
18+
const SidebarLink: FC<SidebarLinkProps> = ({ icon: Icon, label }) => (
19+
<span className="inline-flex gap-1 justify-start items-center text-[15px] font-normal text-black/80 ml-[26px] cursor-pointer hover:text-black/90 transition-colors">
20+
<Icon />
21+
<h1>{label}</h1>
22+
</span>
23+
);
24+
525
const SideBar = () => {
626
return (
7-
<div className="hidden md:block w-[25%] min-h-dvh bg-white/40 border-r">
27+
<div className="hidden md:block w-[25%] min-h-dvh bg-white/40 border-r flex-col">
828
<div className="flex flex-col gap-2 justify-center items-center py-8">
929
<Button className="font-semibold px-16 text-sm text-white bg-black hover:bg-black/90 hover:text-white/90 cursor-pointer">
10-
<span className="text-[19px] mr-2.5">+</span> New Document
30+
<span className="text-[19px] mr-2.5">+</span> Create Workspace
1131
</Button>
1232
</div>
13-
<div className="flex flex-col gap-3.5 mt-2.5 max-w-full">
14-
<span className="inline-flex gap-1 justify-start items-center text-black/80 ml-[26px]">
15-
<FileText />
16-
<h1>All Documents</h1>
17-
</span>
18-
<span className="inline-flex gap-1 justify-start items-center text-black/80 ml-[26px]">
19-
<Star />
20-
<h1>Starred</h1>
21-
</span>
22-
<span className="inline-flex gap-1 justify-start items-center text-black/80 ml-[26px]">
23-
<Users />
24-
<h1>Owned by me</h1>
25-
</span>
33+
34+
<div className="flex flex-col gap-3.5 mt-2.5 max-w-full grow">
35+
{sidebarLinks.map((link) => (
36+
<SidebarLink key={link.label} icon={link.icon} label={link.label} />
37+
))}
38+
</div>
39+
40+
<div className="p-4 border-t mt-[75%]">
41+
<div className="inline-flex gap-2 items-center w-full p-2 hover:bg-white/50 rounded-md cursor-pointer transition-colors">
42+
<Avatar className="h-9 w-9">
43+
<AvatarImage
44+
src="https://github.com/shadcn.png"
45+
alt="User Avatar"
46+
/>
47+
<AvatarFallback>AR</AvatarFallback>
48+
</Avatar>
49+
50+
<div className="flex flex-col justify-start leading-tight">
51+
<h1 className="text-[15px] font-medium text-black">Arun</h1>
52+
<p className="text-xs text-black/60">Role: Admin</p>
53+
</div>
54+
</div>
55+
56+
<Button
57+
variant="ghost"
58+
className="w-full justify-start mt-2 text-black/80 hover:bg-white/50 hover:text-red-600"
59+
>
60+
<LogOut size={20} className="mr-2" />
61+
Log Out
62+
</Button>
2663
</div>
2764
</div>
2865
);

0 commit comments

Comments
 (0)