Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): add a sticky navbar #282

Merged
merged 14 commits into from
Jan 14, 2025
42 changes: 23 additions & 19 deletions codex-ui/dev/Playground.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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';

Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -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;
Expand Down
32 changes: 32 additions & 0 deletions codex-ui/dev/pages/layout/Navbar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<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);
overflow-x: clip;
neSpecc marked this conversation as resolved.
Show resolved Hide resolved

.navbar {
z-index: 1;
top: var(--layout-navbar-height);
border-radius: var(--radius-m) var(--radius-m) 0 0;
padding: 0 var(--spacing-ms);
neSpecc marked this conversation as resolved.
Show resolved Hide resolved
}
}
</style>
5 changes: 5 additions & 0 deletions codex-ui/dev/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -155,6 +156,10 @@ const routes: RouteRecordRaw[] = [
path: '/components/confirm',
component: Confirm as Component,
},
{
path: '/layout/navbar',
component: Navbar as Component,
},
];

export default routes;
1 change: 1 addition & 0 deletions codex-ui/src/styles/dimensions.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
*/
--layout-content-width: 700px;
--layout-block-width: 300px;
--layout-navbar-height: 51px;

/**
* Height of the line between list items
Expand Down
3 changes: 2 additions & 1 deletion codex-ui/src/styles/z-axis.pcss
Original file line number Diff line number Diff line change
@@ -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);
}
2 changes: 2 additions & 0 deletions codex-ui/src/vue/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@ export * from './components/confirm';
export * from './composables/useTheme';
export * from './components/checkbox';
export * from './components/select';

export * from './layout/navbar';
28 changes: 28 additions & 0 deletions codex-ui/src/vue/layout/navbar/Navbar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<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;

&__right {
margin-left: auto;
}
}
</style>
3 changes: 3 additions & 0 deletions codex-ui/src/vue/layout/navbar/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Navbar from './Navbar.vue';

export { Navbar };
Loading