Edit nav menus style

Author: emscb

src/components/Nav/index.tsx

@@ -48,6 +48,7 @@ const Nav = () => {
                 ))}
               </SubMenus>
             )}
+            <span className="separator" />
           </Menu>
         ))}
       </div>
@@ -68,7 +69,7 @@ const Container = styled.div`
 const SubMenus = styled.div`
   display: none;
   position: absolute;
-  top: 1.5rem;
+  top: 90%;
 
   background-color: #141414;
 
@@ -101,20 +102,6 @@ const Menu = styled.div`
   cursor: pointer;
   user-select: none;
 
-  @media only screen and (min-width: 810px) {
-    padding: 0 0.5rem;
-    height: 1rem;
-    & + & {
-      border-left: 1px solid;
-    }
-    &:first-of-type {
-      padding-left: 0;
-    }
-    &:last-of-type {
-      padding-right: 0;
-    }
-  }
-
   &:hover {
     color: #b0a8fe;
     & > ${SubMenus} {

src/components/common/Page/style.scss

@@ -195,6 +195,12 @@ body {
         }
       }
     }
+    & > span.separator {
+      display: none;
+      height: 1rem;
+      border-left: 1px solid;
+      margin: 0 0.5rem;
+    }
   }
 }
 
@@ -410,15 +416,32 @@ body {
 
     & > .menu-item {
       border: none;
+      flex-direction: row;
 
       & > span {
         border-bottom: none;
+        width: unset;
+      }
+
+      & > span.separator {
+        display: block;
+      }
+
+      &:last-of-type > span.separator {
+        display: none;
       }
 
       &:hover {
         & > .sub-menu {
           position: absolute;
           width: max-content;
+          transform: translateX(-0.5rem);
+        }
+      }
+
+      &:last-of-type:hover {
+        & > .sub-menu {
+          transform: none;
         }
       }