apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-07-13 11:22:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: add github and slack community buttons

Browse source
This commit is contained in:
Abhishek Kumar 2026-04-11 15:32:16 +05:30
parent 51fde746ba
commit 73e5ca87e4
5 changed files with 95 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

37
ui/src/components/layout/AppLayout.tsx
View file

@ -1,6 +1,7 @@
"use client";
import { Menu } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { ReactNode } from "react";
@ -8,16 +9,35 @@ import { Button } from "@/components/ui/button";
import { SidebarInset, SidebarProvider, useSidebar } from "@/components/ui/sidebar";
import { AppSidebar } from "./AppSidebar";
import { GitHubStarBadge } from "./GitHubStarBadge";
function MobileHeader() {
function AppHeader() {
const { toggleSidebar } = useSidebar();
return (
<header className="sticky top-0 z-50 flex items-center gap-3 border-b bg-background px-4 py-2 md:hidden">
<Button variant="ghost" size="icon" onClick={toggleSidebar} aria-label="Open menu">
<Menu className="h-5 w-5" />
</Button>
<span className="text-lg font-bold">Dograh</span>
<header className="sticky top-0 z-50 flex items-center justify-between border-b bg-background px-4 py-2">
<div className="flex items-center gap-3">
<Button variant="ghost" size="icon" onClick={toggleSidebar} aria-label="Open menu" className="md:hidden">
<Menu className="h-5 w-5" />
</Button>
<Link href="/" className="text-lg font-bold md:hidden">Dograh</Link>
</div>
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" asChild>
<a
href="https://join.slack.com/t/dograh-community/shared_invite/zt-2z2i1p37n-CkHFbPWDCQ~hNqmKeFGJiQ"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2"
>
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
</svg>
<span className="hidden sm:inline">Join Slack</span>
</a>
</Button>
<GitHubStarBadge />
</div>
</header>
);
}
@ -40,7 +60,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({
const shouldShowSidebar = pathname !== "/" && !pathname.startsWith("/handler") && !pathname.startsWith("/auth");
// Check if we're in workflow editor mode or superadmin runs - collapse sidebar by default
const isWorkflowEditor = /^\/workflow\/\d+/.test(pathname);
// Only match the exact editor page /workflow/<id>, not sub-routes like /workflow/<id>/runs
const isWorkflowEditor = /^\/workflow\/\d+$/.test(pathname);
const isSuperadmin = pathname.startsWith("/superadmin");
// Always render SidebarProvider to keep the component tree shape consistent
@ -51,7 +72,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
<div className="flex min-h-screen w-full">
<AppSidebar />
<SidebarInset className="flex-1">
<MobileHeader />
{!isWorkflowEditor && <AppHeader />}
{/* Optional header area for specific pages */}
{headerActions && (
<header className="sticky top-0 z-50 w-full border-b bg-background">