rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created Navbar for the editor

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-09-16 16:49:58 +01:00
parent 4428d5b6aa
commit cb1b77c6dc
10 changed files with 124 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/css/login.css
+1 -1
View File
@@ -8,7 +8,7 @@ html, body {
height: 100%;
}
main {
main.login {
height: 100%;
display: flex;
flex-direction: column;
src/editor/css/main.css
+8 -1
View File
@@ -4,5 +4,12 @@
/*local imports*/
@import "../../css/templateStyles.css";
@import "login.css";
@import "nav.css";
/*other styles*/
/*** Media Queries ***/
@media only screen and (max-width: 75em) {
nav.sideNav .closeBtn {
display: block;
}
}
src/editor/css/nav.css
+76
View File
@@ -0,0 +1,76 @@
/*** Editor Nav styles ***/
nav {
font-size: var(--headingFS);
}
nav.sideNav {
height: 100%;
width: 250px;
z-index: 1;
position: fixed;
top: 0;
left: 0;
background-color: var(--primaryHover);
overflow-x: hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
padding-top: 60px;
}
nav.sideNav ul li {
list-style: none;
}
nav.sideNav a {
padding: 8px 8px 8px 0;
text-decoration: none;
color: #FFFFFF;
display: block;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
nav.sideNav .closeBtn {
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
font-size: var(--titleFS);
display: none;
}
nav.sideNav ul li span {
visibility: hidden;
}
nav.sideNav ul li a:hover span, nav.sideNav ul li .active span {
visibility: visible;
}
span#navOpen {
font-size: var(--titleFS);
cursor: pointer;
}
main.editor {
margin-left: 250px;
}
.title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#navOpen {
visibility: hidden;
padding-left: 0.25em;
align-self: flex-start;
}
src/editor/editor.html
+16 -2
View File
@@ -3,10 +3,24 @@
<head>
<meta charset="UTF-8">
<title>Editor</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Editor</h1>
<nav class="sideNav">
<a href="#" class="closeBtn" id="navClose">&times;</a>
<ul>
<li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li>
</ul>
</nav>
<main class="editor" style="margin-left: 250px;">
<div class="title">
<span id="navOpen">&#9776;</span>
<h1>Editor</h1>
</div>
</main>
<script src="js/editor.js"></script>
</body>
</html>
src/editor/index.html
+1 -1
View File
@@ -8,7 +8,7 @@
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<main class="login">
<div id="login" class="container shown">
<h1>Login To Editor</h1>
src/editor/js/editor.js
+18 -4
View File
@@ -1,12 +1,26 @@
document.addEventListener('DOMContentLoaded', e =>
{
// check if the user is logged in, if not redirect to login
fetch('/api/user/isLoggedIn').then(res =>
// check if the user is logged in, if not redirect to log in
/* fetch('/api/user/isLoggedIn').then(res =>
{
if (!res.ok)
{
window.location.href = './';
}
});
})
});*/
})
document.querySelector("#navOpen").addEventListener("click", e =>
{
document.querySelector("nav.sideNav").style.removeProperty("width");
document.querySelector("main.editor").style.removeProperty("margin-left");
e.target.style.removeProperty("visibility");
});
document.querySelector("#navClose").addEventListener("click", e =>
{
document.querySelector("nav.sideNav").style.width = "0";
document.querySelector("main.editor").style.marginLeft = "0";
document.querySelector("#navOpen").style.visibility = "visible";
});