feat(ui): add a sticky navbar

codex-ui/dev/Playground.vue

@@ -1,22 +1,23 @@
 <template>
   <div :class="$style.playground">
-    <div :class="$style.header">
+    <Navbar>
       <a
         :class="$style.logo"
         href="/dev/index.html"
       >
         CodeX UI
       </a>
-      <Tabbar
-        :class="$style.headerRight"
-        :tabs="[{
-          title: 'Figma',
-          id: 'figma-button',
-          picture: 'https://cdn.svgporn.com/logos/figma.svg',
-          link: 'https://www.figma.com/design/YmJc2Vqmev25xZgXic5bjL/CodeX-Design-System?node-id=1288-953&t=PhdeYMJcGnLqT4js-0'
-        }]"
-      />
-    </div>
+      <template #right>
+        <Tabbar
+          :tabs="[{
+            title: 'Figma',
+            id: 'figma-button',
+            picture: 'https://cdn.svgporn.com/logos/figma.svg',
+            link: 'https://www.figma.com/design/YmJc2Vqmev25xZgXic5bjL/CodeX-Design-System?node-id=1288-953&t=PhdeYMJcGnLqT4js-0'
+          }]"
+        />
+      </template>
+    </Navbar>
     <div :class="$style.body">
       <div
         :class="$style.aside"
@@ -43,6 +44,7 @@ import {
   Popup
 } from '../src/vue';
 import { useTheme } from '../src/vue/composables/useTheme';
+import { Navbar } from '../src/vue/layout/navbar';
 
 import { useRouter, useRoute } from 'vue-router';
 
@@ -96,6 +98,16 @@ const pages = computed(() => [
       },
     ],
   },
+  {
+    title: 'Layout',
+    items: [
+      {
+        title: 'Navbar',
+        onActivate: () => router.push('/layout/navbar'),
+        isActive: route.path === '/layout/navbar',
+      },
+    ],
+  },
   {
     title: 'Components',
     items: [
@@ -220,14 +232,6 @@ const pages = computed(() => [
   color: var(--base--text);
   min-height: 100%;
 }
-.header {
-  display: grid;
-  grid-template-columns: auto auto;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--base--border);
-  padding: var(--spacing-xs) var(--spacing-m);
-}
 
 .logo {
   font-weight: 800;

codex-ui/dev/pages/layout/Navbar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="navbar-wrapper">
+    <Navbar>
+      Left
+      <template #right>
+        Right
+      </template>
+    </Navbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Navbar } from '../../../src/vue';
+</script>
+
+<style scoped>
+.navbar-wrapper {
+  min-height: 400px;
+  position: relative;
+  background-color: var(--base--bg-secondary);
+  border-radius: var(--radius-m);
+  border: 1px solid var(--base--border);
+
+  .navbar {
+      z-index: 1;
+      top: var(--layout-navbar-height);
+      border-radius: var(--radius-m) var(--radius-m) 0 0;
+  }
+}
+</style>

codex-ui/dev/routes.ts

@@ -30,6 +30,7 @@ import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
 import Popup from './pages/components/Popup.vue';
 import Confirm from './pages/components/Confirm.vue';
+import Navbar from './pages/layout/Navbar.vue';
 
 /**
  * Vue router routes list
@@ -155,6 +156,10 @@ const routes: RouteRecordRaw[] = [
     path: '/components/confirm',
     component: Confirm as Component,
   },
+  {
+    path: '/layout/navbar',
+    component: Navbar as Component,
+  },
 ];
 
 export default routes;

codex-ui/src/styles/dimensions.pcss

@@ -24,6 +24,7 @@
    */
   --layout-content-width: 700px;
   --layout-block-width: 300px;
+  --layout-navbar-height: 51px;
 
   /**
    * Height of the line between list items

codex-ui/src/styles/z-axis.pcss

@@ -1,4 +1,5 @@
 :root {
   --z-popover: 3;
-  --z-popup: calc(var(--z-popover) + 1);
+  --z-navbar: calc(var(--z-popover) + 1);
+  --z-popup: calc(var(--z-navbar) + 1);
 }

codex-ui/src/vue/index.ts

@@ -21,3 +21,5 @@ export * from './components/confirm';
 export * from './composables/useTheme';
 export * from './components/checkbox';
 export * from './components/select';
+
+export * from './layout/navbar';

codex-ui/src/vue/layout/navbar/Navbar.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="navbar">
+    <slot />
+    <div class="navbar__right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-navbar);
+  background-color: var(--base--bg-primary);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: var(--layout-navbar-height);
+  border-bottom: 1px solid var(--base--border);
+  box-sizing: border-box;
+  padding: var(--spacing-ms) var(--spacing-l);
+
+  &__right {
+      margin-left: auto;
+  }
+}
+</style>

codex-ui/src/vue/layout/navbar/index.ts

@@ -0,0 +1,3 @@
+import Navbar from './Navbar.vue';
+
+export { Navbar };