From e17c142a13b768780e73f14f316cb814862cab5a Mon Sep 17 00:00:00 2001
From: Hanxing Yang <nighca@live.cn>
Date: Sun, 29 Sep 2024 14:14:37 +0800
Subject: [PATCH] Navbar for community pages (#958)

* navbar for community

* comment for NavbarWrapper centered

* adjust responsive breakpoint
---
 .../components/community/CenteredWrapper.vue  |   4 +-
 .../components/community/CommunityNavbar.vue  |  50 ++++
 spx-gui/src/components/community/TopNav.vue   |   8 -
 .../components/editor/navbar/EditorNavbar.vue | 276 ++++++++++++++++++
 .../navbar}/icons/cloud-check.svg             |   0
 .../navbar}/icons/export-project.svg          |   0
 .../navbar}/icons/failed-to-save.svg          |   0
 .../navbar}/icons/import-project.svg          |   0
 .../navbar}/icons/import-scratch.svg          |   0
 .../navbar}/icons/offline.svg                 |   0
 .../{top-nav => editor/navbar}/icons/redo.svg |   0
 .../navbar}/icons/remove-project.svg          |   0
 .../navbar}/icons/saving.svg                  |   0
 .../navbar}/icons/share.svg                   |   0
 .../navbar}/icons/stop-sharing.svg            |   0
 .../{top-nav => editor/navbar}/icons/undo.svg |   0
 .../src/components/navbar/NavbarDropdown.vue  |  38 +++
 spx-gui/src/components/navbar/NavbarLang.vue  |  40 +++
 spx-gui/src/components/navbar/NavbarLogo.vue  |  18 ++
 .../navbar/NavbarNewProjectItem.vue           |  25 ++
 .../navbar/NavbarOpenProjectItem.vue          |  19 ++
 .../src/components/navbar/NavbarProfile.vue   |  63 ++++
 .../src/components/navbar/NavbarWrapper.vue   |  88 ++++++
 .../components/{top-nav => navbar}/TopNav.vue |   0
 .../src/components/{top-nav => navbar}/bg.svg |   0
 .../{top-nav => navbar}/icons/en.svg          |   0
 .../{top-nav => navbar}/icons/new.svg         |   0
 .../{top-nav => navbar}/icons/open.svg        |   0
 .../{top-nav => navbar}/icons/zh.svg          |   0
 .../components/{top-nav => navbar}/logo.svg   |   0
 spx-gui/src/components/ui/responsive.scss     |  21 ++
 spx-gui/src/pages/community/index.vue         |   4 +-
 spx-gui/src/pages/editor/index.vue            |   4 +-
 spx-gui/src/router.ts                         |   4 +
 34 files changed, 648 insertions(+), 14 deletions(-)
 create mode 100644 spx-gui/src/components/community/CommunityNavbar.vue
 delete mode 100644 spx-gui/src/components/community/TopNav.vue
 create mode 100644 spx-gui/src/components/editor/navbar/EditorNavbar.vue
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/cloud-check.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/export-project.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/failed-to-save.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/import-project.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/import-scratch.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/offline.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/redo.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/remove-project.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/saving.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/share.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/stop-sharing.svg (100%)
 rename spx-gui/src/components/{top-nav => editor/navbar}/icons/undo.svg (100%)
 create mode 100644 spx-gui/src/components/navbar/NavbarDropdown.vue
 create mode 100644 spx-gui/src/components/navbar/NavbarLang.vue
 create mode 100644 spx-gui/src/components/navbar/NavbarLogo.vue
 create mode 100644 spx-gui/src/components/navbar/NavbarNewProjectItem.vue
 create mode 100644 spx-gui/src/components/navbar/NavbarOpenProjectItem.vue
 create mode 100644 spx-gui/src/components/navbar/NavbarProfile.vue
 create mode 100644 spx-gui/src/components/navbar/NavbarWrapper.vue
 rename spx-gui/src/components/{top-nav => navbar}/TopNav.vue (100%)
 rename spx-gui/src/components/{top-nav => navbar}/bg.svg (100%)
 rename spx-gui/src/components/{top-nav => navbar}/icons/en.svg (100%)
 rename spx-gui/src/components/{top-nav => navbar}/icons/new.svg (100%)
 rename spx-gui/src/components/{top-nav => navbar}/icons/open.svg (100%)
 rename spx-gui/src/components/{top-nav => navbar}/icons/zh.svg (100%)
 rename spx-gui/src/components/{top-nav => navbar}/logo.svg (100%)
 create mode 100644 spx-gui/src/components/ui/responsive.scss

