Skip to content

Commit fd2503b

Browse files
henry-dowlinghenry-dowling
committed
remove sidebar
1 parent 317f173 commit fd2503b

File tree

3 files changed

+209
-216
lines changed

3 files changed

+209
-216
lines changed

‎app/components/app-navbar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Link } from "@tanstack/react-router";
22
import { Separator } from "./ui/separator";
3-
import { SidebarTrigger } from "./ui/sidebar";
43
import { DashboardBreadcrumb } from "@/components/dashboard-breadcrumb";
54

65
export function AppNavbar() {

‎app/routes/(authed)/config.tsx‎

Lines changed: 95 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
Check
2626
} from "lucide-react";
2727
import { useState } from "react";
28-
import { AppSidebar } from "@/components/app-sidebar";
2928
import { AppNavbar } from "@/components/app-navbar";
3029
import { cn } from "@/lib/utils";
3130
import { ScrollArea } from "@/components/ui/scroll-area";
@@ -143,106 +142,104 @@ function ConfigComponent() {
143142
};
144143

145144
return (
146-
<AppSidebar>
147-
<div className="min-h-screen bg-background">
148-
<AppNavbar />
149-
<main className="container mx-auto p-4 pt-20">
150-
<div className="space-y-6">
151-
<div>
152-
<h1 className="text-3xl font-bold tracking-tight">Service Configuration</h1>
153-
<p className="text-muted-foreground mt-2">
154-
Choose which services and products you want to monitor. You'll receive notifications
155-
when there are incidents affecting your selected products.
156-
</p>
157-
</div>
145+
<div className="min-h-screen bg-background">
146+
<AppNavbar />
147+
<main className="container mx-auto p-4 pt-20">
148+
<div className="space-y-6">
149+
<div>
150+
<h1 className="text-3xl font-bold tracking-tight">Service Configuration</h1>
151+
<p className="text-muted-foreground mt-2">
152+
Choose which services and products you want to monitor. You'll receive notifications
153+
when there are incidents affecting your selected products.
154+
</p>
155+
</div>
158156

159-
<div className="space-y-4">
160-
<Input
161-
placeholder="Search services and products..."
162-
value={searchQuery}
163-
onChange={(e) => setSearchQuery(e.target.value)}
164-
className="max-w-md"
165-
/>
157+
<div className="space-y-4">
158+
<Input
159+
placeholder="Search services and products..."
160+
value={searchQuery}
161+
onChange={(e) => setSearchQuery(e.target.value)}
162+
className="max-w-md"
163+
/>
166164

167-
<ScrollArea className="h-[calc(100vh-300px)]">
168-
<div className="space-y-4">
169-
{filteredServices.map((service) => (
170-
<Collapsible
171-
key={service.id}
172-
open={expandedServices.has(service.id)}
173-
onOpenChange={() => toggleService(service.id)}
174-
>
175-
<Card className="overflow-hidden">
176-
<CollapsibleTrigger className="w-full text-left">
177-
<CardHeader className="p-6">
178-
<div className="flex items-center justify-between">
179-
<div>
180-
<h3 className="text-xl font-semibold">{service.name}</h3>
181-
<p className="text-sm text-muted-foreground mt-1">
182-
{service.description}
183-
</p>
184-
</div>
185-
<Button variant="ghost" size="icon">
186-
{expandedServices.has(service.id) ? (
187-
<ChevronUp className="h-4 w-4" />
188-
) : (
189-
<ChevronDown className="h-4 w-4" />
190-
)}
191-
</Button>
192-
</div>
193-
</CardHeader>
194-
</CollapsibleTrigger>
195-
196-
<CollapsibleContent>
197-
<CardContent className="p-0">
198-
<div className="py-2 px-6">
199-
<Input
200-
placeholder={`Search ${service.name} products...`}
201-
value={productSearchQueries[service.id] || ""}
202-
onChange={(e) => handleProductSearch(service.id, e.target.value)}
203-
className="w-full"
204-
onClick={(e) => e.stopPropagation()}
205-
/>
206-
</div>
207-
<div className="divide-y">
208-
{getFilteredProducts(service).map((product) => {
209-
const isEnabled = enabledProducts.has(`${service.id}-${product.id}`);
210-
return (
211-
<button
212-
key={product.id}
213-
className={cn(
214-
"w-full px-6 py-4 flex items-center justify-between hover:bg-secondary/50 transition-colors",
215-
isEnabled && "bg-secondary"
216-
)}
217-
onClick={() => toggleProduct(service.id, product.id)}
218-
>
219-
<div className="flex items-center gap-3">
220-
{getIconForProduct(service.id, product.id)}
221-
<span className="font-medium">{product.name}</span>
222-
</div>
223-
<div className="flex items-center gap-2">
224-
<Switch
225-
checked={isEnabled}
226-
onCheckedChange={() => toggleProduct(service.id, product.id)}
227-
onClick={(e) => e.stopPropagation()}
228-
className="data-[state=checked]:bg-primary"
229-
/>
230-
</div>
231-
</button>
232-
);
233-
})}
165+
<ScrollArea className="h-[calc(100vh-300px)]">
166+
<div className="space-y-4">
167+
{filteredServices.map((service) => (
168+
<Collapsible
169+
key={service.id}
170+
open={expandedServices.has(service.id)}
171+
onOpenChange={() => toggleService(service.id)}
172+
>
173+
<Card className="overflow-hidden">
174+
<CollapsibleTrigger className="w-full text-left">
175+
<CardHeader className="p-6">
176+
<div className="flex items-center justify-between">
177+
<div>
178+
<h3 className="text-xl font-semibold">{service.name}</h3>
179+
<p className="text-sm text-muted-foreground mt-1">
180+
{service.description}
181+
</p>
234182
</div>
235-
</CardContent>
236-
</CollapsibleContent>
237-
</Card>
238-
</Collapsible>
239-
))}
240-
</div>
241-
</ScrollArea>
242-
</div>
183+
<Button variant="ghost" size="icon">
184+
{expandedServices.has(service.id) ? (
185+
<ChevronUp className="h-4 w-4" />
186+
) : (
187+
<ChevronDown className="h-4 w-4" />
188+
)}
189+
</Button>
190+
</div>
191+
</CardHeader>
192+
</CollapsibleTrigger>
193+
194+
<CollapsibleContent>
195+
<CardContent className="p-0">
196+
<div className="py-2 px-6">
197+
<Input
198+
placeholder={`Search ${service.name} products...`}
199+
value={productSearchQueries[service.id] || ""}
200+
onChange={(e) => handleProductSearch(service.id, e.target.value)}
201+
className="w-full"
202+
onClick={(e) => e.stopPropagation()}
203+
/>
204+
</div>
205+
<div className="divide-y">
206+
{getFilteredProducts(service).map((product) => {
207+
const isEnabled = enabledProducts.has(`${service.id}-${product.id}`);
208+
return (
209+
<button
210+
key={product.id}
211+
className={cn(
212+
"w-full px-6 py-4 flex items-center justify-between hover:bg-secondary/50 transition-colors",
213+
isEnabled && "bg-secondary"
214+
)}
215+
onClick={() => toggleProduct(service.id, product.id)}
216+
>
217+
<div className="flex items-center gap-3">
218+
{getIconForProduct(service.id, product.id)}
219+
<span className="font-medium">{product.name}</span>
220+
</div>
221+
<div className="flex items-center gap-2">
222+
<Switch
223+
checked={isEnabled}
224+
onCheckedChange={() => toggleProduct(service.id, product.id)}
225+
onClick={(e) => e.stopPropagation()}
226+
className="data-[state=checked]:bg-primary"
227+
/>
228+
</div>
229+
</button>
230+
);
231+
})}
232+
</div>
233+
</CardContent>
234+
</CollapsibleContent>
235+
</Card>
236+
</Collapsible>
237+
))}
238+
</div>
239+
</ScrollArea>
243240
</div>
244-
</main>
245-
</div>
246-
</AppSidebar>
241+
</div>
242+
</main>
243+
</div>
247244
);
248245
}

0 commit comments

Comments
 (0)