Skip to content
This repository has been archived by the owner on Jun 17, 2024. It is now read-only.

Commit

Permalink
Tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@nduartech
nduartech committed May 8, 2024
1 parent 622904f commit cc39055
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 18 deletions.
4 changes: 2 additions & 2 deletions packages/mr-solid/dist/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/mr-solid/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const App: Component = (props: any) => {

const nav = () => [
{
icon: '<svg class="nav w-6 h-6" width="100%" height="100%" stroke-width="0.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ddf2ff"><path d="M9 21H7C4.79086 21 3 19.2091 3 17V10.7076C3 9.30887 3.73061 8.01175 4.92679 7.28679L9.92679 4.25649C11.2011 3.48421 12.7989 3.48421 14.0732 4.25649L19.0732 7.28679C20.2694 8.01175 21 9.30887 21 10.7076V17C21 19.2091 19.2091 21 17 21H15M9 21V17C9 15.3431 10.3431 14 12 14V14C13.6569 14 15 15.3431 15 17V21M9 21H15" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-5"></path></svg>',
icon: '<svg class="nav w-8 h-8" width="100%" height="100%" stroke-width="0.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ddf2ff"><path d="M9 21H7C4.79086 21 3 19.2091 3 17V10.7076C3 9.30887 3.73061 8.01175 4.92679 7.28679L9.92679 4.25649C11.2011 3.48421 12.7989 3.48421 14.0732 4.25649L19.0732 7.28679C20.2694 8.01175 21 9.30887 21 10.7076V17C21 19.2091 19.2091 21 17 21H15M9 21V17C9 15.3431 10.3431 14 12 14V14C13.6569 14 15 15.3431 15 17V21M9 21H15" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-5"></path></svg>',
label: "Home",
path: "home"
}
Expand Down
14 changes: 9 additions & 5 deletions packages/mr-solid/src/components/nav/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,23 @@ function Nav(props: any) {
const [isClosed, setIsClosed] = createSignal(true);
createEffect(()=>{
if(isClosed()||!isClosed()){
setTimeout(function() {document.querySelectorAll("svg.nav").forEach(svg=>svg.classList.add("active"));},100);
setTimeout(function() {document.querySelectorAll("svg.nav").forEach(svg=>svg.classList.add("active"));},300);
setTimeout(function() {document.querySelectorAll("p.navIconLabel").forEach(svg=>svg.classList.add("active"));},300);
}
});
return (
<div class="flex flex-row md:flex-col items-start justify-start w-full h-fit absolute">
<div class="flex flex-col items-start justify-start w-fit h-fit navDiv mt-0.5 ml-0.5 lg:mt-2 lg:ml-2">
<Show when={isClosed()}>
<NavButton
icon='<svg class="nav w-6 h-6" width="100%" height="100%" stroke-width="0.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ddf2ff"><path d="M3 5H21" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-1"></path><path d="M3 12H21" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-2"></path><path d="M3 19H21" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-3"></path></svg>'
icon='<svg class="nav w-8 w-8" width="100%" height="100%" stroke-width="0.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ddf2ff"><path d="M3 5H21" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-1"></path><path d="M3 12H21" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-2"></path><path d="M3 19H21" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-3"></path></svg>'
label="Menu"
onClick={() => {
document.querySelectorAll("svg.nav").forEach(svg=>svg.classList.remove("active"));
document.querySelectorAll("p.navIconLabel").forEach(svg=>svg.classList.remove("active"));
setTimeout(function() {
setIsClosed(false);
},100);
},300);
let navClosed = new Event("navClosed");
let navOpened = new Event("navOpened");
if (!isClosed()) {
Expand All @@ -35,10 +37,12 @@ function Nav(props: any) {
<ul class="flex flex-row lg:flex-col items-start justify-start w-fit h-fit lg:space-y-1.5 list-none">
<Show when={!isClosed()}>
<NavButton
icon='<svg class="nav w-6 h-6" width="100%" height="100%" stroke-width="0.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ddf2ff"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-4"></path></svg>'
icon='<svg class="nav w-8 w-8" width="100%" height="100%" stroke-width="0.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ddf2ff"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ddf2ff" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" class="svg-elem-4"></path></svg>'
label="Close"
onClick={() => {
setIsClosed(true);
document.querySelectorAll("svg.nav").forEach(svg=>svg.classList.remove("active"));
document.querySelectorAll("p.navIconLabel").forEach(svg=>svg.classList.remove("active"));
setTimeout(function() {setIsClosed(true);},300);
let navClosed = new Event("navClosed");
let navOpened = new Event("navOpened");
if (!isClosed()) {
Expand Down
30 changes: 20 additions & 10 deletions packages/mr-solid/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
svg.nav .svg-elem-1 {
stroke-dashoffset: 20px;
stroke-dasharray: 20px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
-webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
}

svg.nav.active .svg-elem-1 {
Expand All @@ -17,8 +17,8 @@
svg.nav .svg-elem-2 {
stroke-dashoffset: 20px;
stroke-dasharray: 20px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s
-webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s
}

svg.nav.active .svg-elem-2 {
Expand All @@ -28,8 +28,8 @@
svg.nav .svg-elem-3 {
stroke-dashoffset: 20px;
stroke-dasharray: 20px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s
-webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s
}

svg.nav.active .svg-elem-3 {
Expand All @@ -39,8 +39,8 @@
svg.nav .svg-elem-4 {
stroke-dashoffset: 31.656723022460938px;
stroke-dasharray: 31.656723022460938px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
-webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
}

svg.nav.active .svg-elem-4 {
Expand All @@ -50,11 +50,21 @@
svg.nav .svg-elem-5 {
stroke-dashoffset: 78.8388442993164px;
stroke-dasharray: 78.8388442993164px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
-webkit-transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
}

svg.nav.active .svg-elem-5 {
stroke-dashoffset: 0
}

p.navIconLabel {
color: transparent;
-webkit-transition: color 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: color 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

p.navIconLabel.active {
color: #ddf2ff;
}
}

0 comments on commit cc39055

Please sign in to comment.