diff --git a/GPW.CORE.SMART/Components/NavBottom.razor b/GPW.CORE.SMART/Components/NavBottom.razor index 1f1ed5c..b4ece56 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor +++ b/GPW.CORE.SMART/Components/NavBottom.razor @@ -1,4 +1,4 @@ -
+@*
@if (isActive) {
@@ -11,7 +11,7 @@
} -
+
MPF @@ -28,6 +28,45 @@
-
+
*@ + + +
+
+ +

Navigazione

+
+ +
+
+
+ + + Timbrature + + + + + + Admin + + + + +
+ MFP +
+ + +
+
+ + diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.cs b/GPW.CORE.SMART/Components/NavBottom.razor.cs index 071cd0b..c3008c6 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.cs +++ b/GPW.CORE.SMART/Components/NavBottom.razor.cs @@ -10,10 +10,14 @@ namespace GPW.CORE.Smart.Components public partial class NavBottom { private string cssAll = ""; + private string cssContenuto = ""; + private string hideMenuCSS = "hidden"; + private string hideButtonCSS = "visible"; protected bool isActive { get; set; } = false; protected void slideOut() { cssAll = "bottom: 15rem;"; + cssContenuto = "height: 100%"; isActive = true; } protected void slideIn() @@ -21,5 +25,16 @@ namespace GPW.CORE.Smart.Components cssAll = "bottom: 0rem;"; isActive = false; } + + protected void showMenu() + { + hideMenuCSS = "visible"; + hideButtonCSS = "hidden"; + } + protected void hideMenu() + { + hideMenuCSS = "hidden"; + hideButtonCSS = "visible"; + } } } \ No newline at end of file diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.css b/GPW.CORE.SMART/Components/NavBottom.razor.css index 88f7193..579b93b 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.css +++ b/GPW.CORE.SMART/Components/NavBottom.razor.css @@ -1,37 +1,307 @@ -.all { - position: fixed; - bottom: 0rem; - transition: bottom 0.3s linear 0.2s; - width: 100%; +/*.all { + position: fixed; + bottom: 0rem; + transition: bottom 0.3s linear 0.2s; + width: 100%; } + .navBottomContainer { - position: sticky; + position: sticky; + width: 100%; + background-color: #34495E; + border-radius: 12px 12px 0px 0px; + text-align: center; + display: flex; + justify-content: space-between; + bottom: 0; +} + +.slider { + text-align: center; +} + +.all:hover + .backDrop { + display: block; +} + +navBottomContainer div { + background-color: #ff0000; + height: 5rem; + width: 5rem; +} + + +.slider button { + border: none; + width: 4.37rem; + height: 1.5rem; + background-color: rgba(149, 165, 166, 0.5); + border-radius: 12px 12px 0px 0px; + box-shadow: 0px -4px 4px rgba(0,0,0,0.3); + padding: 0; + margin: 0; +} +*/ +:root { + --dark: #333; + --light: #fff; + --neutral: #f6f6f6; + --neutral-dark: #d1d1d1; + --color: #5607d7; + --color-light: #941ed2; + --color-dark: #2719cd; + --font-stack: 'Josefin Sans', 'Montserrat', 'sans-serif'; +} +body { + display: flex; + align-items: center; + justify-content: center; + background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed; + font-family: var(--font-stack); +} +body:before { + content: ''; + width: 400px; + height: 400px; + background: linear-gradient(135deg, orange, orangered); + border-radius: 50%; + position: fixed; + top: -50px; + left: 10vw; + z-index: -1; +} +body:after { + content: ''; + width: 300px; + height: 300px; + background: linear-gradient(135deg, cyan, blue); + border-radius: 50%; + position: fixed; + bottom: -50px; + right: -5vw; + z-index: -1; +} +.hero__wrapper { + display: flex; + align-items: flex-end; + justify-content: center; + flex-wrap: wrap; +} +.hero__wrapper:before { + content: ''; + width: 150px; + height: 150px; + background: linear-gradient(135deg, var(--color-light), var(--color-dark)); + border-radius: 50%; + position: fixed; + bottom: 50px; + left: 10px; + z-index: -1; +} +.hero__wrapper > * { + margin: 15px; +} +.hero__header { + flex: 0 1 1px; + padding-right: 50px; + color: var(--dark); + font-size: 8vmax; +} +.hero__phone { + width: 300px; + height: 630px; + background: var(--light); + background-color: #ffffff; + background: #fff url('https://codepenworldsfair.com/images/small-worlds-fair.png') center / 250px no-repeat; + border: 12px solid var(--dark); + border-radius: 36px; + position: relative; + overflow: hidden; +} +.hero__phone:before { + content: ''; + width: 175px; + height: 25px; + background: var(--dark); + border-bottom-right-radius: 20px; + border-bottom-left-radius: 20px; + position: absolute; + top: 0; + left: 50%; + transform: translatex(-50%); + z-index: 1000; +} +.hero__phone:after { + content: ''; + width: 100px; + height: 5px; + background: var(--dark); + border-radius: 2px; + position: absolute; + bottom: 6px; + left: 50%; + transform: translatex(-50%); + z-index: 1000; +} +.menu__button { + --x: -50%; + --y: 0; + --z: 0; + display: flex; + align-items: center; + justify-content: space-between; + background: linear-gradient(to right, #fc466b, #3f5efb); + padding: 10px 20px; + border-radius: 28px; + border: none; + box-shadow: 0 2px 40px -10px #FF00FF; + color: #fff; + font-size: 16px; + white-space: nowrap; + position: fixed; + bottom: 1rem; + left: 50%; + transform: translate3d(var(--x), var(--y), var(--z)); + cursor: pointer; + z-index: 105; + transition: 0.15s cubic-bezier(0.33, 1, 0.53, 1); +} +.menu__button[hidden] { + --y: 200%; +} +.menu__button div { + display: flex; + align-items: center; + width: 12px; + height: 12px; + margin-right: 20px; +} +.menu__button div div { + display: table; + height: 1px; + background: var(--light); + box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light); +} +.menu__overlay { width: 100%; - background-color: #34495E; - border-radius: 12px 12px 0px 0px; - text-align: center; + height: 100%; + background: rgba(0, 0, 0, 0.1); + position: absolute; + z-index: 100; +} +.menu__body { + --x: 0; + --y: 0; + --z: 0; + display: block; + width: 100%; + background-color: #fff; + padding-bottom: 15px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + box-shadow: 0px -9px 50px -30px black; + font-family: 'Montserrat', sans-serif; + position: absolute; + bottom: 0; + z-index: 105; + transform: translate3d(var(--x), var(--y), var(--z)); + transition: visibility 200ms linear 300ms, opacity 500ms; +} +.menu__body[hidden] { + --y: 150%; +} +.menu__body > *:not(:last-child) { + border-bottom: 2px solid var(--neutral); +} +.menu__header { display: flex; justify-content: space-between; - bottom: 0; + padding: 15px 20px; } -.slider { +.menu__header label div { + width: 15px; + height: 15px; + border: 2px solid var(--dark); + border-radius: 50%; + position: relative; + transform: rotate(5.5rad); +} +.menu__header label div:after { + content: ''; + width: 2px; + height: 10px; + background: var(--dark); + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); +} +.menu__header p { + font-size: 18px; + font-weight: bold; + vertical-align: center; + white-space: nowrap; +} +.menu__header h3 { + font-weight: normal; +} +.menu__header button { + display: flex; + align-items: center; + justify-content: center; + width: 25px; + height: 25px; + background: var(--neutral-dark); + border-radius: 50%; + cursor: pointer; +} +.menu__header button div { + width: 15px; + height: 3px; + background: var(--light); + position: relative; + transform: rotate(5.5rad); +} +.menu__header button div:before { + content: ''; + width: 3px; + height: 15px; + background: var(--light); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.menu__links { + display: flex; + padding: 10px 15px; + font-weight: bold; + overflow-x: auto; +} +.menu__links a { + flex: 1 1 1px; + padding: 10px 8px; + color: var(--dark); + text-decoration: none; + white-space: nowrap; +} +.menu__contact { + display: flex; + padding: 8px; +} +.menu__contact svg { + width: 100%; + fill: var(--color); +} +.menu__contact a { + flex: 1 1 30%; + padding: 1.5rem; + margin: 5px; + border-radius: 8px; + background: #d1d1d1; + color: var(--color); text-align: center; -} -.all:hover + .backDrop { - display: block; -} -navBottomContainer div { - background-color: #ff0000; - height: 5rem; - width: 5rem; -} -.slider button { - border: none; - width: 4.37rem; - height: 1.5rem; - background-color: rgba(149, 165, 166, 0.5); - border-radius: 12px 12px 0px 0px; - box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.3); - padding: 0; - margin: 0; + font-size: 14px; + font-weight: bold; + text-decoration: none; } \ No newline at end of file diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.less b/GPW.CORE.SMART/Components/NavBottom.razor.less index 008f571..d1bc4f9 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.less +++ b/GPW.CORE.SMART/Components/NavBottom.razor.less @@ -1,4 +1,4 @@ -.all { +/*.all { position: fixed; bottom: 0rem; transition: bottom 0.3s linear 0.2s; @@ -41,3 +41,304 @@ navBottomContainer div { padding: 0; margin: 0; } +*/ + + + +:root { + --dark: #333; + --light: #fff; + --neutral: #f6f6f6; + --neutral-dark: #d1d1d1; + --color: #5607d7; + --color-light: #941ed2; + --color-dark: #2719cd; + --font-stack: 'Josefin Sans', 'Montserrat', 'sans-serif'; +} + +body { + display: flex; + align-items: center; + justify-content: center; + background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed; + font-family: var(--font-stack); + + &:before { + content: ''; + width: 400px; + height: 400px; + background: linear-gradient(135deg, orange, orangered); + border-radius: 50%; + position: fixed; + top: -50px; + left: 10vw; + z-index: -1; + } + + &:after { + content: ''; + width: 300px; + height: 300px; + background: linear-gradient(135deg, cyan, blue); + border-radius: 50%; + position: fixed; + bottom: -50px; + right: -5vw; + z-index: -1; + } +} + +.hero__wrapper { + display: flex; + align-items: flex-end; + justify-content: center; + flex-wrap: wrap; + + &:before { + content: ''; + width: 150px; + height: 150px; + background: linear-gradient(135deg, var(--color-light), var(--color-dark)); + border-radius: 50%; + position: fixed; + bottom: 50px; + left: 10px; + z-index: -1; + } + + > * { + margin: 15px; + } +} + +.hero__header { + flex: 0 1 1px; + padding-right: 50px; + color: var(--dark); + font-size: 8vmax; +} + +.hero__phone { + width: 300px; + height: 630px; + background: var(--light); + background-color: #ffffff; + background: #fff url('https://codepenworldsfair.com/images/small-worlds-fair.png') center/250px no-repeat; + border: 12px solid var(--dark); + border-radius: 36px; + position: relative; + overflow: hidden; + + &:before { + content: ''; + width: 175px; + height: 25px; + background: var(--dark); + border-bottom-right-radius: 20px; + border-bottom-left-radius: 20px; + position: absolute; + top: 0; + left: 50%; + transform: translatex(-50%); + z-index: 1000; + } + + &:after { + content: ''; + width: 100px; + height: 5px; + background: var(--dark); + border-radius: 2px; + position: absolute; + bottom: 6px; + left: 50%; + transform: translatex(-50%); + z-index: 1000; + } +} + +.menu__button { + --x: -50%; + --y: 0; + --z: 0; + display: flex; + align-items: center; + justify-content: space-between; + background: linear-gradient(to right, #fc466b, #3f5efb); + padding: 10px 20px; + border-radius: 28px; + border: none; + box-shadow: 0 2px 40px -10px #FF00FF; + color: #fff; + font-size: 16px; + white-space: nowrap; + position: fixed; + bottom: 1rem; + left: 50%; + transform: translate3d(var(--x), var(--y), var(--z)); + cursor: pointer; + z-index: 105; + transition: .15s cubic-bezier(.33,1,.53,1); + + &[hidden] { + --y: 200%; + } + + div { + display: flex; + align-items: center; + width: 12px; + height: 12px; + margin-right: 20px; + + div { + display: table; + height: 1px; + background: var(--light); + box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light); + } + } +} + +.menu__overlay { + width: 100%; + height: 100%; + background: rgba(#000, .1); + position: absolute; + z-index: 100; +} + +.menu__body { + --x: 0; + --y: 0; + --z: 0; + display: block; + width: 100%; + background-color: #fff; + padding-bottom: 15px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + box-shadow: 0px -9px 50px -30px black; + font-family: 'Montserrat', sans-serif; + position: absolute; + bottom: 0; + z-index: 105; + transform: translate3d(var(--x), var(--y), var(--z)); + //transition: .2s cubic-bezier(.33,1,.53,1); + transition: visibility 200ms linear 300ms, opacity 500ms; + + &[hidden] { + --y: 150%; + } + + > *:not(:last-child) { + border-bottom: 2px solid var(--neutral); + } +} + +.menu__header { + display: flex; + justify-content: space-between; + padding: 15px 20px; + + label { + div { + width: 15px; + height: 15px; + border: 2px solid var(--dark); + border-radius: 50%; + position: relative; + transform: rotate(5.5rad); + + &:after { + content: ''; + width: 2px; + height: 10px; + background: var(--dark); + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + } + } + } + + p { + font-size: 18px; + font-weight: bold; + vertical-align: center; + white-space: nowrap; + } + + h3 { + font-weight: normal; + } + + button { + display: flex; + align-items: center; + justify-content: center; + width: 25px; + height: 25px; + background: var(--neutral-dark); + border-radius: 50%; + cursor: pointer; + + div { + width: 15px; + height: 3px; + background: var(--light); + position: relative; + transform: rotate(5.5rad); + + &:before { + content: ''; + width: 3px; + height: 15px; + background: var(--light); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + } +} + +.menu__links { + display: flex; + padding: 10px 15px; + font-weight: bold; + overflow-x: auto; + + a { + flex: 1 1 1px; + padding: 10px 8px; + color: var(--dark); + text-decoration: none; + white-space: nowrap; + } +} + +.menu__contact { + display: flex; + padding: 8px; + + svg { + width: 100%; + fill: var(--color); + } + + a { + flex: 1 1 30%; + padding: 1.5rem; + margin: 5px; + border-radius: 8px; + background: #d1d1d1; + color: var(--color); + text-align: center; + font-size: 14px; + font-weight: bold; + text-decoration: none; + } +} \ No newline at end of file diff --git a/GPW.CORE.SMART/Components/NavBottom.razor.min.css b/GPW.CORE.SMART/Components/NavBottom.razor.min.css index 8b32b96..8d0b29d 100644 --- a/GPW.CORE.SMART/Components/NavBottom.razor.min.css +++ b/GPW.CORE.SMART/Components/NavBottom.razor.min.css @@ -1 +1 @@ -.all{position:fixed;bottom:0;transition:bottom .3s linear .2s;width:100%;}.navBottomContainer{position:sticky;width:100%;background-color:#34495e;border-radius:12px 12px 0 0;text-align:center;display:flex;justify-content:space-between;bottom:0;}.slider{text-align:center;}.all:hover+.backDrop{display:block;}navBottomContainer div{background-color:#f00;height:5rem;width:5rem;}.slider button{border:0;width:4.37rem;height:1.5rem;background-color:rgba(149,165,166,.5);border-radius:12px 12px 0 0;box-shadow:0 -4px 4px rgba(0,0,0,.3);padding:0;margin:0;} \ No newline at end of file +:root{--dark:#333;--light:#fff;--neutral:#f6f6f6;--neutral-dark:#d1d1d1;--color:#5607d7;--color-light:#941ed2;--color-dark:#2719cd;--font-stack:'Josefin Sans','Montserrat','sans-serif';}body{display:flex;align-items:center;justify-content:center;background:url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;font-family:var(--font-stack);}body:before{content:'';width:400px;height:400px;background:linear-gradient(135deg,#ffa500,#ff4500);border-radius:50%;position:fixed;top:-50px;left:10vw;z-index:-1;}body:after{content:'';width:300px;height:300px;background:linear-gradient(135deg,#0ff,#00f);border-radius:50%;position:fixed;bottom:-50px;right:-5vw;z-index:-1;}.hero__wrapper{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;}.hero__wrapper:before{content:'';width:150px;height:150px;background:linear-gradient(135deg,var(--color-light),var(--color-dark));border-radius:50%;position:fixed;bottom:50px;left:10px;z-index:-1;}.hero__wrapper>*{margin:15px;}.hero__header{flex:0 1 1px;padding-right:50px;color:var(--dark);font-size:8vmax;}.hero__phone{width:300px;height:630px;background:var(--light);background-color:#fff;background:#fff url('https://codepenworldsfair.com/images/small-worlds-fair.png') center/250px no-repeat;border:12px solid var(--dark);border-radius:36px;position:relative;overflow:hidden;}.hero__phone:before{content:'';width:175px;height:25px;background:var(--dark);border-bottom-right-radius:20px;border-bottom-left-radius:20px;position:absolute;top:0;left:50%;transform:translatex(-50%);z-index:1000;}.hero__phone:after{content:'';width:100px;height:5px;background:var(--dark);border-radius:2px;position:absolute;bottom:6px;left:50%;transform:translatex(-50%);z-index:1000;}.menu__button{--x:-50%;--y:0;--z:0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fc466b,#3f5efb);padding:10px 20px;border-radius:28px;border:0;box-shadow:0 2px 40px -10px #f0f;color:#fff;font-size:16px;white-space:nowrap;position:fixed;bottom:1rem;left:50%;transform:translate3d(var(--x),var(--y),var(--z));cursor:pointer;z-index:105;transition:.15s cubic-bezier(.33,1,.53,1);}.menu__button[hidden]{--y:200%;}.menu__button div{display:flex;align-items:center;width:12px;height:12px;margin-right:20px;}.menu__button div div{display:table;height:1px;background:var(--light);box-shadow:0 4px 0 var(--light),0 -4px 0 var(--light);}.menu__overlay{width:100%;height:100%;background:rgba(0,0,0,.1);position:absolute;z-index:100;}.menu__body{--x:0;--y:0;--z:0;display:block;width:100%;background-color:#fff;padding-bottom:15px;border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -9px 50px -30px black;font-family:'Montserrat',sans-serif;position:absolute;bottom:0;z-index:105;transform:translate3d(var(--x),var(--y),var(--z));transition:visibility 200ms linear 300ms,opacity 500ms;}.menu__body[hidden]{--y:150%;}.menu__body>*:not(:last-child){border-bottom:2px solid var(--neutral);}.menu__header{display:flex;justify-content:space-between;padding:15px 20px;}.menu__header label div{width:15px;height:15px;border:2px solid var(--dark);border-radius:50%;position:relative;transform:rotate(5.5rad);}.menu__header label div:after{content:'';width:2px;height:10px;background:var(--dark);position:absolute;top:100%;left:50%;transform:translateX(-50%);}.menu__header p{font-size:18px;font-weight:bold;vertical-align:center;white-space:nowrap;}.menu__header h3{font-weight:normal;}.menu__header button{display:flex;align-items:center;justify-content:center;width:25px;height:25px;background:var(--neutral-dark);border-radius:50%;cursor:pointer;}.menu__header button div{width:15px;height:3px;background:var(--light);position:relative;transform:rotate(5.5rad);}.menu__header button div:before{content:'';width:3px;height:15px;background:var(--light);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.menu__links{display:flex;padding:10px 15px;font-weight:bold;overflow-x:auto;}.menu__links a{flex:1 1 1px;padding:10px 8px;color:var(--dark);text-decoration:none;white-space:nowrap;}.menu__contact{display:flex;padding:8px;}.menu__contact svg{width:100%;fill:var(--color);}.menu__contact a{flex:1 1 30%;padding:1.5rem;margin:5px;border-radius:8px;background:#d1d1d1;color:var(--color);text-align:center;font-size:14px;font-weight:bold;text-decoration:none;} \ No newline at end of file diff --git a/GPW.CORE.SMART/Pages/_Layout.cshtml b/GPW.CORE.SMART/Pages/_Layout.cshtml index f6e1836..516c7b9 100644 --- a/GPW.CORE.SMART/Pages/_Layout.cshtml +++ b/GPW.CORE.SMART/Pages/_Layout.cshtml @@ -70,6 +70,7 @@ @**@ + diff --git a/GPW.CORE.SMART/wwwroot/lib/MenuHandler.js b/GPW.CORE.SMART/wwwroot/lib/MenuHandler.js new file mode 100644 index 0000000..e1614fc --- /dev/null +++ b/GPW.CORE.SMART/wwwroot/lib/MenuHandler.js @@ -0,0 +1,20 @@ +const button = document.querySelector('.menu__button'); +const menu = document.querySelector('.menu__body'); +const close = document.querySelector('.menu__header button'); +const overlay = document.querySelector('.menu__overlay'); + +function showMenu() { + button.setAttribute('hidden', ''); + menu.removeAttribute('hidden'); + overlay.removeAttribute('hidden'); +}; + +function hideMenu() { + menu.setAttribute('hidden', ''); + overlay.setAttribute('hidden', ''); + button.removeAttribute('hidden'); +}; + +button.addEventListener('click', showMenu); +close.addEventListener('click', hideMenu); +overlay.addEventListener('click', hideMenu); \ No newline at end of file