@@ -24,6 +30,15 @@ function NavBranding({ subTitle }: { subTitle: string }) {
+ {isMobile && (
+
+
+
+
+
+ )}
);
}
diff --git a/src/components/layout/app-sidebar/nav-main.tsx b/src/components/layout/app-sidebar/nav-main.tsx
index 07a5d9e..499691c 100644
--- a/src/components/layout/app-sidebar/nav-main.tsx
+++ b/src/components/layout/app-sidebar/nav-main.tsx
@@ -1,5 +1,4 @@
"use client";
-
import { ChevronRight, type LucideIcon } from "lucide-react";
import {
@@ -18,22 +17,45 @@ import {
SidebarMenuSubButton,
SidebarMenuSubItem,
} from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { api } from "@/trpc/react";
+import { Icons } from "@/components/icons";
-export function NavMain({
- items,
-}: {
- items: {
- title: string;
- url: string;
- icon: LucideIcon;
- isActive?: boolean;
- items?: {
- title: string;
- url: string;
- hideBorder?: boolean;
- }[];
- }[];
-}) {
+export function NavMain() {
+ const [{ articles, categories }] = api.app.getSidebarMain.useSuspenseQuery();
+ const items = [
+ {
+ title: "Artikel",
+ url: "/artikel",
+ isActive: true,
+ icon: Icons.article,
+ items: [
+ ...articles.map((article) => ({
+ title: article.title,
+ url: `/artikel/${article.slug}`,
+ })),
+ {
+ title: "Alle Artikel",
+ url: "/artikel",
+ },
+ ],
+ },
+ {
+ title: "Kategorien",
+ url: "/kategorie",
+ icon: Icons.category,
+ items: [
+ ...categories.map((category) => ({
+ title: category.name,
+ url: `/kategorie/${category.slug}`,
+ })),
+ {
+ title: "Alle Kategorien",
+ url: "#",
+ },
+ ],
+ },
+ ];
return (
Platform
@@ -77,3 +99,20 @@ export function NavMain({
);
}
+
+export function NavMainSkeleton() {
+ return (
+
+ Platform
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/layout/app-sidebar/sidebar-trigger.tsx b/src/components/layout/app-sidebar/sidebar-trigger.tsx
new file mode 100644
index 0000000..e348439
--- /dev/null
+++ b/src/components/layout/app-sidebar/sidebar-trigger.tsx
@@ -0,0 +1,24 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon, MenuIcon } from "lucide-react";
+
+export function SidebarTrigger() {
+ const { toggleSidebar, state, isMobile } = useSidebar();
+ const open = state === "expanded";
+ return (
+
+ );
+}
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index 8752c65..2ab24e6 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -5,6 +5,7 @@ import { hasPermission, Role } from "@/lib/validation/permissions";
import { ModeToggle } from "../mode-switch";
import EditorDropdown from "../editor-dropdown";
+import { SidebarTrigger } from "./app-sidebar/sidebar-trigger";
async function Navbar() {
const session = await auth();
@@ -13,10 +14,13 @@ async function Navbar() {
: false;
return (
-
- {isEditor &&
}
+
+
+
+ {isEditor && }
-
+
+
);
}
diff --git a/src/server/api/routers/app.ts b/src/server/api/routers/app.ts
index 26ffe5a..6e5fb1d 100644
--- a/src/server/api/routers/app.ts
+++ b/src/server/api/routers/app.ts
@@ -24,16 +24,24 @@ export const appRouter = createTRPCRouter({
return { articles, categories };
}),
- getSidebarContent: publicProcedure.query(async ({ ctx }) => {
- return await ctx.db.query.categories.findMany({
- with: {
- articles: {
- columns: {
- title: true,
- slug: true,
- },
- },
+ getSidebarMain: publicProcedure.query(async ({ ctx }) => {
+ const categories = await ctx.db.query.categories.findMany({
+ limit: 3,
+ columns: {
+ slug: true,
+ name: true,
},
});
+ const articles = await ctx.db.query.articles.findMany({
+ limit: 3,
+ columns: {
+ slug: true,
+ title: true,
+ },
+ });
+ return {
+ categories,
+ articles,
+ };
}),
});
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ef28557..29eab60 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -29,8 +29,8 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
- /* --sidebar-background: 0 0% 98%;
- --sidebar-foreground: 240 5.3% 26.1%; */
+ --sidebar-background: 0 0% 100%;
+ --sidebar-foreground: 240 10% 3.9%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
@@ -40,9 +40,9 @@
}
.dark {
- --background: 240 10% 3.9%;
+ --background: 240 10% 1%;
--foreground: 0 0% 98%;
- --card: 240 10% 3.9%;
+ --card: 240 10% 1%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
@@ -64,8 +64,8 @@
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
- /* --sidebar-background: 240 5.9% 10%;
- --sidebar-foreground: 240 4.8% 95.9%; */
+ --sidebar-background: 240 10% 1%;
+ --sidebar-foreground: 0 0% 98%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;