Skip to content

Commit 842021d

Browse files
smanzlersmanzler
committed
updated toggle and added app details page
1 parent 858ba65 commit 842021d

File tree

9 files changed

+353
-98
lines changed

9 files changed

+353
-98
lines changed

‎package-lock.json‎

Lines changed: 83 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@radix-ui/react-avatar": "^1.1.10",
14-
"@radix-ui/react-dialog": "^1.1.14",
14+
"@radix-ui/react-dialog": "^1.1.15",
1515
"@radix-ui/react-dropdown-menu": "^2.1.15",
1616
"@radix-ui/react-hover-card": "^1.1.14",
1717
"@radix-ui/react-label": "^2.1.7",

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { HashRouter, Route, Routes, useLocation } from "react-router";
77
import ProjectDetails from "./components/pages/project-details";
88
import { useEffect } from "react";
99
import Apps from "./components/pages/apps";
10+
import AppDetails from "./components/pages/app-details";
1011

1112
function Root() {
1213
const { state } = useLocation();
@@ -38,6 +39,7 @@ function App() {
3839
<Route path="/" element={<Root />} />
3940
<Route path="/projects/:id" element={<ProjectDetails />} />
4041
<Route path="/apps" element={<Apps />} />
42+
<Route path="/apps/:id" element={<AppDetails />} />
4143
</Routes>
4244
</div>
4345
</main>

‎src/components/header.tsx‎

Lines changed: 92 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import { ModeToggle } from "@/components/mode-toggle";
22
import { Button } from "@/components/ui/button";
3-
import {
4-
DropdownMenu,
5-
DropdownMenuContent,
6-
DropdownMenuItem,
7-
DropdownMenuTrigger,
8-
} from "@/components/ui/dropdown-menu";
93
import { motion, useScroll } from "framer-motion";
104
import { cn } from "@/lib/utils";
115
import { useEffect, useRef, useState } from "react";
126
import { useNavigate, useLocation } from "react-router";
7+
import {
8+
Sheet,
9+
SheetClose,
10+
SheetContent,
11+
SheetFooter,
12+
SheetHeader,
13+
SheetTitle,
14+
SheetTrigger,
15+
} from "./ui/sheet";
16+
import { X } from "lucide-react";
1317

1418
export function Header() {
1519
const [isScrolled, setIsScrolled] = useState(false);
@@ -56,7 +60,7 @@ export function Header() {
5660

5761
return (
5862
<motion.header
59-
className="fixed w-full z-55"
63+
className="fixed left-0 right-0 z-5"
6064
animate={{
6165
top: isScrolled ? (isVisible ? "20px" : "-80px") : "0",
6266
}}
@@ -65,66 +69,100 @@ export function Header() {
6569
<div className="container mx-auto px-4">
6670
<motion.div
6771
className={cn(
68-
"mx-auto rounded-xl transition-colors max-w-5xl",
72+
"mx-auto rounded-full transition-colors max-w-5xl flex justify-between items-center mx-auto",
6973
isScrolled
7074
? "bg-card shadow-lg backdrop-blur-lg supports-[backdrop-filter]:bg-card/50"
7175
: "bg-transparent"
7276
)}
7377
animate={{
74-
padding: isScrolled ? "0.5rem 1.5rem" : "0.5rem 0rem",
78+
padding: isScrolled ? "4px 24px" : "4px 4px",
7579
}}
7680
transition={{ duration: 0.3, ease: [0.1, 0.6, 0.3, 0.95] }}
7781
>
78-
<div className="h-12 flex justify-between items-center mx-auto">
79-
<Button variant="ghost" onClick={(e) => handleClick("home", e)}>
80-
<span className="font-bold">Simon Manzler</span>
81-
</Button>
82+
<Button
83+
variant="ghost"
84+
size="icon"
85+
onClick={(e) => handleClick("home", e)}
86+
>
87+
<img
88+
src="/src/assets/simon-icon.png"
89+
alt="Simon Manzler"
90+
className="h-6 w-6"
91+
/>
92+
</Button>
8293

83-
<nav className="flex items-center">
84-
<div className="hidden md:flex">
85-
<Button
86-
variant="ghost"
87-
onClick={(e) => handleClick("projects", e)}
88-
>
89-
Projects
90-
</Button>
91-
<Button
92-
variant="ghost"
93-
onClick={(e) => handleClick("about", e)}
94-
>
95-
About
96-
</Button>
97-
<Button
98-
variant="ghost"
99-
onClick={(e) => handleClick("contact", e)}
100-
>
101-
Contact
102-
</Button>
103-
</div>
94+
<nav className="flex items-center">
95+
<div className="hidden md:flex">
96+
<Button
97+
variant="ghost"
98+
onClick={(e) => handleClick("projects", e)}
99+
>
100+
Projects
101+
</Button>
102+
<Button variant="ghost" onClick={(e) => handleClick("about", e)}>
103+
About
104+
</Button>
105+
<Button
106+
variant="ghost"
107+
onClick={(e) => handleClick("contact", e)}
108+
>
109+
Contact
110+
</Button>
111+
</div>
104112

105-
<div className="flex items-center">
106-
<ModeToggle />
107-
<DropdownMenu>
108-
<DropdownMenuTrigger asChild className="md:hidden">
109-
<Button variant="ghost" size="icon">
110-
<MenuIcon className="h-6 w-6" />
111-
</Button>
112-
</DropdownMenuTrigger>
113-
<DropdownMenuContent align="end">
114-
<DropdownMenuItem onSelect={() => handleClick("projects")}>
113+
<div className="flex items-center">
114+
<ModeToggle />
115+
<Sheet>
116+
<SheetTrigger asChild className="md:hidden">
117+
<Button variant="ghost" size="icon">
118+
<MenuIcon className="h-6 w-6" />
119+
</Button>
120+
</SheetTrigger>
121+
<SheetContent side="right">
122+
<SheetHeader>
123+
<SheetTitle>
124+
<img
125+
src="/src/assets/simon-icon.png"
126+
alt="Simon Manzler"
127+
className="h-6 w-6"
128+
/>
129+
</SheetTitle>
130+
</SheetHeader>
131+
<div className="flex flex-col">
132+
<Button
133+
variant="link"
134+
className="justify-start"
135+
onClick={(e) => handleClick("projects", e)}
136+
>
115137
Projects
116-
</DropdownMenuItem>
117-
<DropdownMenuItem onSelect={() => handleClick("about")}>
138+
</Button>
139+
<Button
140+
variant="link"
141+
className="justify-start"
142+
onClick={(e) => handleClick("about", e)}
143+
>
118144
About
119-
</DropdownMenuItem>
120-
<DropdownMenuItem onSelect={() => handleClick("contact")}>
145+
</Button>
146+
<Button
147+
variant="link"
148+
className="justify-start"
149+
onClick={(e) => handleClick("contact", e)}
150+
>
121151
Contact
122-
</DropdownMenuItem>
123-
</DropdownMenuContent>
124-
</DropdownMenu>
125-
</div>
126-
</nav>
127-
</div>
152+
</Button>
153+
</div>
154+
<SheetFooter>
155+
<SheetClose asChild>
156+
<Button variant="ghost">
157+
<X className="h-6 w-6" />
158+
Close
159+
</Button>
160+
</SheetClose>
161+
</SheetFooter>
162+
</SheetContent>
163+
</Sheet>
164+
</div>
165+
</nav>
128166
</motion.div>
129167
</div>
130168
</motion.header>

‎src/components/mode-toggle.tsx‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
11
import { Moon, Sun } from "lucide-react";
22

33
import { Button } from "@/components/ui/button";
4-
import {
5-
DropdownMenu,
6-
DropdownMenuContent,
7-
DropdownMenuItem,
8-
DropdownMenuTrigger,
9-
} from "@/components/ui/dropdown-menu";
104
import { useTheme } from "@/components/theme-provider";
115

126
export function ModeToggle() {
13-
const { setTheme } = useTheme();
7+
const { theme, setTheme } = useTheme();
8+
9+
const handleToggle = () => {
10+
if (theme === "system") {
11+
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
12+
.matches
13+
? "light"
14+
: "dark";
15+
setTheme(systemTheme);
16+
} else if (theme === "light") {
17+
setTheme("dark");
18+
} else {
19+
setTheme("light");
20+
}
21+
};
1422

1523
return (
16-
<DropdownMenu>
17-
<DropdownMenuTrigger asChild>
18-
<Button variant="ghost" size="icon">
19-
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
20-
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
21-
<span className="sr-only">Toggle theme</span>
22-
</Button>
23-
</DropdownMenuTrigger>
24-
<DropdownMenuContent align="end" className="z-55">
25-
<DropdownMenuItem onClick={() => setTheme("light")}>
26-
Light
27-
</DropdownMenuItem>
28-
<DropdownMenuItem onClick={() => setTheme("dark")}>
29-
Dark
30-
</DropdownMenuItem>
31-
<DropdownMenuItem onClick={() => setTheme("system")}>
32-
System
33-
</DropdownMenuItem>
34-
</DropdownMenuContent>
35-
</DropdownMenu>
24+
<Button variant="ghost" size="icon" onClick={handleToggle}>
25+
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
26+
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
27+
<span className="sr-only">Toggle theme</span>
28+
</Button>
3629
);
3730
}

0 commit comments

Comments
 (0)