Video-46-Show-Categories-In-Sidebar-Menu

Author: basir

frontend/index.html

@@ -19,6 +19,7 @@
  <div class="overlay" id="message-overlay"></div>
  <div class="grid-container">
  <header id="header-container"></header>
+ <aside id="aside-container"></aside>
  <main id="main-container"></main>
  <footer>
  All rights reserved @2020

frontend/src/components/Aside.js

@@ -0,0 +1,35 @@
+const Aside = {
+ render: async () => {
+ return `
+ <div class="aside-header">
+ <div>SHOP BY CATEGORY</div>
+ <button class="aside-close-button" id="aside-close-button">x</button>
+ </div>
+ <div class="aside-body">
+ <ul class="categories">
+ <li>
+ <a href="/#/?q=shirt"
+ >Shirts
+ <span><i class="fa fa-chevron-right"></i></span>
+ </a>
+ </li>
+ <li>
+ <a href="/#/?q=pant"
+ >Pants
+ <span><i class="fa fa-chevron-right"></i></span>
+ </a>
+ </li> 
+ </ul>
+ </div>`;
+ },
+ after_render: async () => {
+ document.getElementById('aside-container').classList.remove('open');
+ document
+ .getElementById('aside-close-button')
+ .addEventListener('click', async () => {
+ document.getElementById('aside-container').classList.remove('open');
+ });
+ },
+};
+
+export default Aside;

frontend/src/components/Header.js

@@ -7,6 +7,9 @@ const Header = {
  const { value } = parseRequestUrl();
  return ` 
  <div class="brand">
+ <button id="aside-open-button">
+ &#9776;
+ </button>
  <a href="/#/">jsamazona</a>
  </div>
  <div class="search">
@@ -33,6 +36,12 @@ const Header = {
  const searchKeyword = document.getElementById('q').value;
  document.location.hash = `/?q=${searchKeyword}`;
  });
+
+ document
+ .getElementById('aside-open-button')
+ .addEventListener('click', async () => {
+ document.getElementById('aside-container').classList.add('open');
+ });
  },
 };
 export default Header;

frontend/src/index.js

@@ -15,6 +15,7 @@ import DashboardScreen from './srceens/DashboardScreen';
 import ProductListScreen from './srceens/ProductListScreen';
 import ProductEditScreen from './srceens/ProductEditScreen';
 import OrderListScreen from './srceens/OrderListScreen';
+import Aside from './components/Aside';
 
 const routes = {
  '/': HomeScreen,
@@ -45,6 +46,11 @@ const router = async () => {
  const header = document.getElementById('header-container');
  header.innerHTML = await Header.render();
  await Header.after_render();
+
+ const aside = document.getElementById('aside-container');
+ aside.innerHTML = await Aside.render();
+ await Aside.after_render();
+
  const main = document.getElementById('main-container');
  main.innerHTML = await screen.render();
  if (screen.after_render) await screen.after_render();

frontend/style.css

@@ -487,3 +487,65 @@ form.search-form::after {
  clear: both;
  display: table;
 }
+
+/* Aside */
+aside {
+ position: fixed;
+ width: 30rem;
+ background-color: #ffffff;
+ height: 100%;
+ z-index: 1;
+ transform: translateX(-30.1rem);
+ transition: all 0.5s;
+ border-right: 0.1rem #808080 solid;
+}
+aside.open {
+ transform: translateX(0);
+}
+.aside-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 2rem 0.5rem 1rem 2rem;
+ color: #808080;
+}
+
+.aside-close-button {
+ width: 3rem;
+ height: 3rem;
+ font-size: 2rem;
+ cursor: pointer;
+ padding: 0;
+}
+ul.categories {
+ padding: 0;
+}
+.categories > li {
+ list-style-type: none;
+}
+.categories > li > a {
+ display: flex;
+ padding: 1rem;
+ padding-left: 2rem;
+ justify-content: space-between;
+}
+.categories > li > a > span {
+ font-size: 1.4rem;
+ color: #808080;
+}
+.categories > li > a:hover span {
+ color: #444444;
+}
+.categories > li > a:hover {
+ background-color: #f0f0f0;
+ color: #444444;
+}
+
+.brand button {
+ font-size: 3rem;
+ padding: 0.5rem;
+ background: none;
+ border: none;
+ color: #ffffff;
+ cursor: pointer;
+}