diff --git a/.gitignore b/.gitignore
index d9ec20f1..e7f41543 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
**/qubeclan
**/testdir
democlan
+example_clan
result*
/pkgs/clan-cli/clan_cli/nixpkgs
/pkgs/clan-cli/clan_cli/webui/assets
diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx
index 4cef02cb..f541db66 100644
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -18,6 +18,7 @@ import "./globals.css";
import { darkTheme, lightTheme } from "./theme/themes";
import { WithAppState } from "@/components/hooks/useAppContext";
+import { ClanToolbar } from "@/components/clanToolbar";
const roboto = localFont({
src: [
@@ -69,6 +70,7 @@ export default function RootLayout({
!showSidebar && translate
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
>
+
diff --git a/pkgs/ui/src/components/clanToolbar/index.tsx b/pkgs/ui/src/components/clanToolbar/index.tsx
new file mode 100644
index 00000000..09dfd198
--- /dev/null
+++ b/pkgs/ui/src/components/clanToolbar/index.tsx
@@ -0,0 +1,65 @@
+import { IconButton, LinearProgress } from "@mui/material";
+import * as React from "react";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useFlakeHistoryList } from "@/api/flake/flake";
+import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
+
+interface ToolbarButtonProps {
+ icon: React.ReactNode;
+ onClick: (event: React.MouseEvent
) => void;
+}
+function ToolbarButton(props: ToolbarButtonProps) {
+ const { icon, onClick } = props;
+ return (
+
+ {icon}
+
+ );
+}
+type ToolbarItem = {
+ icon: React.ReactNode;
+};
+const toolbarItems: ToolbarItem[] = [
+ {
+ icon: ,
+ },
+];
+export function ClanToolbar() {
+ const { data, isLoading } = useFlakeHistoryList();
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const open = Boolean(anchorEl);
+ const handleClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+ return (
+
+ {toolbarItems.map((item, index) => (
+
+ ))}
+
+
+ );
+}