diff --git a/spx-gui/src/components/community/CenteredWrapper.vue b/spx-gui/src/components/community/CenteredWrapper.vue
index b11f26a6f..05f37d7fe 100644
--- a/spx-gui/src/components/community/CenteredWrapper.vue
+++ b/spx-gui/src/components/community/CenteredWrapper.vue
@@ -5,7 +5,7 @@
 </template>
 
 <style scoped lang="scss">
-$threshold: 1920px; // TODO: reconfirm here with @qingqing
+@import '@/components/ui/responsive';
 
 .centered {
   position: relative;
@@ -13,7 +13,7 @@ $threshold: 1920px; // TODO: reconfirm here with @qingqing
   margin-right: auto;
 
   width: 1020px;
-  @media (min-width: $threshold) {
+  @include responsive(desktop-large) {
     width: 1280px;
   }
 }
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
new file mode 100644
index 000000000..586ed3c96
--- /dev/null
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -0,0 +1,50 @@
+<template>
+  <NavbarWrapper centered>
+    <template #left>
+      <NavbarDropdown>
+        <template #trigger> Create(TODO) </template>
+        <UIMenu>
+          <NavbarNewProjectItem />
+          <NavbarOpenProjectItem />
+        </UIMenu>
+      </NavbarDropdown>
+    </template>
+    <template #right>
+      <div class="search">
+        <UITextInput
+          v-model:value="searchInput"
+          :placeholder="$t({ en: 'Search project', zh: '搜索项目' })"
+          @keypress.enter="handleSearch"
+        >
+          <template #prefix><UIIcon class="search-icon" type="search" /></template>
+        </UITextInput>
+      </div>
+    </template>
+  </NavbarWrapper>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { UIMenu, UITextInput, UIIcon } from '@/components/ui'
+import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
+import NavbarDropdown from '../navbar/NavbarDropdown.vue'
+import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
+import NavbarOpenProjectItem from '@/components/navbar/NavbarOpenProjectItem.vue'
+import { getProjectsRoute } from '@/router'
+
+const router = useRouter()
+const searchInput = ref('')
+
+function handleSearch() {
+  router.push(getProjectsRoute(searchInput.value))
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  width: 340px;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/spx-gui/src/components/community/TopNav.vue b/spx-gui/src/components/community/TopNav.vue
deleted file mode 100644
index d5ff27f08..000000000
--- a/spx-gui/src/components/community/TopNav.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <TopNav :project="null"></TopNav>
-  <!-- TODO -->
-</template>
-
-<script setup lang="ts">
-import TopNav from '@/components/top-nav/TopNav.vue'
-</script>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
new file mode 100644
index 000000000..4acbd5d38
--- /dev/null
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -0,0 +1,276 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <NavbarWrapper>
+    <template #left>
+      <NavbarDropdown>
+        <template #trigger>
+          <UIIcon type="file" />
+        </template>
+        <UIMenu>
+          <UIMenuGroup :disabled="!isOnline">
+            <NavbarNewProjectItem />
+            <NavbarOpenProjectItem />
+          </UIMenuGroup>
+          <UIMenuGroup :disabled="project == null">
+            <UIMenuItem @click="handleImportProjectFile">
+              <template #icon><img :src="importProjectSvg" /></template>
+              {{ $t({ en: 'Import project file...', zh: '导入项目文件...' }) }}
+            </UIMenuItem>
+            <UIMenuItem @click="handleExportProjectFile">
+              <template #icon><img :src="exportProjectSvg" /></template>
+              {{ $t({ en: 'Export project file', zh: '导出项目文件' }) }}
+            </UIMenuItem>
+          </UIMenuGroup>
+          <UIMenuGroup :disabled="project == null">
+            <UIMenuItem @click="handleImportFromScratch">
+              <template #icon><img :src="importScratchSvg" /></template>
+              {{ $t({ en: 'Import assets from Scratch file', zh: '从 Scratch 项目文件导入' }) }}
+            </UIMenuItem>
+          </UIMenuGroup>
+          <UIMenuGroup :disabled="project == null || !isOnline">
+            <UIMenuItem @click="handleShareProject">
+              <template #icon><img :src="shareSvg" /></template>
+              {{ $t({ en: 'Share project', zh: '分享项目' }) }}
+            </UIMenuItem>
+            <UIMenuItem
+              v-if="project?.isPublic === IsPublic.public"
+              @click="handleStopSharingProject"
+            >
+              <template #icon><img :src="stopSharingSvg" /></template>
+              {{ $t({ en: 'Stop sharing', zh: '停止分享' }) }}
+            </UIMenuItem>
+          </UIMenuGroup>
+          <UIMenuGroup :disabled="project == null">
+            <UIMenuItem @click="handleRemoveProject">
+              <template #icon><img :src="removeProjectSvg" /></template>
+              {{ $t({ en: 'Remove project', zh: '删除项目' }) }}
+            </UIMenuItem>
+          </UIMenuGroup>
+        </UIMenu>
+      </NavbarDropdown>
+      <NavbarDropdown v-if="project != null">
+        <template #trigger>
+          <UIIcon type="clock" />
+        </template>
+        <UIMenu>
+          <UIMenuItem :disabled="undoAction == null" @click="handleUndo.fn">
+            <template #icon><img :src="undoSvg" /></template>
+            <span class="history-menu-text">{{ $t(undoText) }}</span>
+          </UIMenuItem>
+          <UIMenuItem :disabled="redoAction == null" @click="handleRedo.fn">
+            <template #icon><img :src="redoSvg" /></template>
+            <span class="history-menu-text">{{ $t(redoText) }}</span>
+          </UIMenuItem>
+        </UIMenu>
+      </NavbarDropdown>
+    </template>
+    <template #center>
+      <template v-if="project != null">
+        <div class="project-name">{{ project.name }}</div>
+        <div class="auto-save-state">
+          <UITooltip placement="right">
+            <template #trigger>
+              <div
+                :class="['icon', autoSaveStateIcon.stateClass]"
+                v-html="autoSaveStateIcon.svg"
+              ></div>
+            </template>
+            {{ $t(autoSaveStateIcon.desc) }}
+          </UITooltip>
+        </div>
+      </template>
+    </template>
+  </NavbarWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import saveAs from 'file-saver'
+import {
+  UIMenu,
+  UIMenuGroup,
+  UIMenuItem,
+  UIIcon,
+  UITooltip,
+  useConfirmDialog
+} from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
+import { useI18n, type LocaleMessage } from '@/utils/i18n'
+import { useNetwork } from '@/utils/network'
+import { selectFile } from '@/utils/file'
+import { AutoSaveToCloudState, type Project } from '@/models/project'
+import { IsPublic } from '@/apis/common'
+import { useRemoveProject, useShareProject, useStopSharingProject } from '@/components/project'
+import { useLoadFromScratchModal } from '@/components/asset'
+import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
+import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
+import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
+import NavbarOpenProjectItem from '@/components/navbar/NavbarOpenProjectItem.vue'
+import undoSvg from './icons/undo.svg'
+import redoSvg from './icons/redo.svg'
+import importProjectSvg from './icons/import-project.svg'
+import exportProjectSvg from './icons/export-project.svg'
+import removeProjectSvg from './icons/remove-project.svg'
+import importScratchSvg from './icons/import-scratch.svg'
+import shareSvg from './icons/share.svg'
+import stopSharingSvg from './icons/stop-sharing.svg'
+import offlineSvg from './icons/offline.svg?raw'
+import savingSvg from './icons/saving.svg?raw'
+import failedToSaveSvg from './icons/failed-to-save.svg?raw'
+import cloudCheckSvg from './icons/cloud-check.svg?raw'
+
+const props = defineProps<{
+  project: Project | null
+}>()
+
+const { isOnline } = useNetwork()
+const i18n = useI18n()
+const router = useRouter()
+
+const confirm = useConfirmDialog()
+
+const importProjectFileMessage = { en: 'Import project file', zh: '导入项目文件' }
+
+const handleImportProjectFile = useMessageHandle(
+  async () => {
+    await confirm({
+      title: i18n.t(importProjectFileMessage),
+      content: i18n.t({
+        en: 'Existing content of current project will be replaced with imported content. Are you sure to continue?',
+        zh: '当前项目中的内容将被导入项目文件的内容覆盖，确定继续吗？'
+      }),
+      confirmText: i18n.t({ en: 'Continue', zh: '继续' })
+    })
+    const file = await selectFile({ accept: '.gbp' })
+    const action = { name: importProjectFileMessage }
+    await props.project?.history.doAction(action, () => props.project!.loadGbpFile(file))
+  },
+  { en: 'Failed to import project file', zh: '导入项目文件失败' }
+).fn
+
+const handleExportProjectFile = useMessageHandle(
+  async () => {
+    const gbpFile = await props.project!.exportGbpFile()
+    saveAs(gbpFile, gbpFile.name) // TODO: what if user cancelled download?
+  },
+  { en: 'Failed to export project file', zh: '导出项目文件失败' }
+).fn
+
+const loadFromScratchModal = useLoadFromScratchModal()
+const handleImportFromScratch = useMessageHandle(() => loadFromScratchModal(props.project!), {
+  en: 'Failed to import from Scratch file',
+  zh: '从 Scratch 项目文件导入失败'
+}).fn
+
+const shareProject = useShareProject()
+const handleShareProject = useMessageHandle(() => shareProject(props.project!), {
+  en: 'Failed to share project',
+  zh: '分享项目失败'
+}).fn
+
+const stopSharingProject = useStopSharingProject()
+const handleStopSharingProject = useMessageHandle(
+  () => stopSharingProject(props.project!),
+  { en: 'Failed to stop sharing project', zh: '停止分享项目失败' },
+  { en: 'Project sharing is now stopped', zh: '项目已停止分享' }
+).fn
+
+const removeProject = useRemoveProject()
+const handleRemoveProject = useMessageHandle(
+  async () => {
+    await removeProject(props.project!.owner!, props.project!.name!)
+    router.push('/')
+  },
+  { en: 'Failed to remove project', zh: '删除项目失败' }
+).fn
+
+const undoAction = computed(() => props.project?.history.getUndoAction() ?? null)
+
+const undoText = computed(() => ({
+  en: undoAction.value != null ? `Undo "${undoAction.value.name.en}"` : 'Undo',
+  zh: undoAction.value != null ? `撤销“${undoAction.value.name.zh}”` : '撤销'
+}))
+
+const redoAction = computed(() => props.project?.history.getRedoAction() ?? null)
+
+const redoText = computed(() => ({
+  en: redoAction.value != null ? `Redo "${redoAction.value.name.en}"` : 'Redo',
+  zh: redoAction.value != null ? `重做“${redoAction.value.name.zh}”` : '重做'
+}))
+
+const handleUndo = useMessageHandle(() => props.project!.history.undo(), {
+  en: 'Failed to undo',
+  zh: '撤销操作失败'
+})
+
+const handleRedo = useMessageHandle(() => props.project!.history.redo(), {
+  en: 'Failed to redo',
+  zh: '重做操作失败'
+})
+
+type AutoSaveStateIcon = {
+  svg: string
+  stateClass?: string
+  desc: LocaleMessage
+}
+const autoSaveStateIcon = computed<AutoSaveStateIcon>(() => {
+  if (!isOnline.value)
+    return { svg: offlineSvg, desc: { en: 'No internet connection', zh: '无网络连接' } }
+  switch (props.project?.autoSaveToCloudState) {
+    case AutoSaveToCloudState.Saved:
+      return { svg: cloudCheckSvg, desc: { en: 'Saved', zh: '已保存' } }
+    case AutoSaveToCloudState.Pending:
+      return {
+        svg: savingSvg,
+        stateClass: 'pending',
+        desc: { en: 'Pending save', zh: '待保存' }
+      }
+    case AutoSaveToCloudState.Saving:
+      return { svg: savingSvg, stateClass: 'saving', desc: { en: 'Saving', zh: '保存中' } }
+    case AutoSaveToCloudState.Failed:
+      return { svg: failedToSaveSvg, desc: { en: 'Failed to save', zh: '保存失败' } }
+    default:
+      throw new Error('unknown auto save state')
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.project-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 16px;
+}
+
+.auto-save-state {
+  margin-left: 8px;
+  cursor: pointer;
+
+  .icon {
+    width: 24px;
+    height: 24px;
+
+    :deep(svg) {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.pending :deep(svg) path,
+    &.saving :deep(svg) path {
+      stroke-dasharray: 2;
+    }
+
+    &.saving :deep(svg) path {
+      animation: dash 1s linear infinite;
+
+      @keyframes dash {
+        to {
+          stroke-dashoffset: 24;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/spx-gui/src/components/top-nav/icons/cloud-check.svg b/spx-gui/src/components/editor/navbar/icons/cloud-check.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/cloud-check.svg
rename to spx-gui/src/components/editor/navbar/icons/cloud-check.svg
diff --git a/spx-gui/src/components/top-nav/icons/export-project.svg b/spx-gui/src/components/editor/navbar/icons/export-project.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/export-project.svg
rename to spx-gui/src/components/editor/navbar/icons/export-project.svg
diff --git a/spx-gui/src/components/top-nav/icons/failed-to-save.svg b/spx-gui/src/components/editor/navbar/icons/failed-to-save.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/failed-to-save.svg
rename to spx-gui/src/components/editor/navbar/icons/failed-to-save.svg
diff --git a/spx-gui/src/components/top-nav/icons/import-project.svg b/spx-gui/src/components/editor/navbar/icons/import-project.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/import-project.svg
rename to spx-gui/src/components/editor/navbar/icons/import-project.svg
diff --git a/spx-gui/src/components/top-nav/icons/import-scratch.svg b/spx-gui/src/components/editor/navbar/icons/import-scratch.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/import-scratch.svg
rename to spx-gui/src/components/editor/navbar/icons/import-scratch.svg
diff --git a/spx-gui/src/components/top-nav/icons/offline.svg b/spx-gui/src/components/editor/navbar/icons/offline.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/offline.svg
rename to spx-gui/src/components/editor/navbar/icons/offline.svg
diff --git a/spx-gui/src/components/top-nav/icons/redo.svg b/spx-gui/src/components/editor/navbar/icons/redo.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/redo.svg
rename to spx-gui/src/components/editor/navbar/icons/redo.svg
diff --git a/spx-gui/src/components/top-nav/icons/remove-project.svg b/spx-gui/src/components/editor/navbar/icons/remove-project.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/remove-project.svg
rename to spx-gui/src/components/editor/navbar/icons/remove-project.svg
diff --git a/spx-gui/src/components/top-nav/icons/saving.svg b/spx-gui/src/components/editor/navbar/icons/saving.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/saving.svg
rename to spx-gui/src/components/editor/navbar/icons/saving.svg
diff --git a/spx-gui/src/components/top-nav/icons/share.svg b/spx-gui/src/components/editor/navbar/icons/share.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/share.svg
rename to spx-gui/src/components/editor/navbar/icons/share.svg
diff --git a/spx-gui/src/components/top-nav/icons/stop-sharing.svg b/spx-gui/src/components/editor/navbar/icons/stop-sharing.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/stop-sharing.svg
rename to spx-gui/src/components/editor/navbar/icons/stop-sharing.svg
diff --git a/spx-gui/src/components/top-nav/icons/undo.svg b/spx-gui/src/components/editor/navbar/icons/undo.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/undo.svg
rename to spx-gui/src/components/editor/navbar/icons/undo.svg
diff --git a/spx-gui/src/components/navbar/NavbarDropdown.vue b/spx-gui/src/components/navbar/NavbarDropdown.vue
new file mode 100644
index 000000000..8c270f349
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarDropdown.vue
@@ -0,0 +1,38 @@
+<template>
+  <UIDropdown placement="bottom-start">
+    <template #trigger>
+      <div class="dropdown">
+        <slot name="trigger"></slot>
+        <UIIcon class="icon-arrow" type="arrowDown" />
+      </div>
+    </template>
+    <slot></slot>
+  </UIDropdown>
+</template>
+
+<script setup lang="ts">
+import { UIDropdown, UIIcon } from '@/components/ui'
+</script>
+
+<style lang="scss" scoped>
+.dropdown {
+  // TODO: common style with NavbarLang
+  height: 100%;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--ui-color-primary-600);
+  }
+
+  :deep(.ui-icon) {
+    width: 24px;
+    height: 24px;
+  }
+  .icon-arrow {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/navbar/NavbarLang.vue b/spx-gui/src/components/navbar/NavbarLang.vue
new file mode 100644
index 000000000..d165b80f1
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarLang.vue
@@ -0,0 +1,40 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <UITooltip placement="bottom">
+    <template #trigger>
+      <div class="lang" @click="toggleLang" v-html="langContent"></div>
+    </template>
+    {{ $t({ en: 'English / 中文', zh: '中文 / English' }) }}
+  </UITooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UITooltip } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import enSvg from './icons/en.svg?raw'
+import zhSvg from './icons/zh.svg?raw'
+
+const i18n = useI18n()
+const langContent = computed(() => (i18n.lang.value === 'en' ? enSvg : zhSvg))
+
+function toggleLang() {
+  i18n.setLang(i18n.lang.value === 'en' ? 'zh' : 'en')
+  // Refresh the page to apply the new language for monaco editor
+  location.reload()
+}
+</script>
+
+<style lang="scss" scoped>
+.lang {
+  height: 100%;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--ui-color-primary-600);
+  }
+}
+</style>
diff --git a/spx-gui/src/components/navbar/NavbarLogo.vue b/spx-gui/src/components/navbar/NavbarLogo.vue
new file mode 100644
index 000000000..608c7814c
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarLogo.vue
@@ -0,0 +1,18 @@
+<template>
+  <router-link class="logo" to="/">
+    <img :src="logoSvg" />
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import logoSvg from './logo.svg'
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  height: 100%;
+  margin: 0 20px 0 24px;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/spx-gui/src/components/navbar/NavbarNewProjectItem.vue b/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
new file mode 100644
index 000000000..ef9940021
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <UIMenuItem @click="handleNewProject">
+    <template #icon><img :src="newSvg" /></template>
+    {{ $t({ en: 'New project', zh: '新建项目' }) }}
+  </UIMenuItem>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { getProjectEditorRoute } from '@/router'
+import { UIMenuItem } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
+import { useCreateProject } from '@/components/project'
+import newSvg from './icons/new.svg'
+
+const router = useRouter()
+const createProject = useCreateProject()
+const handleNewProject = useMessageHandle(
+  async () => {
+    const { name } = await createProject()
+    router.push(getProjectEditorRoute(name))
+  },
+  { en: 'Failed to create new project', zh: '新建项目失败' }
+).fn
+</script>
diff --git a/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue b/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue
new file mode 100644
index 000000000..3722dc09d
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarOpenProjectItem.vue
@@ -0,0 +1,19 @@
+<template>
+  <UIMenuItem @click="handleOpenProject">
+    <template #icon><img :src="openSvg" /></template>
+    {{ $t({ en: 'Open project...', zh: '打开项目...' }) }}
+  </UIMenuItem>
+</template>
+
+<script setup lang="ts">
+import { UIMenuItem } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
+import { useOpenProject } from '@/components/project'
+import openSvg from './icons/open.svg'
+
+const openProject = useOpenProject()
+const handleOpenProject = useMessageHandle(openProject, {
+  en: 'Failed to open project',
+  zh: '打开项目失败'
+}).fn
+</script>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
new file mode 100644
index 000000000..88f673f44
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -0,0 +1,63 @@
+<template>
+  <div v-if="!userStore.userInfo" class="sign-in">
+    <UIButton :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
+      $t({ en: 'Sign in', zh: '登录' })
+    }}</UIButton>
+  </div>
+  <UIDropdown v-else placement="bottom-end">
+    <template #trigger>
+      <div class="avatar">
+        <img class="avatar-img" :src="userStore.userInfo.avatar" />
+      </div>
+    </template>
+    <UIMenu class="user-menu">
+      <UIMenuGroup>
+        <UIMenuItem :interactive="false">
+          {{ userStore.userInfo.displayName || userStore.userInfo.name }}
+        </UIMenuItem>
+      </UIMenuGroup>
+      <UIMenuGroup>
+        <UIMenuItem @click="userStore.signOut()">{{
+          $t({ en: 'Sign out', zh: '登出' })
+        }}</UIMenuItem>
+      </UIMenuGroup>
+    </UIMenu>
+  </UIDropdown>
+</template>
+
+<script setup lang="ts">
+import { UIButton, UIDropdown, UIMenu, UIMenuGroup, UIMenuItem } from '@/components/ui'
+import { useNetwork } from '@/utils/network'
+import { useUserStore } from '@/stores'
+
+const userStore = useUserStore()
+const { isOnline } = useNetwork()
+</script>
+
+<style lang="scss" scoped>
+.sign-in,
+.avatar {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  margin-right: 8px;
+  padding: 0 24px;
+
+  &:hover {
+    background-color: var(--ui-color-primary-600);
+  }
+
+  .avatar-img {
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+  }
+}
+
+.user-menu {
+  min-width: 120px;
+}
+</style>
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
new file mode 100644
index 000000000..797a5bf86
--- /dev/null
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -0,0 +1,88 @@
+<template>
+  <nav class="top-nav">
+    <div class="content" :class="{ centered }">
+      <div class="left">
+        <NavbarLogo />
+        <slot name="left"></slot>
+        <NavbarLang />
+      </div>
+      <div class="center">
+        <slot name="center"></slot>
+      </div>
+      <div class="right">
+        <slot name="right"></slot>
+        <NavbarProfile />
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import NavbarLogo from './NavbarLogo.vue'
+import NavbarLang from './NavbarLang.vue'
+import NavbarProfile from './NavbarProfile.vue'
+
+withDefaults(
+  defineProps<{
+    /**
+     * Whether the navbar content should be centered (to keep consistent with the page content). Typically,
+     * - We stretch the navbar content to full width for editor pages
+     * - We center the navbar content for community pages
+     */
+    centered?: boolean
+  }>(),
+  {
+    centered: false
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@import '@/components/ui/responsive';
+
+.top-nav {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  color: var(--ui-color-grey-100);
+  background-color: var(--ui-color-primary-main);
+  background-position: center;
+  background-repeat: repeat;
+  background-image: url(./bg.svg);
+  box-shadow: var(--ui-box-shadow-diffusion);
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 12px;
+  height: 50px;
+
+  &.centered {
+    width: 1220px;
+    @include responsive(desktop-large) {
+      width: 1480px;
+    }
+  }
+}
+
+.left,
+.right {
+  flex-basis: 30%;
+  display: flex;
+}
+
+.center {
+  flex-basis: 40%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.right {
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/top-nav/TopNav.vue b/spx-gui/src/components/navbar/TopNav.vue
similarity index 100%
rename from spx-gui/src/components/top-nav/TopNav.vue
rename to spx-gui/src/components/navbar/TopNav.vue
diff --git a/spx-gui/src/components/top-nav/bg.svg b/spx-gui/src/components/navbar/bg.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/bg.svg
rename to spx-gui/src/components/navbar/bg.svg
diff --git a/spx-gui/src/components/top-nav/icons/en.svg b/spx-gui/src/components/navbar/icons/en.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/en.svg
rename to spx-gui/src/components/navbar/icons/en.svg
diff --git a/spx-gui/src/components/top-nav/icons/new.svg b/spx-gui/src/components/navbar/icons/new.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/new.svg
rename to spx-gui/src/components/navbar/icons/new.svg
diff --git a/spx-gui/src/components/top-nav/icons/open.svg b/spx-gui/src/components/navbar/icons/open.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/open.svg
rename to spx-gui/src/components/navbar/icons/open.svg
diff --git a/spx-gui/src/components/top-nav/icons/zh.svg b/spx-gui/src/components/navbar/icons/zh.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/icons/zh.svg
rename to spx-gui/src/components/navbar/icons/zh.svg
diff --git a/spx-gui/src/components/top-nav/logo.svg b/spx-gui/src/components/navbar/logo.svg
similarity index 100%
rename from spx-gui/src/components/top-nav/logo.svg
rename to spx-gui/src/components/navbar/logo.svg
diff --git a/spx-gui/src/components/ui/responsive.scss b/spx-gui/src/components/ui/responsive.scss
new file mode 100644
index 000000000..7e9b4c28b
--- /dev/null
+++ b/spx-gui/src/components/ui/responsive.scss
@@ -0,0 +1,21 @@
+// definition for responsive mixin
+
+@mixin responsive($size) {
+  @if $size == mobile {
+    @media (max-width: 767px) {
+      @content;
+    }
+  } @else if $size == tablet {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $size == desktop {
+    @media (min-width: 1280px) {
+      @content;
+    }
+  } @else if $size == desktop-large {
+    @media (min-width: 1680px) {
+      @content;
+    }
+  }
+}
diff --git a/spx-gui/src/pages/community/index.vue b/spx-gui/src/pages/community/index.vue
index 64252668c..343079e45 100644
--- a/spx-gui/src/pages/community/index.vue
+++ b/spx-gui/src/pages/community/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="wrapper">
-    <TopNav></TopNav>
+    <CommunityNavbar></CommunityNavbar>
     <router-view />
   </div>
 </template>
 
 <script setup lang="ts">
-import TopNav from '@/components/community/TopNav.vue'
+import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 </script>
 
 <style lang="scss" scoped>
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 96a3607cd..4d37363cf 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="editor-home">
     <header class="editor-header">
-      <TopNav :project="project" />
+      <EditorNavbar :project="project" />
     </header>
     <main v-if="userStore.userInfo" :class="['editor-main', { 'in-homepage': !projectName }]">
       <template v-if="projectName">
@@ -57,7 +57,7 @@ import {
 } from '@/components/ui'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
-import TopNav from '@/components/top-nav/TopNav.vue'
+import EditorNavbar from '@/components/editor/navbar/EditorNavbar.vue'
 import EditorContextProvider from '@/components/editor/EditorContextProvider.vue'
 import ProjectEditor from '@/components/editor/ProjectEditor.vue'
 import ProjectList from '@/components/project/ProjectList.vue'
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index c0e814dae..c3c167db6 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -21,6 +21,10 @@ export function getProjectShareRoute(owner: string, name: string) {
   return getProjectPageRoute(owner, name)
 }
 
+export function getProjectsRoute(keyword: string = '') {
+  return keyword !== '' ? `/projects?keyword=${encodeURIComponent(keyword)}` : '/projects'
+}
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',