Skip to content

Commit b2e9736

Browse files
safipatelsafipatel
committed
made theme changer changes
1 parent 1484489 commit b2e9736

File tree

4 files changed

+152
-105
lines changed

4 files changed

+152
-105
lines changed

‎app/globals.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
--secondary-foreground: 240 5.9% 10%;
1717
--muted: 240 4.8% 95.9%;
1818
--muted-foreground: 240 3.8% 46.1%;
19-
--accent: 240 4.8% 95.9%;
19+
--accent: 240, 5%, 85%;
2020
--accent-foreground: 240 5.9% 10%;
2121
--destructive: 0 72.22% 50.59%;
2222
--destructive-foreground: 0 0% 98%;
@@ -33,7 +33,7 @@
3333
--sidebar-foreground: 240 5.3% 26.1%;
3434
--sidebar-primary: 240 5.9% 10%;
3535
--sidebar-primary-foreground: 0 0% 98%;
36-
--sidebar-accent: 240 4.8% 95.9%;
36+
--sidebar-accent: 240, 5%, 85%;
3737
--sidebar-accent-foreground: 240 5.9% 10%;
3838
--sidebar-border: 220 13% 91%;
3939
--sidebar-ring: 240 5% 64.9%;
@@ -51,7 +51,7 @@
5151
--secondary-foreground: 0 0% 98%;
5252
--muted: 240 3.7% 15.9%;
5353
--muted-foreground: 240 5% 64.9%;
54-
--accent: 240 3.7% 15.9%;
54+
--accent: 240 5% 40%;
5555
--accent-foreground: 0 0% 98%;
5656
--destructive: 0 62.8% 30.6%;
5757
--destructive-foreground: 0 85.7% 97.3%;
@@ -67,7 +67,7 @@
6767
--sidebar-foreground: 240 4.8% 95.9%;
6868
--sidebar-primary: 224.3 76.3% 48%;
6969
--sidebar-primary-foreground: 0 0% 100%;
70-
--sidebar-accent: 240 3.7% 15.9%;
70+
--sidebar-accent: 240 5% 40%;
7171
--sidebar-accent-foreground: 240 4.8% 95.9%;
7272
--sidebar-border: 240 3.7% 15.9%;
7373
--sidebar-ring: 240 4.9% 83.9%;

‎shared/components/ui/sidebar/app-sidebar.tsx‎

Lines changed: 21 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,14 @@ import {
3737
DropdownMenuItem,
3838
} from "@shared/components/ui/dropdown-menu";
3939
import { ModeToggle } from "./mode-toggle";
40-
import { usePathname } from "next/navigation";
40+
import { usePathname, useSearchParams } from "next/navigation";
4141
import { getPageAspectsByPath } from "./nav-utils";
4242
import { Skeleton } from "../skeleton";
4343
import { useContext } from "react";
4444
import { UserContext } from "@shared/lib/userContext/userContext";
4545
import { ClassroomWithMembers } from "@shared/lib/userContext/contextFetcher";
4646
import LogoComponent from "@shared/components/Logo";
47+
import Link from "next/link";
4748

4849
// Menu items.
4950
// const items = [
@@ -109,7 +110,7 @@ export function AppSidebar() {
109110
},
110111
adminManage: {
111112
title: "Manage courses",
112-
url: "/classrooms",
113+
url: "/classrooms?tab=admin",
113114
icon: UserRoundCog,
114115
isActive: false,
115116
},
@@ -140,7 +141,8 @@ export function AppSidebar() {
140141
};
141142

142143
const pathname = usePathname();
143-
const activePageHierarchy = getPageAspectsByPath(pathname);
144+
const searchParams = useSearchParams();
145+
const activePageHierarchy = getPageAspectsByPath(pathname, searchParams);
144146

