style: change side navigation menu style

style: change some theme color

frontend/src/AppContent.vue

@@ -4,7 +4,7 @@ import BrowserPane from './components/sidebar/BrowserPane.vue'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { debounce, get } from 'lodash'
 import { useThemeVars } from 'naive-ui'
-import NavMenu from './components/sidebar/NavMenu.vue'
+import Ribbon from './components/sidebar/Ribbon.vue'
 import ConnectionPane from './components/sidebar/ConnectionPane.vue'
 import ContentServerPane from './components/content/ContentServerPane.vue'
 import useTabStore from './stores/tab.js'
@@ -25,7 +25,7 @@ const props = defineProps({
 })
 
 const data = reactive({
-    navMenuWidth: 60,
+    navMenuWidth: 50,
     toolbarHeight: 38,
 })
 
@@ -163,7 +163,7 @@ onMounted(async () => {
                 :style="prefStore.generalFont"
                 class="flex-box-h flex-item-expand"
                 style="--wails-draggable: none">
-                <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
+                <ribbon v-model:value="tabStore.nav" :width="data.navMenuWidth" />
                 <!-- browser page -->
                 <div v-show="tabStore.nav === 'browser'" class="content-area flex-box-h flex-item-expand">
                     <resizeable-wrapper

frontend/src/components/content/ContentLogPane.vue

@@ -2,7 +2,7 @@
 import { computed, h, nextTick, reactive, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import { map, size, uniqBy } from 'lodash'
+import { map, size, split, uniqBy } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Delete from '@/components/icons/Delete.vue'
 import dayjs from 'dayjs'
@@ -107,7 +107,7 @@ defineExpose({
                         width: 180,
                         align: 'center',
                         titleAlign: 'center',
-                        render({ timestamp }, index) {
+                        render: ({ timestamp }, index) => {
                             return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
                         },
                     },
@@ -115,7 +115,7 @@ defineExpose({
                         title: $t('log.server'),
                         key: 'server',
                         filterOptionValue: data.server,
-                        filter(value, row) {
+                        filter: (value, row) => {
                             return value === '' || row.server === value.toString()
                         },
                         width: 150,
@@ -129,10 +129,10 @@ defineExpose({
                         titleAlign: 'center',
                         filterOptionValue: data.keyword,
                         resizable: true,
-                        filter(value, row) {
+                        filter: (value, row) => {
                             return value === '' || !!~row.cmd.indexOf(value.toString())
                         },
-                        render({ cmd }, index) {
+                        render: ({ cmd }, index) => {
                             const cmdList = split(cmd, '\n')
                             if (size(cmdList) > 1) {
                                 return h(
@@ -150,7 +150,7 @@ defineExpose({
                         width: 100,
                         align: 'center',
                         titleAlign: 'center',
-                        render({ cost }, index) {
+                        render: ({ cost }, index) => {
                             const ms = dayjs.duration(cost).asMilliseconds()
                             if (ms < 1000) {
                                 return `${ms} ms`

frontend/src/components/content_value/ContentSlog.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
 import Refresh from '@/components/icons/Refresh.vue'
-import { debounce, isEmpty, map, size } from 'lodash'
+import { debounce, isEmpty, map, size, split } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import { useThemeVars } from 'naive-ui'
+import dayjs from 'dayjs'
 import useBrowserStore from 'stores/browser.js'
 
 const themeVars = useThemeVars()

frontend/src/components/sidebar/Ribbon.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:value'])
 
-const iconSize = computed(() => Math.floor(props.width * 0.4))
+const iconSize = computed(() => Math.floor(props.width * 0.45))
 const renderIcon = (icon) => {
     return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
 }
@@ -41,18 +41,18 @@ const menuOptions = computed(() => {
         {
             label: i18n.t('ribbon.browser'),
             key: 'browser',
-            icon: renderIcon(Database),
+            icon: Database,
             show: browserStore.anyConnectionOpened,
         },
         {
             label: i18n.t('ribbon.server'),
             key: 'server',
-            icon: renderIcon(Server),
+            icon: Server,
         },
         {
             label: i18n.t('ribbon.log'),
             key: 'log',
-            icon: renderIcon(Record),
+            icon: Record,
         },
     ]
 })
@@ -115,18 +115,30 @@ const exThemeVars = computed(() => {
 
 <template>
     <div
-        id="app-nav-menu"
+        id="app-ribbon"
         :style="{
             width: props.width + 'px',
+            minWidth: props.width + 'px',
         }"
         class="flex-box-v">
-        <n-menu
-            :collapsed="true"
-            :collapsed-icon-size="iconSize"
-            :collapsed-width="props.width"
-            :options="menuOptions"
-            :value="props.value"
-            @update:value="(val) => emit('update:value', val)" />
+        <div class="ribbon-wrapper flex-box-v">
+            <div
+                v-for="(m, i) in menuOptions"
+                v-show="m.show !== false"
+                :key="i"
+                :class="{ 'ribbon-item-active': props.value === m.key }"
+                class="ribbon-item clickable"
+                @click="emit('update:value', m.key)">
+                <n-tooltip :delay="2" :show-arrow="false" placement="right">
+                    <template #trigger>
+                        <n-icon :size="iconSize">
+                            <component :is="m.icon" :stroke-width="3.5"></component>
+                        </n-icon>
+                    </template>
+                    {{ m.label }}
+                </n-tooltip>
+            </div>
+        </div>
         <div class="flex-item-expand"></div>
         <div class="nav-menu-item flex-box-v">
             <n-dropdown
@@ -142,11 +154,69 @@ const exThemeVars = computed(() => {
 </template>
 
 <style lang="scss">
-#app-nav-menu {
+#app-ribbon {
     //height: 100vh;
     border-right: v-bind('exThemeVars.splitColor') solid 1px;
-    background-color: v-bind('exThemeVars.sidebarColor');
+    background-color: v-bind('exThemeVars.ribbonColor');
     box-sizing: border-box;
+    color: v-bind('themeVars.textColor2');
+
+    .ribbon-wrapper {
+        gap: 2px;
+        margin-top: 5px;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        padding-right: 3px;
+
+        .ribbon-item {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 1;
+            color: v-bind('themeVars.textColor3');
+            //border-left: 5px solid #000;
+            border-radius: v-bind('themeVars.borderRadius');
+            padding: 8px 0;
+            position: relative;
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+                color: v-bind('themeVars.primaryColor');
+
+                &:before {
+                    position: absolute;
+                    width: 3px;
+                    left: 0;
+                    top: 24%;
+                    bottom: 24%;
+                    border-radius: 9999px;
+                    content: '';
+                    background-color: v-bind('themeVars.primaryColor');
+                }
+            }
+        }
+
+        .ribbon-item-active {
+            //background-color: v-bind('exThemeVars.ribbonActiveColor');
+            color: v-bind('themeVars.primaryColor');
+
+            &:hover {
+                color: v-bind('themeVars.primaryColor') !important;
+            }
+
+            &:before {
+                position: absolute;
+                width: 3px;
+                left: 0;
+                top: 24%;
+                bottom: 24%;
+                border-radius: 9999px;
+                content: '';
+                background-color: v-bind('themeVars.primaryColor');
+            }
+        }
+    }
 
     .nav-menu-item {
         align-items: center;

frontend/src/utils/extra_theme.js

@@ -11,7 +11,9 @@
  */
 export const extraLightTheme = {
     titleColor: '#F2F2F2',
-    sidebarColor: '#E9E9E9',
+    ribbonColor: '#F9F9F9',
+    ribbonActiveColor: '#E3E3E3',
+    sidebarColor: '#F2F2F2',
     splitColor: '#DADADA',
 }
 
@@ -20,7 +22,9 @@ export const extraLightTheme = {
  * @type ExtraTheme
  */
 export const extraDarkTheme = {
-    titleColor: '#363636',
+    titleColor: '#262626',
+    ribbonColor: '#2C2C2C',
+    ribbonActiveColor: '#363636',
     sidebarColor: '#262626',
     splitColor: '#474747',
 }

frontend/src/utils/theme.js

@@ -33,6 +33,9 @@ export const themeOverrides = {
         tabGapLargeCard: '2px',
         tabFontWeightActive: 450,
     },
+    Card: {
+        colorEmbedded: '#FAFAFA',
+    },
     Form: {
         labelFontSizeTopSmall: '12px',
         labelFontSizeTopMedium: '13px',
@@ -77,7 +80,7 @@ const _darkThemeOverrides = {
         nodeTextColor: '#CECED0',
     },
     Card: {
-        colorEmbedded: '#18181C',
+        colorEmbedded: '#212121',
     },
     Dropdown: {
         color: '#272727',