franklinblanco
/
remax-frontend-rs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Navbar done

This commit is contained in:
Franklin 2023-03-13 08:54:08 -04:00
parent c37beea04f
commit a10dff41ed
9 changed files with 270 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
css/navbar.css
View File

@ -1,15 +1,85 @@
body { body {
margin: 0; /* Remove body margins */ margin: 0; /* Remove body margins */
} }
/* Mobile View */
.navbar-background {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
align-items: stretch;
background-color: #252631;
padding: 15px;
padding-right: 40px;
min-height: 44px;
}
.navbar-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.navbar-hamburger {
font-size: 20pt;
color: white;
display: flex;
align-items: start;
margin-top: 10px;
max-height: 35px;
}
.navbar-closed{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10px;
display: none;
}
.navbar-open {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10px;
}
.navbar-item {
color: white;
font-size: 12pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
.navbar-item:hover {
background-color: #ffffff14;
font-size: 13pt;
font-weight: bold;
border-radius: 3px;
transition-duration: 0.3s;
cursor: pointer;
}
.navbar-title {
color: white;
font-size: 15pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
/* Desktop view */
@media only screen and (min-width: 850px) {
.navbar-container { .navbar-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
background-color: #252631;
padding: 15px;
padding-right: 40px;
margin: 0px;
} }
.navbar { .navbar {
display: flex; display: flex;
@ -17,6 +87,20 @@ body {
justify-content: flex-end; justify-content: flex-end;
flex-grow: 1; flex-grow: 1;
} }
.navbar-closed {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
margin-top: 0px;
}
.navbar-open {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
margin-top: 0px;
}
.navbar-item { .navbar-item {
color: white; color: white;
font-size: 14pt; font-size: 14pt;
@ -43,4 +127,7 @@ body {
padding-bottom: 10px; padding-bottom: 10px;
font-family: Source Sans Pro; font-family: Source Sans Pro;
} }
/*}*/ .navbar-hamburger {
display: none;
}
}

9
dist/index.html vendored
View File

@ -1,13 +1,14 @@
<!DOCTYPE html><html><head> <!DOCTYPE html><html><head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Yew App</title> <title>Yew App</title>
<link rel="stylesheet" href="/navbar-b14cff87445aae60.css"> <link rel="stylesheet" href="/navbar-3dafbc875c0918b7.css">
<link rel="stylesheet" href="/landing-c920ca43256fdcb9.css"> <link rel="stylesheet" href="/landing-c920ca43256fdcb9.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
<link rel="preload" href="/remax-template-frontend-abf7cea69d31badc_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/remax-template-frontend-139320c0b200f6ae_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/remax-template-frontend-abf7cea69d31badc.js"></head> <link rel="modulepreload" href="/remax-template-frontend-139320c0b200f6ae.js"></head>
<body><script type="module">import init from '/remax-template-frontend-abf7cea69d31badc.js';init('/remax-template-frontend-abf7cea69d31badc_bg.wasm');</script><script>(function () { <body><script type="module">import init from '/remax-template-frontend-139320c0b200f6ae.js';init('/remax-template-frontend-139320c0b200f6ae_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

133
dist/navbar-3dafbc875c0918b7.css vendored Normal file
View File

@ -0,0 +1,133 @@
body {
margin: 0; /* Remove body margins */
}
/* Mobile View */
.navbar-background {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
align-items: stretch;
background-color: #252631;
padding: 15px;
padding-right: 40px;
min-height: 44px;
}
.navbar-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.navbar-hamburger {
font-size: 20pt;
color: white;
display: flex;
align-items: start;
margin-top: 10px;
max-height: 35px;
}
.navbar-closed{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10px;
display: none;
}
.navbar-open {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10px;
}
.navbar-item {
color: white;
font-size: 12pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
.navbar-item:hover {
background-color: #ffffff14;
font-size: 13pt;
font-weight: bold;
border-radius: 3px;
transition-duration: 0.3s;
cursor: pointer;
}
.navbar-title {
color: white;
font-size: 15pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
/* Desktop view */
@media only screen and (min-width: 850px) {
.navbar-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
}
.navbar-closed {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
margin-top: 0px;
}
.navbar-open {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
margin-top: 0px;
}
.navbar-item {
color: white;
font-size: 14pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
.navbar-item:hover {
background-color: #ffffff14;
font-size: 15pt;
font-weight: bold;
border-radius: 3px;
transition-duration: 0.3s;
cursor: pointer;
}
.navbar-title {
color: white;
font-size: 14pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
.navbar-hamburger {
display: none;
}
}

46
dist/navbar-b14cff87445aae60.css vendored
View File

@ -1,46 +0,0 @@
body {
margin: 0; /* Remove body margins */
}
.navbar-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
background-color: #252631;
padding: 15px;
padding-right: 40px;
margin: 0px;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
}
.navbar-item {
color: white;
font-size: 14pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
.navbar-item:hover {
background-color: #ffffff14;
font-size: 15pt;
font-weight: bold;
border-radius: 3px;
transition-duration: 0.3s;
cursor: pointer;
}
.navbar-title {
color: white;
font-size: 14pt;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Source Sans Pro;
}
/*}*/

10
dist/remax-template-frontend-abf7cea69d31badc.js → dist/remax-template-frontend-139320c0b200f6ae.js vendored
View File

@ -780,12 +780,12 @@ function getImports() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper7108 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper7530 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 604, __wbg_adapter_36); const ret = makeMutClosure(arg0, arg1, 621, __wbg_adapter_36);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper7412 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper7834 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 639, __wbg_adapter_39); const ret = makeMutClosure(arg0, arg1, 656, __wbg_adapter_39);
return addHeapObject(ret); return addHeapObject(ret);
}; };
@ -824,7 +824,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { if (typeof input === 'undefined') {
input = new URL('remax-template-frontend-abf7cea69d31badc_bg.wasm', import.meta.url); input = new URL('remax-template-frontend-139320c0b200f6ae_bg.wasm', import.meta.url);
} }
const imports = getImports(); const imports = getImports();

BIN
dist/remax-template-frontend-abf7cea69d31badc_bg.wasm → dist/remax-template-frontend-139320c0b200f6ae_bg.wasm vendored
View File

Binary file not shown.

1
index.html
View File

@ -6,5 +6,6 @@
<link data-trunk type="text/css" href="css/navbar.css" rel="css" /> <link data-trunk type="text/css" href="css/navbar.css" rel="css" />
<link data-trunk type="text/css" href="css/landing.css" rel="css" /> <link data-trunk type="text/css" href="css/landing.css" rel="css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
</head> </head>
</html> </html>

12
src/components/nav_bar.rs
View File

@ -13,10 +13,16 @@ pub fn navigation_bar() -> Html {
let cloned_navigator_3 = navigator.clone(); let cloned_navigator_3 = navigator.clone();
let cloned_navigator_4 = navigator.clone(); let cloned_navigator_4 = navigator.clone();
let navbar_toggle = use_state(|| true);
let on_click_hamburger = {
let navbar_toggle = navbar_toggle.clone();
Callback::from(move |_| navbar_toggle.set(!*navbar_toggle))
};
html! { html! {
<div class={"navbar-background"}>
<div class={"navbar-container"}> <div class={"navbar-container"}>
<div class={"navbar-title"}>{NAVBAR_TITLE}</div> <div class={"navbar-title"}>{NAVBAR_TITLE}</div>
<div class={"navbar"}> <div class={if *navbar_toggle {"navbar-closed"} else {"navbar-open"}}>
<div onclick={move |_| cloned_navigator_1.push(&Route::LandingPage)} class={"navbar-item"}> <div onclick={move |_| cloned_navigator_1.push(&Route::LandingPage)} class={"navbar-item"}>
{NAVBAR_COL_LANDING} {NAVBAR_COL_LANDING}
</div> </div>
@ -34,5 +40,9 @@ pub fn navigation_bar() -> Html {
</div> </div>
</div> </div>
</div> </div>
<div class={"navbar-hamburger"} onclick={on_click_hamburger}>
<i class="fa-solid fa-bars" ></i>
</div>
</div>
} }
} }