145147
const userContext = useContext(UserContext);
146148
if (!userContext) {
@@ -160,7 +162,11 @@ export function AppSidebar() {
160162
let classroomInfo: ClassroomWithMembers | undefined,
161163
isAdminOfActiveClass: boolean = false;
162164
if (activePageHierarchy?.classroomLanding) {
163-
items.enrolled.isActive = true;
165+
if (activePageHierarchy.classroomLanding.admin){
166+
items.adminManage.isActive = true
167+
}else{
168+
items.enrolled.isActive = true;
169+
}
164170
} else if (activePageHierarchy?.activeClassroom) {
165171
classroomInfo = userContext.userAndClassData.classroomsData.find(
166172
(x) => x.id === activePageHierarchy?.activeClassroom.id
@@ -187,7 +193,7 @@ export function AppSidebar() {
187193
<SidebarMenu>
188194
<SidebarMenuItem>
189195
<SidebarMenuButton size="lg" asChild>
190-
<a href="#">
196+
<Link href="/">
191197
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
192198
{/* <div className="relative h-[90%] w-[90%] object-contain"> */}
193199
{/* <Image src={"/logo.svg"} fill alt="Logo" className="fill-red-600"/> */}
@@ -197,83 +203,36 @@ export function AppSidebar() {
197203
<div className="grid flex-1 text-left text-lg leading-tight">
198204
<span className="truncate font-semibold">ClassroomLM</span>
199205
</div>
200-
</a>
206+
</Link>
201207
</SidebarMenuButton>
202208
</SidebarMenuItem>
203209
</SidebarMenu>
204210
</SidebarHeader>
205211
<SidebarContent>
206-
{/** <SidebarGroup>
207-
<SidebarGroupContent>
208-
<SidebarMenu>
209-
{items.map((item) => (
210-
<Collapsible
211-
defaultOpen
212-
className="group/collapsible"
213-
key={item.title}
214-
>
215-
<SidebarMenuItem>
216-
<CollapsibleTrigger asChild>
217-
<SidebarMenuButton isActive
218-
// asChild
219-
// style={{
220-
// pointerEvents: item.url != "#" ? "auto" : "none",
221-
// }}
222-
>
223-
<a href={item.url == "/" ? "#" : item.url}>
224-
{item.icon != null ? <item.icon /> : <span></span>}
225-
<span>{item.title}</span>
226-
</a>
227-
</SidebarMenuButton>
228-
</CollapsibleTrigger>
229-
230-
<CollapsibleContent>
231-
{item.subItems.map((sub) => (
232-
<SidebarMenuSub
233-
key={sub.title}
234-
className="rounded-r-lg hover:bg-[#858fad]"
235-
>
236-
<SidebarMenuSubItem>
237-
<a href={sub.url}>
238-
<span>{sub.title}</span>
239-
</a>
240-
</SidebarMenuSubItem>
241-
</SidebarMenuSub>
242-
))}
243-
</CollapsibleContent>
244-
</SidebarMenuItem>
245-
</Collapsible>
246-
))}
247-
</SidebarMenu>
248-
</SidebarGroupContent>
249-
</SidebarGroup> */}
250-
<SidebarGroup >
251-
<SidebarGroupLabel className="text-lg"
252-
>Classes</SidebarGroupLabel>
212+
<SidebarGroup>
213+
<SidebarGroupLabel className="text-lg">Classes</SidebarGroupLabel>
253214
<SidebarMenu className="space-y-1">
254215
{Object.entries(items).map(([itemKey, item]) => (
255-
<SidebarMenuItem key={item.title}>
216+
<SidebarMenuItem key={item.title}>
256217
<SidebarMenuButton
257-
className="text-lg"
258-
218+
className="text-lg"
259219
tooltip={item.title}
260220
isActive={item.isActive}
261221
asChild
262222
size="default"
263223
>
264-
<a href={item.url}>
224+
<Link href={item.url}>
265225
{item.icon && <item.icon />}
266226
<span>{item.title}</span>
267-
</a>
227+
</Link>
268228
</SidebarMenuButton>
269229
{activePageHierarchy?.activeClassroom &&
270230
classroomInfo &&
271231
((itemKey == "enrolled" && !isAdminOfActiveClass) ||
272232
(itemKey == "adminManage" && isAdminOfActiveClass)) && (
273-
<SidebarMenuSub >
233+
<SidebarMenuSub>
274234
<SidebarMenuSubItem
275235
key={activePageHierarchy?.activeClassroom?.id}
276-
277236
>
278237
<SidebarMenuSubButton
279238
// size="md"
@@ -305,10 +264,10 @@ export function AppSidebar() {
305264
isActive={item.isActive}
306265
asChild
307266
>
308-
<a href={item.suffixURL}>
267+
<Link href={item.suffixURL}>
309268
{item.icon && <item.icon />}
310269
<span>{item.title}</span>
311-
</a>
270+
</Link>
312271
</SidebarMenuButton>
313272
</SidebarMenuItem>
314273
))}

‎shared/components/ui/sidebar/mode-toggle.tsx‎

Lines changed: 112 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,122 @@
11
"use client";
22

33
import * as React from "react";
4-
import { Moon, Sun } from "lucide-react";
4+
import { Laptop, Moon, Sun } from "lucide-react";
55
import { useTheme } from "next-themes";
6+
import { TooltipUtil } from "@/app/classrooms/clientUtils";
67

7-
import { Button } from "@shared/components/ui/button";
8-
import {
9-
DropdownMenu,
10-
DropdownMenuContent,
11-
DropdownMenuItem,
12-
DropdownMenuTrigger,
13-
} from "@shared/components/ui/dropdown-menu";
8+
// import { Button } from "@shared/components/ui/button";
9+
// import {
10+
// DropdownMenu,
11+
// DropdownMenuContent,
12+
// DropdownMenuItem,
13+
// DropdownMenuTrigger,
14+
// } from "@shared/components/ui/dropdown-menu";
1415

1516
export function ModeToggle() {
16-
const { setTheme } = useTheme();
17-
17+
const { theme, setTheme } = useTheme();
18+
console.log(theme)
1819
return (
19-
<DropdownMenu>
20-
<DropdownMenuTrigger asChild>
21-
<Button variant="outline" size="icon">
22-
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 text-foreground transition-all dark:-rotate-90 dark:scale-0" />
23-
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24-
<span className="sr-only">Toggle theme</span>
25-
</Button>
26-
</DropdownMenuTrigger>
27-
<DropdownMenuContent align="end">
28-
<DropdownMenuItem onClick={() => setTheme("light")}>
29-
Light
30-
</DropdownMenuItem>
31-
<DropdownMenuItem onClick={() => setTheme("dark")}>
32-
Dark
33-
</DropdownMenuItem>
34-
<DropdownMenuItem onClick={() => setTheme("system")}>
35-
System
36-
</DropdownMenuItem>
37-
</DropdownMenuContent>
38-
</DropdownMenu>
20+
// styled after sonner docs
21+
<div className="flex w-fit flex-row gap-2 rounded-xl border-2 border-sidebar-accent px-3 py-2 text-sidebar-accent">
22+
<TooltipUtil
23+
trigger={<Sun
24+
onClick={() => setTheme("light")}
25+
data-active={theme === "light"}
26+
className="text-sidebar-accent fill-side-bar-accent hover:fill-foreground hover:text-foreground data-[active=true]:fill-foreground data-[active=true]:text-foreground"
27+
/>} content={"Light mode"} delayDuration={0}/>
28+
{/* //className="h-[1.2rem] w-[1.2rem]" /> */}
29+
<TooltipUtil
30+
trigger={<Moon
31+
onClick={() => setTheme("dark")}
32+
data-active={theme === "dark"}
33+
className="text-sidebar-accent fill-side-bar-accent hover:fill-foreground hover:text-foreground data-[active=true]:fill-foreground data-[active=true]:text-foreground"
34+
/>} content={"Dark"} delayDuration={0}/>
35+
{/* className="h-[1.2rem] w-[1.2rem]" /> */}
36+
<TooltipUtil
37+
trigger={<Laptop
38+
onClick={() => setTheme("system")}
39+
data-active={theme === "system"}
40+
className="text-sidebar-accent fill-side-bar-accent hover:fill-foreground hover:text-foreground data-[active=true]:fill-foreground data-[active=true]:text-foreground"
41+
/>} content={"System"} delayDuration={0}/>
42+
</div>
3943
);
44+
// return (
45+
// <DropdownMenu>
46+
// <DropdownMenuTrigger asChild>
47+
// {/* <button
48+
// className="text-current p-2 cursor-pointer focus:ring outline-none"
49+
// onClick={() => setTheme("light")}
50+
// aria-label="Toggle theme"
51+
// onKeyDown={e => {
52+
// if (e.key === 'Enter') setTheme("light")
53+
// }}
54+
// > */}
55+
// {/* { theme === 'dark' ? (
56+
// <svg
57+
// fill="none"
58+
// viewBox="0 0 24 24"
59+
// width="24"
60+
// height="24"
61+
// stroke="currentColor"
62+
// aria-hidden="true"
63+
// >
64+
// <path
65+
// strokeLinecap="round"
66+
// strokeLinejoin="round"
67+
// strokeWidth={2}
68+
// d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
69+
// />
70+
// </svg>
71+
// ) : theme === 'light' ? (
72+
// <svg
73+
// fill="none"
74+
// viewBox="0 0 24 24"
75+
// width="24"
76+
// height="24"
77+
// stroke="currentColor"
78+
// aria-hidden="true"
79+
// >
80+
// <path
81+
// strokeLinecap="round"
82+
// strokeLinejoin="round"
83+
// strokeWidth={2}
84+
// d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
85+
// />
86+
// </svg>
87+
// ) : (
88+
// <svg
89+
// key="undefined"
90+
// viewBox="0 0 24 24"
91+
// width="24"
92+
// height="24"
93+
// stroke="currentColor"
94+
// strokeWidth="1.5"
95+
// strokeLinecap="round"
96+
// strokeLinejoin="round"
97+
// fill="none"
98+
// shapeRendering="geometricPrecision"
99+
// aria-hidden="true"
100+
// ></svg>
101+
// )}
102+
// </button> */}
103+
// {/* <Button variant="outline" size="icon">
104+
// <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 text-foreground transition-all dark:-rotate-90 dark:scale-0" />
105+
// <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
106+
// <span className="sr-only">Toggle theme</span>
107+
// </Button> */}
108+
// </DropdownMenuTrigger>
109+
// <DropdownMenuContent align="end">
110+
// <DropdownMenuItem onClick={() => setTheme("light")}>
111+
// Light
112+
// </DropdownMenuItem>
113+
// <DropdownMenuItem onClick={() => setTheme("dark")}>
114+
// Dark
115+
// </DropdownMenuItem>
116+
// <DropdownMenuItem onClick={() => setTheme("system")}>
117+
// System
118+
// </DropdownMenuItem>
119+
// </DropdownMenuContent>
120+
// </DropdownMenu>
121+
// );
40122
}

‎shared/components/ui/theme-provider.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
"use client";
1+
'use client'
22

3-
import * as React from "react";
4-
import { ThemeProvider as NextThemesProvider } from "next-themes";
3+
// changed based on https://github.com/shadcn-ui/ui/issues/5552#issuecomment-2435053678
4+
import * as React from 'react'
5+
const NextThemesProvider = dynamic(
6+
() => import('next-themes').then((e) => e.ThemeProvider),
7+
{
8+
ssr: false,
9+
}
10+
)
511

6-
export function ThemeProvider({
7-
children,
8-
...props
9-
}: React.ComponentProps<typeof NextThemesProvider>) {
10-
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
11-
}
12+
import dynamic from 'next/dynamic'
13+
import { ThemeProviderProps } from 'next-themes'
14+
15+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
16+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
17+
}

0 commit comments

Comments
 (0)