ui components updates

src/components/Menu/index.tsx

@@ -8,18 +8,16 @@ import { ActiveLink } from "./ActiveLink"
 
 let cx = classnames.bind(s)
 
-export type MenuLayout = "desktop" | "mobile"
-
 export type MenuProps = {
-    layout: MenuLayout
+    vertical?: boolean
     items: IMenu[]
 }
 
-export const Menu: React.FC<MenuProps> = ({ layout, items }) => {
+export const Menu: React.FC<MenuProps> = ({ vertical = false, items }) => {
     const router = useRouter()
     return (
         <NavigationMenu.Root>
-            <NavigationMenu.List className={cx(s.menu, layout)}>
+            <NavigationMenu.List className={cx(s.menu, { vertical })}>
                 {
                     items.map(item => {
                         const current = router.asPath === item.href

src/components/Menu/styles.module.css

@@ -8,16 +8,11 @@
     font-size: var(--font-size-second);
     list-style: none;
 
-    padding: var(--size-s);
-}
-
-/* MENU LAYOUT */
-
-.desktop {
+    /* NOT VERTICAL */
     flex-direction: row;
 }
 
-.mobile {
+.vertical {
     flex-direction: column;
 }
 
@@ -27,7 +22,7 @@
     user-select: none;
     background-color: var(--color-back-main);
     border-radius: var(--size-s);
-    transition: box-shadow 200ms ease-in;
+    transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
     padding: var(--size-s) var(--size-s);
 }
 
@@ -48,3 +43,11 @@
     text-decoration: none;
     color: var(--color-text);
 }
+
+/* DARK THEME */
+@media (prefers-color-scheme: dark) {
+    .menuItem.active:hover {
+        box-shadow: none;
+        background-color: var(--color-back);
+    }
+}