#29 initial high fed navbar

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-yarn-error.log
+yarn-error.log
+.DS_Store

packages/gui/package.json

@@ -14,12 +14,12 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@tea/ui": "workspace:*",
     "@playwright/test": "1.25.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/adapter-static": "1.0.0-next.48",
     "@sveltejs/kit": "next",
     "@tauri-apps/cli": "1.2.0",
+    "@tea/ui": "workspace:*",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "autoprefixer": "^10.4.13",

packages/gui/src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.2.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.0", features = ["http-all", "shell-open"] }
+tauri = { version = "1.2.0", features = ["http-all", "shell-open", "window-all"] }
 uuid = "1.2.1"
 futures = "0.3"
 

packages/gui/src-tauri/tauri.conf.json

@@ -26,6 +26,38 @@
         "open": true,
         "scope": [],
         "sidecar": false
+      },
+      "window": {
+        "all": true,
+        "center": true,
+        "close": true,
+        "create": true,
+        "hide": true,
+        "maximize": true,
+        "minimize": true,
+        "print": true,
+        "requestUserAttention": true,
+        "setAlwaysOnTop": true,
+        "setCursorGrab": true,
+        "setCursorIcon": true,
+        "setCursorPosition": true,
+        "setCursorVisible": true,
+        "setDecorations": true,
+        "setFocus": true,
+        "setFullscreen": true,
+        "setIcon": true,
+        "setIgnoreCursorEvents": true,
+        "setMaxSize": true,
+        "setMinSize": true,
+        "setPosition": true,
+        "setResizable": true,
+        "setSize": true,
+        "setSkipTaskbar": true,
+        "setTitle": true,
+        "show": true,
+        "startDragging": true,
+        "unmaximize": true,
+        "unminimize": true
       }
     },
     "bundle": {
@@ -73,7 +105,8 @@
         "height": 600,
         "resizable": true,
         "title": "gui",
-        "width": 800
+        "width": 800,
+        "decorations": false
       }
     ]
   }

packages/gui/src/+layout.ts

@@ -1,2 +0,0 @@
-export const prerender = true
-export const ssr = false

packages/gui/src/app.css

@@ -21,4 +21,4 @@ html {
   html {
     font-family: sono, sans-serif;
   }
-}
+}

packages/gui/src/components/NavBar/NavBar.svelte

@@ -1,40 +1,163 @@
 <script type="ts">
+    import { page } from '$app/stores';
     import { open } from '@tauri-apps/api/shell';
+    import { appWindow } from '@tauri-apps/api/window';
+
+    import { beforeUpdate } from 'svelte';
+
+
     const openGithub = () => {
         open('https://github.com/teaxyz')
     }
+
+    let maximized = false;
+    const toggleMaximize = () => {
+        maximized = !maximized;
+        if (maximized) {
+            appWindow.maximize();
+        } else {
+            appWindow.unmaximize();
+        }
+    }
+
+    let routes = [
+        {
+            path: '/',
+            active: false,
+            label: 'DISCOVER'
+        },
+        {
+            path: '/documentation',
+            active: false,
+            label: 'DOCUMENTATION'
+        },
+        {
+            path: '/cli',
+            active: false,
+            label: 'TEA CLI INSTALL'
+        },
+        {
+            path: '/packages',
+            active: false,
+            label: 'PACKAGES'
+        }
+    ];
+
+    beforeUpdate(async () => {
+        const currentPath = $page.url.pathname;
+
+        for(let i = 0; i < routes.length; i++) {
+            let { path } = routes[i];
+            routes[i].active = currentPath.includes(path);
+        }
+        if (currentPath !== '/') {
+            routes[0].active = false;
+        }
+    });
 </script>
 
-<ul id="NavBar">
-    <li>
-        <a href="/">Home</a>
-    </li>
-    <li>
-        <input type="search" placeholder="search" />
-    </li>
-    <li>
-        <a href="/">Discover</a>
-    </li>
-    <li>
-        <a href="/documentation">Documentation</a>
-    </li>
-    <li>
-        <a href="/cli">TEA CLI INSTALL</a>
-    </li>
-    <li>
-        <a href="/packages">PACKAGES</a>
-    </li>
-    <li>
-        <button on:click={openGithub}>view on github</button>
-    </li>
-    <li>
-        <a href="/profile">user profile</a>
+<ul id="NavBar" >
+    <nav data-tauri-drag-region class="flex justify-between">
+        <div class="flex gap-1 p-3">
+            <button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
+                <img src="/images/close.svg" alt="close" />
+            </button>
+            <button class="titlebar-button" id="titlebar-minimize" on:click={appWindow.minimize}>
+                <img
+                src="/images/minimize.svg"
+                alt="minimize"
+                />
+            </button>
+            <button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
+                <img
+                src="/images/expand.svg"
+                alt="maximize"
+                />
+            </button>
+        </div>
+        <a href="/">
+            <img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
+        </a>
+    </nav>
+
+    <input class="w-full bg-black h-12 p-4 border border-x-0 border-gray" type="search" placeholder="search" />
+
+    {#each routes as route}
+        <li class={route.active ? "nav_button active": "nav_button"}>
+            <a href={route.path}>{route.label}</a>
+        </li>
+    {/each}
+    <li class="nav_button">
+        <button on:click={openGithub}>VIEW ON GITHUB</button>
     </li>
+
+    <footer class="border border-x-0 border-gray w-full">
+        <a href="/profile">
+            <section class="flex">
+                <img width="40" height="40" src="/images/bored-ape.png" alt="profile"/>
+                <div class="p-2 text-gray">@user_name</div>
+            </section>
+        </a>
+    </footer>
 </ul>
 
 <style>
-    #NavBar {
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ul {
         height: 100vh;
         width: 100%;
     }
+
+    @layer components {
+        .nav_button {
+            color: theme('colors.white');
+            padding: theme('spacing.4') theme('spacing.2');
+        }
+        .nav_button:hover {
+            color: theme('colors.black');
+            background-color: theme('colors.primary');
+        }
+        .nav_button.active {
+            color: theme('colors.black');
+            background-color: theme('colors.primary');
+        }
+    }
+
+    nav:hover {
+        transition: all .3s;
+        background-color: #2d2d2d;
+    }
+
+    .titlebar-button {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        opacity: 0.9;
+    }
+    .titlebar-button img {
+        transition: opacity .3s;
+        opacity: 0;
+    }
+    .titlebar-button:hover img {
+        opacity: 1;
+    }
+    #titlebar-close {
+        background-color: orangered;
+    }
+    #titlebar-minimize {
+        background-color: orange;
+    }
+    #titlebar-maximize {
+        background-color: green;
+    }
+
+    footer {
+        position: absolute;
+        bottom: 20px;
+    }
 </style>

packages/gui/src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = true;

packages/gui/static/images/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>

packages/gui/static/images/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19H5l.007-7H7v5h5v2Zm6.992-7H17V7h-5V5h7l-.008 7Z"/></svg>

packages/gui/static/images/minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 14H4v-4h16"/></svg>

packages/ui/tailwind.config.cjs

@@ -2,6 +2,7 @@
 const primary = '#00ffd0';
 const black = '#1a1a1a';
 const white = '#fff';
+const gray = '#949494';
 
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -11,6 +12,7 @@ module.exports = {
       green: primary,
       black,
       white,
+      gray,
     },
     extend: {
       fontFamily: {