fmihel-windeco-components 2.0.0-beta.6 → 2.0.0-beta.7

package/jsx/NavBar/NavItem.jsx

@@ -1,45 +1,50 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Collapse from '../Collapse.jsx';
 
-export function isNavItem(o) {
-    return typeof o === 'function' && (o.name === 'NavItem' || o._originalClass === 'NavItem');
-}
 function NavItem({
-    caption = undefined,
-    link,
-    className = NavItem.global.className,
-    addClass = NavItem.global.addClass,
-    style = NavItem.global.style,
-    onClick = undefined,
+    id,
+    caption,
     children,
+    active = false,
+    open = false,
+    onClick = NavItem.global.onClick,
 
 }) {
+    const [opened, setOpened] = useState(open);
     const click = () => {
-        if (onClick) onClick({ link });
-    };
-    const text = () => {
-        if (caption) {
-            return typeof caption === 'string' ? <span it="cap">{caption}</span> : caption;
-        } if (children) {
-            return typeof children === 'string' ? <span it="cap">{children}</span> : children;
+        let current = opened;
+        if (children) {
+            current = !opened;
+            setOpened(current);
+        }
+        if (onClick) {
+            onClick({
+                id, open: current, caption, active,
+            });
         }
-        return '';
     };
+
     return (
         <div
-            className={ `${className} ${addClass}`}
-            style={{ ...NavItem.global.style, ...style }}
-            onClick={click}
+            nav-item=""
+            {...(opened ? { opened: '' } : {})}
+            {...(active ? { active: '' } : {})}
         >
-            {text()}
+            <div caption="" onClick={click}>
+                <div text="" >{caption || 'item'}</div>
+                {(children) && <div img=""/>}
+            </div>
+            {(children) && <Collapse expand={opened} attr={{ childs: '' }}>
+                {children}
+            </Collapse>
+            }
         </div>
     );
 }
-NavItem._originalClass = 'NavItem';
 
+// NavItem._className='NavItem';
 NavItem.global = {
-    className: 'wd-nav-item',
-    addClass: '',
-    style: {},
+    onClick: undefined,
 
 };
 export default NavItem;

package/jsx/NavBar/NavLogo.jsx

@@ -2,15 +2,16 @@ import React from 'react';
 
 function NavLogo({
     className = NavLogo.global.className,
-    addClass = NavLogo.global.addClass,
     style = NavLogo.global.style,
-
+    caption = NavLogo.global.caption,
     children,
 }) {
     return (
-        <div className={ `${className} ${addClass}`}
+        <div
+            {...className ? { className } : {}}
             style={{ ...NavLogo.global.style, ...style }}
         >
+            {(caption) && caption }
             {children}
         </div>
     );
@@ -20,6 +21,7 @@ NavLogo.global = {
     className: 'wd-nav-logo',
     addClass: '',
     style: {},
+    caption: 'logo',
 
 };
 

package/jsx/NavBar.jsx

@@ -1,72 +1,38 @@
-import React, { useEffect, useState } from 'react';
-import NavItem, { isNavItem } from './NavBar/NavItem.jsx';
-import { isNavMenu } from './NavBar/NavMenu.jsx';
-import onResizeScreen from './Utils/onResizeScreen.js';
-import isCompact from './Utils/isCompact.js';
-
-let _collapse = [];
-export const collapse = (p = undefined) => {
-    if (p === undefined) {
-        _collapse.map((close) => close());
-    } else if (p.add) {
-        _collapse.push(p.add);
-    } else if (p.remove) {
-        _collapse = _collapse.filter((it) => it === p.remove);
-    }
-};
+/* eslint-disable no-nested-ternary */
+import React, { useState } from 'react';
+import Collapse from './Collapse.jsx';
+import getId from './Utils/getId.js';
+import DefaultLogo from './NavBar/NavLogo.jsx';
 
 function NavBar({
-    Logo = undefined,
+    id = getId('navbar'),
     className = NavBar.global.className,
-    addClass = NavBar.global.addClass,
-    style = NavBar.global.style,
+    style = { ...NavBar.global.style },
+    Logo = undefined,
     children,
 }) {
-    const [compact, setCompact] = useState(isCompact());
-    const [itemsState, setItemsState] = useState('close');
-    const toggleMenu = () => {
-        setItemsState(itemsState === 'close' ? 'open' : 'close');
-    };
-    useEffect(() => {
-        const close = () => {
-            setItemsState('close');
-        };
-        collapse({ add: close });
+    const [collapse, setCollapse] = useState(true);
+    const childs = Array.isArray(children) ? children : [children];
 
-        return () => {
-            collapse({ remove: close });
-        };
-    }, []);
-
-    useEffect(() => {
-        const resize = () => {
-            const current = isCompact();
-            if (current !== compact) {
-                setCompact(current);
-                setItemsState('close');
-            }
-        };
-        const removeResizeScreen = onResizeScreen(resize);
-        resize();
-        return () => {
-            removeResizeScreen();
-        };
-    }, [compact]);
-    //console.log('children',children,Array.isArray(children));
-    let childs = Array.isArray(children)?children:[children];
+    const navBtnClick = () => {
+        setCollapse(!collapse);
+    };
+    const typeLogo = typeof Logo;
     return (
-        <div
-            it='navbar'
-            state={`${itemsState}`}
-            className={ `${className} ${addClass}`}
+        <div navbar=""
+            id={id}
+            {...className ? { className } : {}}
             style={{ ...NavBar.global.style, ...style }}
         >
-            <div it='nav-panel'>
-                <div it="nav-logo">{Logo && <Logo/>}</div>
-                <div it="nav-btn-close" className="wd-nav-btn" onClick={toggleMenu}>&#8801;</div>
+            <div nav-panel="">
+                {typeLogo === 'string' && <DefaultLogo caption={Logo}/>}
+                {typeLogo !== 'string' && Logo && <Logo/>}
+
+                <div nav-empty=""></div>
+                <div nav-btn="" onClick={navBtnClick}>&#8801;</div>
             </div>
-            <div it={'nav-items'} className="wd-scrollbar">
-                {childs.map((it, key) => ((isNavItem(it.type) || isNavMenu(it.type)) ? it : <NavItem key={key}>{it}</NavItem>))}
+            <div nav-menu="" {...(!collapse ? { expand: '' } : {})}>
+                {childs}
             </div>
         </div>
     );
@@ -74,8 +40,7 @@ function NavBar({
 
 NavBar.global = {
     className: 'wd-navbar',
-    addClass: '',
     style: {},
-
 };
+
 export default NavBar;

package/jsx/arch/NavBar/NavItem.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export function isNavItem(o) {
+    return typeof o === 'function' && (o.name === 'NavItem' || o._originalClass === 'NavItem');
+}
+function NavItem({
+    caption = undefined,
+    link,
+    className = NavItem.global.className,
+    addClass = NavItem.global.addClass,
+    style = NavItem.global.style,
+    onClick = undefined,
+    children,
+
+}) {
+    const click = () => {
+        if (onClick) onClick({ link });
+    };
+    const text = () => {
+        if (caption) {
+            return typeof caption === 'string' ? <span it="cap">{caption}</span> : caption;
+        } if (children) {
+            return typeof children === 'string' ? <span it="cap">{children}</span> : children;
+        }
+        return '';
+    };
+    return (
+        <div
+            className={ `${className} ${addClass}`}
+            style={{ ...NavItem.global.style, ...style }}
+            onClick={click}
+        >
+            {text()}
+        </div>
+    );
+}
+NavItem._originalClass = 'NavItem';
+
+NavItem.global = {
+    className: 'wd-nav-item',
+    addClass: '',
+    style: {},
+
+};
+export default NavItem;

package/jsx/arch/NavBar/NavLogo.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function NavLogo({
+    className = NavLogo.global.className,
+    addClass = NavLogo.global.addClass,
+    style = NavLogo.global.style,
+    children,
+}) {
+    return (
+        <div className={ `${className} ${addClass}`}
+            style={{ ...NavLogo.global.style, ...style }}
+        >
+            {children}
+        </div>
+    );
+}
+
+NavLogo.global = {
+    className: 'wd-nav-logo',
+    style: {},
+};
+
+export default NavLogo;

package/jsx/arch/NavBar.jsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import NavItem, { isNavItem } from './NavBar/NavItem.jsx';
+import { isNavMenu } from './NavBar/NavMenu.jsx';
+import onResizeScreen from './Utils/onResizeScreen.js';
+import isCompact from './Utils/isCompact.js';
+
+let _collapse = [];
+export const collapse = (p = undefined) => {
+    if (p === undefined) {
+        _collapse.map((close) => close());
+    } else if (p.add) {
+        _collapse.push(p.add);
+    } else if (p.remove) {
+        _collapse = _collapse.filter((it) => it === p.remove);
+    }
+};
+
+function NavBar({
+    Logo = undefined,
+    className = NavBar.global.className,
+    addClass = NavBar.global.addClass,
+    style = NavBar.global.style,
+    children,
+}) {
+    const [compact, setCompact] = useState(isCompact());
+    const [itemsState, setItemsState] = useState('close');
+    const toggleMenu = () => {
+        setItemsState(itemsState === 'close' ? 'open' : 'close');
+    };
+    useEffect(() => {
+        const close = () => {
+            setItemsState('close');
+        };
+        collapse({ add: close });
+
+        return () => {
+            collapse({ remove: close });
+        };
+    }, []);
+
+    useEffect(() => {
+        const resize = () => {
+            const current = isCompact();
+            if (current !== compact) {
+                setCompact(current);
+                setItemsState('close');
+            }
+        };
+        const removeResizeScreen = onResizeScreen(resize);
+        resize();
+        return () => {
+            removeResizeScreen();
+        };
+    }, [compact]);
+    //console.log('children',children,Array.isArray(children));
+    let childs = Array.isArray(children)?children:[children];
+    return (
+        <div
+            it='navbar'
+            state={`${itemsState}`}
+            className={ `${className} ${addClass}`}
+            style={{ ...NavBar.global.style, ...style }}
+        >
+            <div it='nav-panel'>
+                <div it="nav-logo">{Logo && <Logo/>}</div>
+                <div it="nav-btn-close" className="wd-nav-btn" onClick={toggleMenu}>&#8801;</div>
+            </div>
+            <div it={'nav-items'} className="wd-scrollbar">
+                {childs.map((it, key) => ((isNavItem(it.type) || isNavMenu(it.type)) ? it : <NavItem key={key}>{it}</NavItem>))}
+            </div>
+        </div>
+    );
+}
+
+NavBar.global = {
+    className: 'wd-navbar',
+    addClass: '',
+    style: {},
+
+};
+export default NavBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fmihel-windeco-components",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "description": "components for orders windeco",
   "main": "dist/windeco-components.js",
   "scripts": {

package/style/Container.scss

@@ -10,7 +10,7 @@
     align-items: stretch;    
 
     flex-direction: row;    
-    @include on-small{
+    @include less-small{
         flex-direction: column;
     }
 }

package/style/NavBar.scss

@@ -1,6 +1,30 @@
-@use 'sass:meta';
+@use "sass:meta";
 @import './vars.scss';
 
+@each $name,$width in $wd-widths{
+    .nav-container-#{$name}{ 
+        height: 100%;
+
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+        
+        flex-direction: row;
+        @include less-than($name){
+            flex-direction: column;
+        }
+    }
+    
+}
+
+.nav-content{
+    //border: 1px dashed red;
+    flex:1 1 auto;
+    overflow: auto;
+}
+
 
 @mixin define(){
     $themes:$wd-themes;
@@ -15,222 +39,178 @@
     }
 
     $size:var(--wd-size);
-    $panel-height:calc($size*1.5);
-    $bg:var(--wd-deep);
-    $color:var(--wd-color);
-    $orange:var(--wd-orange);
-    $border:var(--wd-border);
     $gap:var(--wd-gap);
-    $mobile-width:$wd-large-width;
+    $size-item:calc(var(--wd-size)*0.8);
     $tick:$wd-tick;
-    $invert:50%;//var(--cb-invert);
 
-    .wd-nav-left{
-
-        @include display-flex-vert-stretch();    
-        @media screen and (min-width: $mobile-width) {
-            flex-direction: row;
-        }    
-        overflow: hidden;
-    }
-    
-    .wd-nav-top{
-        @include display-flex-vert-stretch();
-        overflow: hidden;
-    
-        >div[it='navbar']{
-    
-            @include display-flex-vert-stretch();
-            @media screen and (min-width: $mobile-width) {
-                flex-direction: row;
+    .wd-navbar{
+        min-width:250px;
+        
+        [nav-menu]{
+            overflow: hidden;
+            padding-left: $gap;
+            padding-right: $gap;
+        }        
+        [nav-item]{
+            min-height:$size;
+            line-height: $size;
+            overflow: hidden;
+            [nav-item]{
+                padding-left:calc($size*0.5);
             }
-    
-            >div[it='nav-items']{
-                display:block;
-                @media screen and (min-width: $mobile-width) {
-                    @include display-flex-horiz-stretch();
+            [caption]{
+                &:hover{
+                    color: var(--nav-color-hover);
+                    //text-shadow: 0px 0px 1px var(--nav-color-hover);
+                }
+                [img]{
+                    width: $size;
+                    background-image: url($tick); 
+                    background-repeat: no-repeat, no-repeat;
+                    background-position: center;
+                    filter:invert(50%);                
+                    transition: transform 0.2s;
                 }
             }
-        }
-    }
-    
-    div[it='navbar']{
-        @include display-flex-vert-stretch();
-        >div[it='nav-panel']{
-            min-height: $panel-height;
-            @include display-flex-horiz-center();
-            >div[it='nav-logo']{
-                @include stretch();
-                line-height: $panel-height;   
+            &[opened]{
+                >[caption]{
+                    //color:var(--wd-highlight);
+                    //text-shadow: 0px 0px 0.5px var(--wd-highlight);
+                    [img]{
+                        transform: rotate(180deg);   
+                    }
+                }
             }
-            >div[it='nav-btn-close']{
-                width: $panel-height;
-                @media screen and (min-width: $mobile-width) {
-                    display: none;
+            &[active]{
+                >[caption]{
+                    color:var(--wd-highlight);
+                    //text-shadow: 0px 0px 0.5px var(--wd-highlight);
                 }
             }
         }
-
-        @include transition(height 0.4s);
+    }
+    
+    [navbar]{
+        //border:1px dashed yellowgreen;
+        @include less-large{
+            max-height: 80%;
+        }
+        
         
-        >div[it='nav-items']{
-            overflow-x: hidden;
-            overflow-y: auto;
-            @include stretch(); 
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;       
+        flex-direction: column;    
+
+        [nav-panel]{
+
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: stretch;
+            align-items: center;       
+            flex-direction: row;
         }
-    
-        &[state='open']{
-            height: 90% !important;
-            @media screen and (min-width: $mobile-width) {
-                height: auto !important;
+
+        [nav-btn]{
+            min-height: $size;
+            min-width: $size;
+            font-size:2rem;
+            text-align: center;
+            cursor:pointer;
+            @include more-large{
+                display: none;
             }
         }
 
-        &[state='close']{
-            height: $panel-height !important;
-            @media screen and (min-width: $mobile-width) {
-                height: auto !important;
+        [nav-empty]{
+            flex:1 1 auto;
+            @include more-large{
+                display:none;
             }
         }
         
-    }//navbar
-
-    div[it='nav-menu']{
-        overflow: hidden;
-        div{
-            &[it='nav-menu-head']{
-                @include display-flex-horiz-stretch();
-                >div{
-                    &:nth-child(1){
-                        @include stretch();
-                    }
-                    &:nth-child(2){
-                        width: $size;
-                    }
-                }
+        [nav-menu]{
+            
+            overflow: auto;
+            @include wd-scrollbar();        
+
+            @include less-large{
+                height:0px;
             }
-            &[it='nav-menu-items']{
-                @include stretch();
-                padding-left: $size;
+            &[expand]{
+                height:auto !important;
+                min-height: auto !important;
             }
+            //@include less-large{
+                /*
+                position: absolute;
+                right:0px;
+                top:0px;
+                background-color: gray;
+                height: 100%;
+                width:0px;
+                */
+            //}
         }
 
-
-        //@include transition(height 0.4s);
-        //height: 0px;
-        &[expand='expand']{
-            height: auto;                       
-        }
-    }
-
-    .wd-nav-btn{
-        text-align: center;
-        line-height: $panel-height;
-        cursor: pointer;
-    }
-
-    //-------------------------------------------------    
-    .wd-nav-item{
-        min-height: $size;
-        line-height: $size;
-        padding-left: $gap;
-        padding-right: $gap;
-        [it='cap']{
-            display: block;
-            width: 100%;
-            &:hover{
-                cursor: pointer;
-                color: var(--nav-color-hover);
-                text-shadow: 0px 0px 1px var(--nav-color-hover);
+        [caption]{
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            align-content: stretch;
+            align-items: stretch;       
+            flex-direction: row;
+            [text]{
+                flex: 1 1 auto;
             }
         }
     }
-    .wd-nav-top{
-        .wd-nav-item{
-            @media screen and (min-width: $mobile-width) {
-                @include display-flex-center(column);
-            }            
-        }
-    }
-    .wd-nav-item-stretch{
-        min-height: 0px !important;
-        height: 0px;
-        @include stretch();
-
-        @media screen and (max-width: $mobile-width) {
-            @include no-stretch();
-        }
-    }
-    //-------------------------------------------------    
-    .wd-nav-menu{
-        min-height: $size;
-        //border-bottom: 1px dashed $border;
 
-        >div{
-            &[it='nav-menu-head']{
-            line-height: $size;
 
-            padding-left: $gap;
-            padding-right: $gap;
-            
-                >div[it='nav-menu-btn']{
-                    width: $size;
-                    background-image: url($tick); 
-                    background-repeat: no-repeat, no-repeat;
-                    background-position: center;
-                    filter:invert($invert);                
+    
+    
+    @each $name,$width in $wd-widths{
+        .nav-container-#{$name}{ 
+            [navbar]{
+                @include more-than($name){
+                    max-height: none !important;
                 }
-                &:hover{
-                    cursor: pointer;
-                    color: var(--nav-color-hover);
-                    text-shadow: 0px 0px 1px var(--nav-color-hover);                    
+                @include less-than($name){
+                    max-height: 80%;
                 }
-            }
-            &[it='nav-menu-items']{
-                >div{
-                    &:last-child{
-                        border-color: rgba(0,0,0,0) !important;
+                [nav-btn]{
+                    display: block;
+                    @include more-than($name){
+                        display: none !important;
                     }
-                }    
-            }
-        }
-        &[expand='expand']{
-            >div[it='nav-menu-head'] >div[it='nav-menu-btn']{ 
-                transform: rotate(180deg);
-            }
-        }
-        &[as='popup']{
-            >div[it='nav-menu-head'] >div[it='nav-menu-btn']{ 
-                //transform: rotate(-90deg) !important;
+                }
+                [nav-empty]{
+                    @include more-than($name){
+                        display:none !important;
+                    }
+                }
+                [nav-menu]{
+                    height:auto;
+                    @include less-than($name){
+                        height:0px;
+                    }                    
+                }
             }
         }
     }
     
-    .wd-nav-dialog{
-        .wd-dialog-content{
-            overflow: hidden;
-        }
-    }
-    .wd-nav-top{
-        .wd-nav-menu{
-            @media screen and (min-width: $mobile-width) {
-                @include display-flex-center(column);
-            }            
-        }
-    }
-    //-------------------------------------------------    
-
     .wd-nav-logo{
-        min-height: $panel-height;
-        line-height: $panel-height;
-        min-width: calc($size*3);
+        min-height: calc($size*1.5);
+        line-height: calc($size*1.5);
         padding-left: $gap;
-        font-size: 1.2rem;
-        color:$orange;
-        text-shadow: 1px 1px 2px $orange;
+        padding-right: $gap;    
+        color:var(--wd-orange);
     }
-
+    
 }
 
-@include define();
 
+@include define();

package/style/arch/NavBar.scss

@@ -0,0 +1,236 @@
+@use 'sass:meta';
+@import './vars.scss';
+
+
+@mixin define(){
+    $themes:$wd-themes;
+    $hovers:$wd-high;
+    $hovers-color:$wd-color;
+
+    @each $theme in $themes{
+        #{getThemingRootClass($theme)}{
+            //--nav-bg-hover:#{meta.inspect(blendColors($colors:$hovers,$theme:$theme,$level:-5%))};
+            --nav-color-hover:#{meta.inspect(blendColors($colors:$hovers-color,$theme:$theme,$level:-30%))};
+        }   
+    }
+
+    $size:var(--wd-size);
+    $panel-height:calc($size*1.5);
+    $bg:var(--wd-deep);
+    $color:var(--wd-color);
+    $orange:var(--wd-orange);
+    $border:var(--wd-border);
+    $gap:var(--wd-gap);
+    $mobile-width:$wd-large-width;
+    $tick:$wd-tick;
+    $invert:50%;//var(--cb-invert);
+
+    .wd-nav-left{
+
+        @include display-flex-vert-stretch();    
+        @media screen and (min-width: $mobile-width) {
+            flex-direction: row;
+        }    
+        overflow: hidden;
+    }
+    
+    .wd-nav-top{
+        @include display-flex-vert-stretch();
+        overflow: hidden;
+    
+        >div[it='navbar']{
+    
+            @include display-flex-vert-stretch();
+            @media screen and (min-width: $mobile-width) {
+                flex-direction: row;
+            }
+    
+            >div[it='nav-items']{
+                display:block;
+                @media screen and (min-width: $mobile-width) {
+                    @include display-flex-horiz-stretch();
+                }
+            }
+        }
+    }
+    
+    div[it='navbar']{
+        @include display-flex-vert-stretch();
+        >div[it='nav-panel']{
+            min-height: $panel-height;
+            @include display-flex-horiz-center();
+            >div[it='nav-logo']{
+                @include stretch();
+                line-height: $panel-height;   
+            }
+            >div[it='nav-btn-close']{
+                width: $panel-height;
+                @media screen and (min-width: $mobile-width) {
+                    display: none;
+                }
+            }
+        }
+
+        @include transition(height 0.4s);
+        
+        >div[it='nav-items']{
+            overflow-x: hidden;
+            overflow-y: auto;
+            @include stretch(); 
+        }
+    
+        &[state='open']{
+            height: 90% !important;
+            @media screen and (min-width: $mobile-width) {
+                height: auto !important;
+            }
+        }
+
+        &[state='close']{
+            height: $panel-height !important;
+            @media screen and (min-width: $mobile-width) {
+                height: auto !important;
+            }
+        }
+        
+    }//navbar
+
+    div[it='nav-menu']{
+        overflow: hidden;
+        div{
+            &[it='nav-menu-head']{
+                @include display-flex-horiz-stretch();
+                >div{
+                    &:nth-child(1){
+                        @include stretch();
+                    }
+                    &:nth-child(2){
+                        width: $size;
+                    }
+                }
+            }
+            &[it='nav-menu-items']{
+                @include stretch();
+                padding-left: $size;
+            }
+        }
+
+
+        //@include transition(height 0.4s);
+        //height: 0px;
+        &[expand='expand']{
+            height: auto;                       
+        }
+    }
+
+    .wd-nav-btn{
+        text-align: center;
+        line-height: $panel-height;
+        cursor: pointer;
+    }
+
+    //-------------------------------------------------    
+    .wd-nav-item{
+        min-height: $size;
+        line-height: $size;
+        padding-left: $gap;
+        padding-right: $gap;
+        [it='cap']{
+            display: block;
+            width: 100%;
+            &:hover{
+                cursor: pointer;
+                color: var(--nav-color-hover);
+                text-shadow: 0px 0px 1px var(--nav-color-hover);
+            }
+        }
+    }
+    .wd-nav-top{
+        .wd-nav-item{
+            @media screen and (min-width: $mobile-width) {
+                @include display-flex-center(column);
+            }            
+        }
+    }
+    .wd-nav-item-stretch{
+        min-height: 0px !important;
+        height: 0px;
+        @include stretch();
+
+        @media screen and (max-width: $mobile-width) {
+            @include no-stretch();
+        }
+    }
+    //-------------------------------------------------    
+    .wd-nav-menu{
+        min-height: $size;
+        //border-bottom: 1px dashed $border;
+
+        >div{
+            &[it='nav-menu-head']{
+            line-height: $size;
+
+            padding-left: $gap;
+            padding-right: $gap;
+            
+                >div[it='nav-menu-btn']{
+                    width: $size;
+                    background-image: url($tick); 
+                    background-repeat: no-repeat, no-repeat;
+                    background-position: center;
+                    filter:invert($invert);                
+                }
+                &:hover{
+                    cursor: pointer;
+                    color: var(--nav-color-hover);
+                    text-shadow: 0px 0px 1px var(--nav-color-hover);                    
+                }
+            }
+            &[it='nav-menu-items']{
+                >div{
+                    &:last-child{
+                        border-color: rgba(0,0,0,0) !important;
+                    }
+                }    
+            }
+        }
+        &[expand='expand']{
+            >div[it='nav-menu-head'] >div[it='nav-menu-btn']{ 
+                transform: rotate(180deg);
+            }
+        }
+        &[as='popup']{
+            >div[it='nav-menu-head'] >div[it='nav-menu-btn']{ 
+                //transform: rotate(-90deg) !important;
+            }
+        }
+    }
+    
+    .wd-nav-dialog{
+        .wd-dialog-content{
+            overflow: hidden;
+        }
+    }
+    .wd-nav-top{
+        .wd-nav-menu{
+            @media screen and (min-width: $mobile-width) {
+                @include display-flex-center(column);
+            }            
+        }
+    }
+    //-------------------------------------------------    
+
+    .wd-nav-logo{
+        min-height: $panel-height;
+        line-height: $panel-height;
+        min-width: calc($size*3);
+        padding-left: $gap;
+        font-size: 1.2rem;
+        color:$orange;
+        text-shadow: 1px 1px 2px $orange;
+    }
+
+}
+
+@include define();
+

package/style/vars.scss

@@ -15,13 +15,13 @@ $wd-padding:$wd-gap;
 $wd-radius:0.25rem;
 $wd-font-size:14px !default;
 $wd-font-family:font-family('verdana') !default;
-$wd-max-mobile-width:900px;
-$wd-min-mobile-width:700px;
 
 $wd-large-width:900px;
 $wd-middle-width:700px;
 $wd-small-width:500px;
 
+$wd-widths:('small':$wd-small-width,'middle':$wd-middle-width,'large':$wd-small-width);
+
 $wd-bg:('light':#EDF2F9,'dark':#0B1727) !default;
 $wd-color:('light':#83909F,'dark':#9DA9BB) !default;
 $wd-label:('light':#5E6E82,'dark':#9DA9BB) !default;
@@ -172,61 +172,114 @@ $wd-bootstrap-vars:(
     }
 }
 
-@mixin on-large{
-    @media screen and (width >= $wd-large-width) {
+@mixin less-large{
+    @media screen and (width <= $wd-large-width) {
         @content;
     }
 }
 
-@mixin on-middle{
-    @media screen and ( $wd-small-width < width < $wd-large-width) {
+@mixin less-middle{
+    @media screen and ( width <= $wd-middle-width) {
         @content;
     }
 }
 
-@mixin on-small{
+@mixin less-small{
     @media screen and ( width <= $wd-small-width) {
         @content;
     }
 }
 
-.hide-on-large{
-    @include on-large{
+
+@mixin more-large{
+    @media screen and (width > $wd-large-width) {
+        @content;
+    }
+}
+
+@mixin more-middle{
+    @media screen and ( width > $wd-middle-width) {
+        @content;
+    }
+}
+
+@mixin more-small{
+    @media screen and ( width > $wd-small-width) {
+        @content;
+    }
+}
+
+
+.hide-less-large{
+    @include less-large{
         display: none !important;
     }
 }
 
-.hide-on-middle{
-    @include on-middle{
+.hide-less-middle{
+    @include less-middle{
         display: none !important;
     }
 }
 
-.hide-on-small{
-    @include on-small{
+.hide-less-small{
+    @include less-small{
         display: none !important;
     }
 }
 
 
-/*
-@mixin on-compact{
-    @media screen and (max-width: $wd-max-mobile-width) {
-        @content;
+.hide-more-large{
+    @include more-large{
+        display: none !important;
     }
 }
 
-@mixin on-fullscreen{
-    @media screen and (min-width: $wd-max-mobile-width) {
-        @content;
+.hide-more-middle{
+    @include more-middle{
+        display: none !important;
     }
 }
 
-.hide-on-compact{
-    @include on-compact{
+.hide-more-small{
+    @include more-small{
         display: none !important;
     }
 }
 
 
-*/
+@mixin less-than($name){
+    @if ($name == 'large'){
+        @include less-large{
+            @content;
+        }
+    }@else if($name == 'middle'){
+        @include less-middle{
+            @content;
+        }
+    }@else if($name == 'small'){
+        @include less-small{
+            @content;
+        }
+    }@else{
+        @error 'not define code for width'+$name; 
+    }
+}
+
+@mixin more-than($name){
+    @if ($name == 'large'){
+        @include more-large{
+            @content;
+        }
+    }@else if($name == 'middle'){
+        @include more-middle{
+            @content;
+        }
+    }@else if($name == 'small'){
+        @include more-small{
+            @content;
+        }
+    }@else{
+        @error 'not define code for width'+$name; 
+    }
+}