css

Author: laoshanxi

.github/workflows/build-push-appmesh-ui-image.yml

@@ -1,15 +1,12 @@
 name: Build docker image and publish
 
 on:
-  # trigger when code changes
   push:
     branches:
       - main
 
 env:
-  # Use docker.io for Docker Hub if empty
   REGISTRY: docker.io
-  # github.repository as <account>/<repo>
   IMAGE_NAME: laoshanxi/appmesh-ui
   APPMESH_VERSION: "2.1.2"
 
@@ -19,38 +16,25 @@ jobs:
     permissions:
       contents: read
       packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
       id-token: write
 
     steps:
       - name: Checkout Github code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      # Workaround: https://github.com/docker/build-push-action/issues/461
+      # Updated to the latest stable version
       - name: Setup Docker buildx
-        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf
+        uses: docker/setup-buildx-action@v3
 
-      # https://github.com/docker/login-action
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: Dockerfile
@@ -59,4 +43,3 @@ jobs:
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.APPMESH_VERSION }}
-          labels: ${{ steps.meta.outputs.labels }}

src/layout/components/Navbar.vue

@@ -5,19 +5,14 @@
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-menu">
-      <el-switch v-model="forwardEnabled" active-text="Forward to:" inactive-text="" @change="handleSwitchChange" />
-      <el-autocomplete
-        v-model="forward" class="inline-input" style="width:140px"
-        :fetch-suggestions="querySearch"
-      ></el-autocomplete>
-
-
-      <el-button
-        icon="el-icon-refresh" type="text" :loading="loading" title="Refresh" style="margin-right:10px;font-size:18px;font-weight: bold !important;"
-        @click="refresh()"
-      >
+      <el-button icon="el-icon-refresh" type="text" acti :loading="loading" title="Refresh"
+        style="margin-right:10px;font-size:18px;font-weight: bold !important;" @click="refresh()">
       </el-button>
 
+      <el-switch v-model="forwardEnabled" active-text="Forward to:" inactive-text="" @change="handleSwitchChange" />
+      <el-autocomplete v-model="forward" class="inline-input" style="width:140px"
+        :fetch-suggestions="querySearch"></el-autocomplete>
+
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
           <!-- <div><img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"><span class="UserName-avatar">{{name}}</span></div> -->

src/styles/sidebar.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use './variables.scss' as *;
 
 #app {
@@ -63,6 +64,8 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: $menuBg;
+      color: $menuText !important;
     }
 
     // menu hover
@@ -86,6 +89,86 @@
         background-color: $subMenuHover !important;
       }
     }
+
+    .el-submenu {
+      &__title {
+        &:hover {
+          background-color: $menuHover !important;
+        }
+      }
+
+      .el-menu-item {
+        min-width: $sideBarWidth !important;
+        background-color: $subMenuBg !important;
+
+        &:hover, &.is-active {
+          background-color: $subMenuHover !important;
+        }
+      }
+
+      // Fix submenu container background color
+      .el-menu {
+        background-color: $subMenuBg !important;
+        padding: 0 !important;
+        margin: 0 !important;
+      }
+
+      // Fix submenu item styles
+      .el-menu-item {
+        margin: 0 !important;
+        padding-left: 48px !important;
+        height: 50px !important;
+        line-height: 50px !important;
+        background-color: $subMenuBg !important;
+
+        &:hover {
+          background-color: $subMenuHover !important;
+        }
+
+        &.is-active {
+          background-color: $menuHover !important;
+          color: $menuActiveText !important;
+        }
+      }
+
+      // Fix submenu title styles
+      .el-submenu__title {
+        margin: 0 !important;
+        padding: 0 20px !important;
+        height: 50px !important;
+        line-height: 50px !important;
+      }
+    }
+
+    // Set default colors for all menu items
+    .el-menu-item,
+    .el-submenu__title {
+      color: $menuText !important;
+
+      &:hover {
+        background-color: $menuHover !important;
+      }
+
+      &.is-active {
+        color: $menuActiveText !important;
+      }
+    }
+
+    // Fix submenu colors
+    .el-submenu {
+      .el-menu-item {
+        color: $menuText !important;
+
+        &:hover {
+          background-color: $subMenuHover !important;
+        }
+
+        &.is-active {
+          color: $menuActiveText !important;
+          background-color: $menuHover !important;
+        }
+      }
+    }
   }
 
   .hideSidebar {

src/styles/variables.scss

@@ -11,6 +11,18 @@ $subMenuHover:#001528;
 
 $sideBarWidth: 210px;
 
+// define theme colors using CSS variables
+:root {
+  --menu-text: #{$menuText};
+  --menu-active: #{$menuActiveText};
+  --submenu-active: #{$subMenuActiveText};
+  --menu-bg: #{$menuBg};
+  --menu-hover: #{$menuHover};
+  --submenu-bg: #{$subMenuBg};
+  --submenu-hover: #{$subMenuHover};
+  --sidebar-width: #{$sideBarWidth};
+}
+
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
@@ -22,4 +34,5 @@ $sideBarWidth: 210px;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
+  cssVars: true; // mark using CSS variables
 }