npm - @umituz/web-design-system - Versions diffs - 2.7.0 → 2.7.1 - Mend

@umituz/web-design-system 2.7.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/src/presentation/organisms/MainNavbar.tsx +69 -58

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/presentation/organisms/MainNavbar.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import { useState, useEffect, useRef, useMemo } from 'react';
 // @ts-ignore - react-router-dom is a peer dependency, may not be available during package build
 import { Link, useLocation } from 'react-router-dom';
 import React from 'react';
+import { Show, Hide } from '../atoms';
 import type { BaseProps } from '../../domain/types';
 export interface NavItem {
@@ -92,33 +93,36 @@ export const MainNavbar = ({
           </Link>
           {/* Desktop Menu */}
-          <div className="hidden lg:flex items-center space-x-6">
-            {navItemsMemo.map((item) => {
-              const isActive = location.pathname === item.path;
-              return (
-                <Link
-                  key={item.path}
-                  to={item.path}
-                  className={`font-medium transition-colors transition-theme ${
-                    isActive ? 'text-primary-light' : 'text-text-secondary hover:text-primary-light'
-                  }`}
-                >
-                  {item.name}
-                </Link>
-              );
-            })}
-          </div>
+          <Show above="lg">
+            <div className="flex items-center space-x-6">
+              {navItemsMemo.map((item) => {
+                const isActive = location.pathname === item.path;
+                return (
+                  <Link
+                    key={item.path}
+                    to={item.path}
+                    className={`font-medium transition-colors transition-theme ${
+                      isActive ? 'text-primary-light' : 'text-text-secondary hover:text-primary-light'
+                    }`}
+                  >
+                    {item.name}
+                  </Link>
+                );
+              })}
+            </div>
+          </Show>
           {/* Actions */}
           <div className="flex items-center gap-2 md:gap-3">
             {/* Language Selector */}
-            <div className="relative" ref={langDropdownRef}>
-              <button
-                onClick={() => setIsLangOpen(!isLangOpen)}
-                className="p-2 rounded-lg bg-bg-secondary text-text-secondary hover:text-primary-light border border-border hover:border-primary-light transition-all transition-theme hidden lg:block"
-                title={translations.language}
-                type="button"
-              >
+            <Show above="lg">
+              <div className="relative" ref={langDropdownRef}>
+                <button
+                  onClick={() => setIsLangOpen(!isLangOpen)}
+                  className="p-2 rounded-lg bg-bg-secondary text-text-secondary hover:text-primary-light border border-border hover:border-primary-light transition-all transition-theme"
+                  title={translations.language}
+                  type="button"
+                >
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <path d="m5 8 6 6" />
                   <path d="m4 14 6-6 2-3" />
@@ -152,7 +156,8 @@ export const MainNavbar = ({
                   ))}
                 </div>
               )}
-            </div>
+              </div>
+            </Show>
             {/* Theme Toggle */}
             <button
@@ -182,46 +187,51 @@ export const MainNavbar = ({
             </button>
             {/* GitHub */}
-            {githubUrl && (
-              <a
-                href={githubUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hidden lg:flex items-center gap-2 px-4 py-2 bg-bg-secondary text-text-secondary rounded-lg border border-border hover:border-primary-light hover:text-text-primary transition-all transition-theme"
-              >
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
-                <span className="font-medium">{githubLabel}</span>
-              </a>
-            )}
+            <Show above="lg">
+              {githubUrl && (
+                <a
+                  href={githubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 px-4 py-2 bg-bg-secondary text-text-secondary rounded-lg border border-border hover:border-primary-light hover:text-text-primary transition-all transition-theme"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                  </svg>
+                  <span className="font-medium">{githubLabel}</span>
+                </a>
+              )}
+            </Show>
             {/* Mobile Button */}
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="lg:hidden text-text-secondary flex"
-              type="button"
-              aria-label="Toggle menu"
-            >
-              {isOpen ? (
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              ) : (
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="4" x2="20" y1="12" y2="12" />
-                  <line x1="4" x2="20" y1="6" y2="6" />
-                  <line x1="4" x2="20" y1="18" y2="18" />
-                </svg>
-              )}
-            </button>
+            <Hide above="lg">
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="text-text-secondary flex"
+                type="button"
+                aria-label="Toggle menu"
+              >
+                {isOpen ? (
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M18 6L6 18M6 6l12 12" />
+                  </svg>
+                ) : (
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="4" x2="20" y1="12" y2="12" />
+                    <line x1="4" x2="20" y1="6" y2="6" />
+                    <line x1="4" x2="20" y1="18" y2="18" />
+                  </svg>
+                )}
+              </button>
+            </Hide>
           </div>
         </div>
       </div>
       {/* Mobile Menu */}
-      {isOpen && (
-        <div className="lg:hidden bg-bg-secondary border-t border-border transition-theme">
+      <Hide above="lg">
+        {isOpen && (
+          <div className="bg-bg-secondary border-t border-border transition-theme">
           <div className="px-4 py-4 space-y-2">
             {/* Theme Toggle Mobile */}
             <button
@@ -302,7 +312,8 @@ export const MainNavbar = ({
             )}
           </div>
         </div>
-      )}
+        )}
+      </Hide>
     </nav>
   );
 };