Skip to content

Commit

Permalink
Made the Nav again and enhanced other comp. #33
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabcodingzest
fabcodingzest committed Aug 13, 2020
1 parent beb879a commit fd7bbbb
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 158 deletions.
2 changes: 1 addition & 1 deletion routes/api/cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const getPrice = require("../../helpers/getPrice");
router.get("/:symbol", ensureAuth, async (req, res) => {
const symbol = req.params.symbol;
const price = await getPrice(symbol);
res.status(200).render("cart", { layout: "layouts/app", symbol, price });
res.status(200).render("cart", { layout: "layouts/app", symbol, price, href: '/market' });
});

// @desc To buy
Expand Down
4 changes: 2 additions & 2 deletions routes/api/market.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
// @route GET /Market
// @access Private
router.get("/", ensureAuth, async (req, res) => {
res.status(200).render("market", { layout: "layouts/app", jsonData });
res.status(200).render("market", { layout: "layouts/app", jsonData, href: '/market' });
});

module.exports = router;
2 changes: 1 addition & 1 deletion routes/api/portfolio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
// @access Private
router.get("/", ensureAuth, (req, res) => {
let avatar = req.user.image;
res.status(200).render("portfolio", { layout: "layouts/app", avatar });
res.status(200).render("portfolio", { layout: "layouts/app", avatar, href: '/portfolio' });
});

module.exports = router;
2 changes: 1 addition & 1 deletion views/layouts/app.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</head>

<body>
<div class="grid md:grid-cols-5">
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full">
<%- include('../partials/_nav.ejs') %> <%- body %>
</div>
<script src="javascript/script.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion views/market.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="text-gray-700 body-font">
<section class="text-gray-700 body-font md:pl-64 md:mx-auto">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<% for(var i=0; i < jsonData.length; i++) { %>
Expand Down
198 changes: 47 additions & 151 deletions views/partials/_nav.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,156 +1,52 @@
<div class="md:col-span-1 md:flex">
<!-- nav bar -->

<nav class="text-right fixed mx-3">
<div class="flex justify-between items-center">
<!-- tarde byte heading -->

<h1 class="font-bold uppercase p-4 border-b border-gray-100">
<a
href="/"
class="hover:text-gray-900 tracking-widest border-b-2 border-grey-100 text-3xl pb-2 pt-32"
>TRADEBYTE
</a>
</h1>

<!-- burger icon for nav bar -->

<div class="px-4 cursor-pointer md:hidden" id="burger">
<svg
class="w-6 h-6"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<div @click.away="open = false"
class="flex flex-col w-full md:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen md:z-50 md:fixed md:left-0 md:top-0"
x-data="{ open: false }">
<div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between ">
<h1 class="font-bold uppercase border-b border-gray-100 w-full text-center">
<a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-3xl pb-2 pt-32">Tradebyte</a>
</h1>
<button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'block': open, 'hidden': !open}" class="flex-grow md:block px-4 pb-4 md:pb-0 ">
<div class="flex justify-center align-center rounded-full">
<img class="mx-20 h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="images/profile.jpg" alt=" " />
</div>

<!-- unordered list of dashboard and market -->

<div class="flex-col gap-20">
<div>
<ul class="text-sm mt-6 hidden md:block" id="menu">
<!-- profile picture of the user -->

<li>
<div class="flex-shrink-0 w-20 h-20 align-bottom">
<img
class="mx-20 h-full w-full border-4 box-1"
style="
border: 10px solid rounded;
border-image-source: linear-gradient(45deg, #266fea, #41d7aa);
border-image-slice: 1;
"
src=""
alt=" "
/>
</div>
</li>

<!-- trading status -->

<li class="pb-8 pt-4 py-1">
<a
href="# "
class="block px-4 flex justify-center bg-green-200 rounded-full text-green-900 text-xl font-bold ml-2"
><svg
class="w-5 ml-2 mr-1"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
Active</a
>
</li>

<li class="py-1">
<a
href="/portfolio"
class="block px-4 flex justify-start border-l-4 border-tempc-400 text-xl font-bold"
>
<svg
class="w-5 ml-2 mr-1"
fill="none "
stroke-linecap="round "
stroke-linejoin="round "
stroke-width="2 "
viewBox="0 0 24 24 "
stroke="currentColor "
>
<path
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z "
></path>
</svg>
<span>Dashboard</span>
</a>
</li>

<li class="py-1">
<a
href="/market"
class="block px-4 flex justify-start border-l-4 border-white text-xl font-bold"
>
<svg
class="w-5 ml-2 mr-1"
fill="none "
stroke-linecap="round "
stroke-linejoin="round "
stroke-width="2 "
viewBox="0 0 24 24 "
stroke="currentColor "
>
<path
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "
></path>
</svg>
<span>Market</span>
</a>
</li>
</ul>
</div>

<!-- bottom navbar -->

<!-- time left progress bar box -->

<div
class="bg-transparent border border-gray-200 py-3 rounded relative font-smaller lg:mt-32 mr-4"
>
<div class="w-full h-1">
<div class="fluentProgressBar-normal pr-2" style="width: 80%;"></div>
</div>
<strong class="font-bold text-tempc-400">2 hours, 20 min</strong>
<span class="block sm:inline">left for today</span>
</div>

<!-- log out button -->

<div
class="flex justify-center block px-4 ml-8 mr-12 flex bg-gray-200 rounded-md mt-4 text-tempc-400 text-2xl font-bold ml-2 align-bottom"
>
<svg class="w-6 ml-2 mr-1" fill="currentColor" viewBox="0 0 20 20">
<a class="block w-2/4 max-w-xs md:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
href="#"><svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor">
<path d="M5 13l4 4L19 7"></path>
</svg>Trading Active</a>
<div class="nav-box h-full flex flex-col justify-start">

<a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/portfolio' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
href="/portfolio"> <svg class="w-5 ml-2 mr-1 " fill="none " stroke-linecap="round " stroke-linejoin="round "
stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
<path
fill-rule="evenodd"
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z ">
</path>
</svg>Dashboard</a>
<a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/market' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
href="/market"><svg class="w-5 ml-2 mr-1 " fill="none " stroke-linecap="round " stroke-linejoin="round "
stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
<path d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "></path>
</svg>Market</a>
<a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex"
href="/auth/logout"><svg class="w-6 ml-2 mr-1 " fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<a href="/auth/logout">LogOut</a>
</div>
clip-rule="evenodd"></path>
</svg>Logout</a>
</div>

<%- include('./_footer.ejs') %>
</nav>
<!-- navbar closed -->
</div>
</div>
2 changes: 1 addition & 1 deletion views/portfolio.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<main class="relative px-16 py-6 md:col-span-4 bg-gray-300 ">
<main class="relative px-16 py-6 md:col-span-4 bg-gray-300 md:pl-64 md:mx-auto">

<!-- header -->

Expand Down

0 comments on commit fd7bbbb

Please sign in to comment.