Merge Luke and Zac

src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx

@@ -0,0 +1,46 @@
+import {Button} from "@/components/ui/button";
+import {Menu, X, Terminal as TerminalIcon} from "lucide-react";
+import {useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
+import {cn} from "@/lib/utils.ts";
+
+interface MenuProps {
+    onSidebarOpenClick?: () => void;
+}
+
+export function BottomNavbar({onSidebarOpenClick}: MenuProps) {
+    const {tabs, currentTab, setCurrentTab, removeTab} = useTabs();
+
+    return (
+        <div className="w-full h-[80px] bg-[#18181B] flex items-center p-2 gap-2">
+            <Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
+                <Menu/>
+            </Button>
+            <div className="flex-1 overflow-x-auto whitespace-nowrap thin-scrollbar">
+                <div className="inline-flex gap-2">
+                    {tabs.map(tab => (
+                        <div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
+                            <Button
+                                variant="outline"
+                                className={cn(
+                                    "h-10 rounded-r-none !px-3 border-1 border-[#303032]",
+                                    tab.id === currentTab && '!bg-[#09090b] !text-white'
+                                )}
+                                onClick={() => setCurrentTab(tab.id)}
+                            >
+                                <TerminalIcon className="mr-1 h-4 w-4"/>
+                                {tab.title}
+                            </Button>
+                            <Button
+                                variant="outline"
+                                className="h-10 rounded-l-none !px-2 border-1 border-[#303032]"
+                                onClick={() => removeTab(tab.id)}
+                            >
+                                <X className="h-4 w-4"/>
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}