fix(theme): nav close icon not working correctly (#744)

src/client/theme-default/components/VPDoc.vue

@@ -169,24 +169,4 @@ const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
   margin: 0 auto;
   max-width: 688px;
 }
-
-.edit-link {
-  margin: 0 0 32px;
-}
-
-.edit-link .vt-link {
-  font-size: 14px;
-  color: var(--vt-c-brand);
-  font-weight: 500;
-}
-
-.vt-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--vt-c-brand);
-  display: inline-block;
-  margin-right: 8px;
-  position: relative;
-  top: -1px;
-}
 </style>

src/client/theme-default/components/VPNavBar.vue

@@ -48,7 +48,6 @@ const { hasSidebar } = useSidebar()
   border-bottom: 1px solid var(--vp-c-divider-light);
   padding: 0 8px 0 24px;
   height: var(--vp-nav-height-mobile);
-  background-color: var(--vt-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
 }
 

src/client/theme-default/components/VPNavBarHamburger.vue

@@ -48,18 +48,18 @@ defineEmits<{
   overflow: hidden;
 }
 
-.container:hover .top    { top: 0; left: 0; transform: translateX(4px); }
-.container:hover .middle { top: 6; left: 0; transform: translateX(0); }
-.container:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
+.VPNavBarHamburger:hover .middle { top: 6; left: 0; transform: translateX(0); }
+.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
 
-.container.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
-.container.active .middle { top: 6px; transform: translateX(16px); }
-.container.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+.VPNavBarHamburger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
+.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
+.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
 
-.container.active:hover .top,
-.container.active:hover .middle,
-.container.active:hover .bottom {
-  background-color: var(--vt-c-text-2);
+.VPNavBarHamburger.active:hover .top,
+.VPNavBarHamburger.active:hover .middle,
+.VPNavBarHamburger.active:hover .bottom {
+  background-color: var(--vp-c-text-2);
   transition: top .25s, background-color .25s, transform .25s;
 }