Merge pull request #282 from codex-team/feature/layout-navbar

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 };

src/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <Header />
+  <AppNavbar />
   <router-view />
   <Popover />
   <Popup />
 </template>
 
 <script lang="ts" setup>
-import Header from '@/presentation/components/header/Header.vue';
+import AppNavbar from '@/presentation/components/app-navbar/AppNavbar.vue';
 import { onErrorCaptured } from 'vue';
 import { useTheme, Popover, Popup } from 'codex-ui/vue';
 import useAuthRequired from '@/application/services/useAuthRequired';

src/application/services/useHeader.ts → src/application/services/useNavbar.ts

@@ -7,7 +7,7 @@ import { workspaceService } from '@/domain/index';
 import { useI18n } from 'vue-i18n';
 import { notEmpty } from '@/infrastructure/utils/empty';
 
-interface useHeaderComposableState {
+interface useNavbarComposableState {
   /**
    * Function for adding record to opened pages storage when user opens new page
    * @param page - page that had beed opened by user
@@ -35,10 +35,10 @@ interface useHeaderComposableState {
 };
 
 /**
- * Function for composing data for header
- * @returns data used in header and functions for composing data used in header
+ * Function for composing data for Navbar
+ * @returns data used in Navbar and functions for composing data used in Navbar
  */
-export default function useHeader(): useHeaderComposableState {
+export default function useNavbar(): useNavbarComposableState {
   const router = useRouter();
   const route = useRoute();
   const { t } = useI18n();
@@ -87,7 +87,7 @@ export default function useHeader(): useHeaderComposableState {
   });
 
   /**
-   * Subscribe to page changes in the use Header
+   * Subscribe to page changes in the use Navbar
    */
   AppStateController.openedPages((prop: 'openedPages', value: OpenedPage[] | null) => {
     if (prop === 'openedPages') {

src/application/services/useNote.ts

@@ -5,7 +5,7 @@ import type { NoteTool } from '@/domain/entities/Note';
 import { useRouter, useRoute } from 'vue-router';
 import type { NoteDraft } from '@/domain/entities/NoteDraft';
 import type EditorTool from '@/domain/entities/EditorTool';
-import useHeader from './useHeader';
+import useNavbar from './useNavbar';
 import { getTitle } from '@/infrastructure/utils/note';
 
 /**
@@ -98,7 +98,7 @@ interface UseNoteComposableOptions {
  * @param options - note service options
  */
 export default function (options: UseNoteComposableOptions): UseNoteComposableState {
-  const { patchOpenedPageByUrl } = useHeader();
+  const { patchOpenedPageByUrl } = useNavbar();
   /**
    * Current note identifier
    */

src/presentation/components/header/Header.vue → src/presentation/components/app-navbar/AppNavbar.vue

@@ -1,37 +1,37 @@
 <template>
-  <div class="header">
+  <Navbar>
     <router-link
       to="/"
-      class="header__logo"
+      class="app-navbar-logo"
     >
       <Logo />
     </router-link>
     <Tabbar
       :tabs="tabs"
       @click="(tab) => router.push(tab.id)"
-      @discard="(tab) => closeHeaderTab(tab.id)"
+      @discard="(tab) => closeTab(tab.id)"
     />
     <Button
       link="/new"
       type="transparent"
       :icon="IconPlus"
     />
-    <div class="header__right">
+    <template #right>
       <Tabbar
         :tabs="userTab"
         @click="(tab) => {userTabClicked(tab)}"
       />
-    </div>
-  </div>
+    </template>
+  </Navbar>
 </template>
 
 <script lang="ts" setup>
 import { IconPlus } from '@codexteam/icons';
-import { Tabbar, TabParams } from 'codex-ui/vue';
+import { Tabbar, TabParams, Navbar } from 'codex-ui/vue';
 import Button from '@/presentation/components/button/Button.vue';
 import { Logo } from '@/presentation/components/pictures';
 import { useAppState } from '@/application/services/useAppState';
-import useHeader from '@/application/services/useHeader';
+import useNavbar from '@/application/services/useNavbar';
 import { useRouter, useRoute } from 'vue-router';
 import { computed } from 'vue';
 import useAuth from '@/application/services/useAuth';
@@ -41,7 +41,7 @@ const route = useRoute();
 const { user } = useAppState();
 const { showGoogleAuthPopup } = useAuth();
 
-const { currentOpenedPages, deleteOpenedPageByUrl } = useHeader();
+const { currentOpenedPages, deleteOpenedPageByUrl } = useNavbar();
 
 const tabs = computed(() => currentOpenedPages.value.map((page): TabParams => {
   return {
@@ -87,7 +87,7 @@ function userTabClicked(tab: TabParams) {
   }
 }
 
-function closeHeaderTab(url: string) {
+function closeTab(url: string) {
   deleteOpenedPageByUrl(url);
 
   /**
@@ -104,24 +104,9 @@ function closeHeaderTab(url: string) {
 </script>
 
 <style scoped lang="postcss">
-.header {
-  background-color: var(--base--bg-primary);
+.app-navbar-logo {
   display: flex;
   justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 100%;
-  border-bottom: 1px solid var(--base--border);
-  overflow: hidden;
-
-  &__logo {
-    display: flex;
-    justify-content: center;
-    padding: 0 var(--spacing-xl);
-  }
-
-  &__right {
-    margin-left: auto;
-  }
+  padding: 0 var(--spacing-m) 0 var(--spacing-xs);
 }
 </style>