panel

frontend/static/js/css/panel/main.scss

@@ -0,0 +1,147 @@
+/*
+<style>
+  /* RESET RULES
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+  :root {
+    --page-header-bgColor: #242e42;
+    --page-header-bgColor-hover: #1d2636;
+    --page-header-txtColor: #dde9f8;
+    --page-header-headingColor: #7889a4;
+    --page-header-width: 220px;
+    --page-content-bgColor: #f0f1f6;
+    --page-content-txtColor: #171616;
+    --page-content-blockColor: #fff;
+    --white: #fff;
+    --black: #333;
+    --blue: #00b9eb;
+    --red: #ec1848;
+    --border-radius: 4px;
+    --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
+    --switch-bgLightModeColor: #87cefa;
+    --switch-sunColor: gold;
+    --switch-moonColor: #f4f4f4;
+    --switch-bgDarkModeColor: #1f1f27;
+	
+  }
+
+$nav-width: 220px;
+$nav-txt-color: #dde9f8;
+$nav-bg-color: #242e42;
+
+$page-content-blockColor: #fff;
+$border-radius: 4px;
+$black: #333;
+$white: #fff;
+
+
+  /* HEADER STYLES
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+  .nav-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    padding-top: 20px;
+    width: $nav-width;
+    color: $nav-txt-color;
+    background: $nav-bg-color;
+  }
+
+  .nav {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .nav__home-btn {
+    display: block;
+    margin: 0 15px;
+  }
+
+  .nav__logo {
+    max-width: 120px;
+    fill: $white;
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
+      brightness(104%) contrast(101%);
+  }
+
+  .nav__show-menu {
+    display: none;
+    margin-left: 5px;
+    padding: 4px;
+    background: $page-content-blockColor;
+    border-radius: $border-radius;
+  }
+
+  .nav__show-menu-icon {
+    fill: $black;
+    transition: transform 0.2s;
+  }
+
+  .nav-menu {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin-top: 35px;
+  }
+
+  .page-header .admin-menu li:nth-last-child(2) {
+    margin-bottom: 35px;
+  }
+
+  .page-header .admin-menu li:last-child {
+    margin-top: auto;
+    margin-bottom: 20px;
+  }
+
+  .page-header .admin-menu li > * {
+    width: 100%;
+    padding: 12px 15px;
+  }
+
+  .page-header .admin-menu .switcher {
+    display: inline-block;
+    width: auto;
+  }
+
+  .page-header .admin-menu .menu-heading h3 {
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    font-size: 12px;
+    margin-top: 12px;
+    color: var(--page-header-headingColor);
+  }
+
+  .page-header .admin-menu svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--page-header-txtColor);
+    margin-right: 10px;
+  }
+
+  .page-header .admin-menu a,
+  .page-header .admin-menu button {
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+  }
+
+  .page-header .admin-menu a:hover,
+  .page-header .admin-menu a:focus,
+  .page-header .admin-menu button:hover,
+  .page-header .admin-menu button:focus {
+    background: var(--page-header-bgColor-hover);
+    color: var(--blue);
+    outline: none;
+  }
+
+  .page-header .admin-menu a:hover svg,
+  .page-header .admin-menu a:focus svg,
+  .page-header .admin-menu button:hover svg,
+  .page-header .admin-menu button:focus svg {
+    fill: var(--blue);
+  }
+
+  */

frontend/static/js/index.js

@@ -2,6 +2,7 @@ import './css/forms.scss';
 
 import signin from './auth/signin';
 import registerUser from './auth/register';
+import {run as runPanel} from './panel/index';
 import {checkUsernameEventHandler} from './auth/userExists';
 
 if (window.location.pathname == '/') {
@@ -12,8 +13,9 @@ if (window.location.pathname == '/') {
   form.addEventListener('submit', registerUser, true);
   let username = document.getElementById('username');
   username.addEventListener('input', checkUsernameEventHandler, false);
+} else if (window.location.pathname.includes('panel')) {
+  runPanel();
 } else {
 }
 
-
 //export default signin;

frontend/static/js/panel/index.js

@@ -0,0 +1,67 @@
+export const run = () => {
+  const html = document.documentElement;
+  const body = document.body;
+  const menuLinks = document.querySelectorAll('.admin-menu a');
+  const collapseBtn = document.querySelector('.admin-menu .collapse-btn');
+  const toggleMobileMenu = document.querySelector('.toggle-mob-menu');
+  const switchInput = document.querySelector('.switch input');
+  const switchLabel = document.querySelector('.switch label');
+  const switchLabelText = switchLabel.querySelector('span:last-child');
+  const collapsedClass = 'collapsed';
+  const lightModeClass = 'light-mode';
+
+  /*TOGGLE HEADER STATE*/
+  collapseBtn.addEventListener('click', function() {
+    body.classList.toggle(collapsedClass);
+    this.getAttribute('aria-expanded') == 'true'
+      ? this.setAttribute('aria-expanded', 'false')
+      : this.setAttribute('aria-expanded', 'true');
+    this.getAttribute('aria-label') == 'collapse menu'
+      ? this.setAttribute('aria-label', 'expand menu')
+      : this.setAttribute('aria-label', 'collapse menu');
+  });
+
+  /*TOGGLE MOBILE MENU*/
+  toggleMobileMenu.addEventListener('click', function() {
+    body.classList.toggle('mob-menu-opened');
+    this.getAttribute('aria-expanded') == 'true'
+      ? this.setAttribute('aria-expanded', 'false')
+      : this.setAttribute('aria-expanded', 'true');
+    this.getAttribute('aria-label') == 'open menu'
+      ? this.setAttribute('aria-label', 'close menu')
+      : this.setAttribute('aria-label', 'open menu');
+  });
+
+  /*SHOW TOOLTIP ON MENU LINK HOVER*/
+  for (const link of menuLinks) {
+    link.addEventListener('mouseenter', function() {
+      if (
+        body.classList.contains(collapsedClass) &&
+        window.matchMedia('(min-width: 768px)').matches
+      ) {
+        const tooltip = this.querySelector('span').textContent;
+        this.setAttribute('title', tooltip);
+      } else {
+        this.removeAttribute('title');
+      }
+    });
+  }
+
+  /*TOGGLE LIGHT/DARK MODE*/
+  if (localStorage.getItem('dark-mode') === 'false') {
+    html.classList.add(lightModeClass);
+    switchInput.checked = false;
+    switchLabelText.textContent = 'Light';
+  }
+
+  switchInput.addEventListener('input', function() {
+    html.classList.toggle(lightModeClass);
+    if (html.classList.contains(lightModeClass)) {
+      switchLabelText.textContent = 'Light';
+      localStorage.setItem('dark-mode', 'false');
+    } else {
+      switchLabelText.textContent = 'Dark';
+      localStorage.setItem('dark-mode', 'true');
+    }
+  });
+};