Dev

assets/styles/base.scss

@@ -31,7 +31,8 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	--brand: #924dff;
+	// --brand: #18d2a5;
+	--brand: #0ade71;
 	--blue: #076acd;
 	--red: #eb5757;
 	--orange: #ff5a17;
@@ -95,7 +96,8 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	--brand: #924dff;
+	// --brand: #18d2a5;
+	--brand: #33a853;
 	--blue: #0b84fe;
 	--red: #eb5757;
 	--orange: #ff5a17;
@@ -151,7 +153,8 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	--brand: #924dff;
+	// --brand: #18d2a5;
+	--brand: #0ade71;
 	--blue: #0b84fe;
 	--red: #eb5757;
 	--orange: #ff5a17;
@@ -277,6 +280,12 @@ body {
 	cursor: pointer;
 }
 
+.divider_h {
+	width: 100%;
+	height: 2px;
+	background: var(--op-5);
+}
+
 .divider_v {
 	width: 2px;
 	height: 16px;

components/ActionBar.vue

@@ -0,0 +1,61 @@
+<script setup>
+/**
+ * UI
+ */
+import Button from "@/components/ui/Button.vue"
+
+/** Components */
+import Search from "@/components/modules/navigation/Search.vue"
+
+/** Store */
+import { useAppStore } from "@/store/app"
+const appStore = useAppStore()
+</script>
+
+<template>
+	<Flex wide align="center" justify="between" gap="24" :class="$style.wrapper">
+		<Flex wide align="center" gap="12">
+			<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
+				<Icon name="menu" size="16" color="primary" />
+			</Button>
+
+			<Search />
+		</Flex>
+
+		<Flex align="center" gap="12">
+			<Button @click="appStore.showCmd = true" type="secondary" size="mini">
+				<Icon name="terminal_square" size="16" color="secondary" />
+			</Button>
+
+			<div style="width: 2px; height: 16px; background: var(--op-10)" />
+
+			<Connection :class="$style.connection_btn" />
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 12px 24px;
+}
+
+.menu_btn {
+	display: none;
+}
+
+@media (max-width: 1300px) {
+	.menu_btn {
+		display: flex;
+	}
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 12px;
+	}
+
+	.connection_btn {
+		display: none;
+	}
+}
+</style>