ui components updates

src/components/Block/index.tsx

@@ -1,21 +1,24 @@
 import s from "./styles.module.css"
 
-import cx from "classnames"
+import classnames from "classnames/bind"
 import { createElement } from "react"
 
+const cx = classnames.bind(s)
+
 export type BlockProps = {
     as?: keyof HTMLElementTagNameMap
     style?: React.CSSProperties
     direction: "horizontal" | "vertical"
     children?: React.ReactNode
+    align?: boolean
 }
 
-export const Block: React.FC<BlockProps> = ({ as = "div", style, direction, ...props }) => {
+export const Block: React.FC<BlockProps> = ({ as = "div", align = false, style, direction, ...props }) => {
     const directionClass = direction === "horizontal"
         ? s.horizontal
         : s.vertical
     const newProps = {
-        className: cx(s.block, directionClass),
+        className: cx(s.block, directionClass, { align }),
         style,
     }
 

src/components/Block/styles.module.css

@@ -5,6 +5,10 @@
     justify-content: flex-start;
 }
 
+.block.align {
+    align-items: center;
+}
+
 .horizontal {
     flex-direction: row;
 }

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);
+    }
+}

src/components/MenuToggle/index.tsx

@@ -1,7 +1,5 @@
-import s from "./styles.module.css"
-
-import cx from "classnames"
 import { Button } from "@/ui/Button"
+import { HamburgerMenuIcon, Cross1Icon } from "@radix-ui/react-icons"
 
 export interface IMenuToggleProps {
     style?: React.CSSProperties
@@ -16,12 +14,11 @@ export const MenuToggle: React.FC<IMenuToggleProps> = props => {
             style={props.style}
             theme={"icon"}
         >
-            <div
-                className={cx(s.toggle, {
-                    [s.open]: props.open,
-                    [s.close]: !props.open,
-                })}
-            />
+            {props.open ? (
+                <Cross1Icon width={24} height={24} />
+            ) : (
+                <HamburgerMenuIcon width={24} height={24} />
+            )}
         </Button>
     )
 }

src/components/MenuToggle/styles.module.css

@@ -1,14 +0,0 @@
-.toggle {
-    --s: 32px;
-    width: var(--s);
-    height: var(--s);
-    background-size: var(--s);
-}
-
-.toggle.open {
-    background-image: url(/static/graphics/hmenu-close-b.png);
-}
-
-.toggle.close {
-    background-image: url(/static/graphics/hmenu-b.png);
-}

src/components/Navigation/index.tsx

@@ -17,15 +17,6 @@ export const Navigation: React.FC<NavigationProps> = props => {
     const [open, toggleOpen] = useToggle(false)
     const { menu } = useContext(ConfigContext)
 
-    if (!collapseMenu) {
-        return (
-            <Menu
-                layout={"desktop"}
-                items={menu}
-            />
-        )
-    }
-
     return (
         <>
             <Overlay
@@ -33,8 +24,36 @@ export const Navigation: React.FC<NavigationProps> = props => {
                 onClickOverlay={toggleOpen}
                 duration={250}
             >
-                <Block direction={"horizontal"}>
+                <Block direction={"horizontal"} align style={{
+                    padding: "var(--size-s)",
+                }}>
                     <Spacer />
+                    <MenuToggle
+                        open={open}
+                        onClick={toggleOpen}
+                    />
+                </Block>
+                <Block direction={"horizontal"} style={{
+                    justifyContent: "center",
+                }}>
+                    <Menu vertical
+                        items={menu}
+                    />
+                </Block>
+            </Overlay>
+
+            <Block direction={"horizontal"} align style={{
+                padding: "var(--size-s)",
+            }}>
+                {collapseMenu ? null : (
+                    <Menu
+                        items={menu}
+                    />
+                )}
+
+                <Spacer />
+
+                {!collapseMenu ? null : (
                     <MenuToggle
                         open={open}
                         onClick={toggleOpen}
@@ -42,30 +61,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                             margin: "var(--size-xs)",
                         }}
                     />
-                </Block>
-                <Block direction={"horizontal"} style={{
-                    justifyContent: "center",
-                }}>
-                    <nav style={{
-                        width: "75%",
-                    }}>
-                        <Menu
-                            layout={"mobile"}
-                            items={menu}
-                        />
-                    </nav>
-                </Block>
-            </Overlay>
-
-            <Block direction={"horizontal"}>
-                <Spacer />
-                <MenuToggle
-                    open={open}
-                    onClick={toggleOpen}
-                    style={{
-                        margin: "var(--size-xs)",
-                    }}
-                />
+                )}
             </Block>
         </>
     )