Creating Menu for the Frontend

// routes/index.js
const express = require('express');
const router = express.Router();
var vdict = require('../config');
const utility = require('../utility');

router.use(function(req, res, next){
  vdict.khDate = utility.toKhDate(new Date());
  next();
});

router.get('/', function(req, res, next) {
  res.render('index', vdict);
});

module.exports = router;

<!--views/index.ejs-->
<%- include('partials/head') %>
<%- include('partials/facebookapi') %>
<%- include('partials/header') %>

<link rel='stylesheet' href='/stylesheets/index.css' />
<script src='/javascripts/utility.js'></script>

<section id="panel"></section>
<section id="main"></section>

<%- include('partials/footer.ejs') %>

<!--views/partials/header.ejs-->
<section id="header">
<div class="top-menu-outer">
  <div class="top-menu region"><span><%= khDate %></span><span id="kh-clock" class="time">time</span></div>
</div>
<div class="title-outer">
  <h1 class="site-title region">
    <span><a href="/" ><%= site_title %></a></span>
    <img class="news" src="/images/newspaper.png" />
    <span><img class="tvlive" src="/images/livetv.png"/></span>
  </h1>
</div>
<div class="main-menu-outer">
  <nav class='main-menu region'>
    <div class="topnav" id="myTopnav">
      <a id="house" href="/" class="active"><img src="/images/house.png" /></a>
      <a href="#news">ព័ត៌មាន</a>
      <a href="#contact">ទំនាក់ទំនង</a>
      <a href="#about">អំពី​យើង​ខ្ញុំ</a>
      <a href="javascript:void(0);" class="icon" onclick="mobielMenu()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
  </nav>
</div>
<script>
  function mobielMenu() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>
</section>

// public/javascripts/utility.js
class Utility{
  toKhNum(number){
    const khNum = {'0':'០', '1':'១', '2':'២', '3':'៣', '4':'៤', '5':'៥', '6':'៦', '7':'៧', '8':'៨', '9':'៩'};
    const stringNum = number.toString();
    var khString = '';
   
    for(var i in stringNum){
      var char = stringNum.charAt(i);
      khString += khNum[char];
    }
   
    return khString;
  }

  toKhDate(rawDate){
    const KhmerDays = ['អាទិត្យ', 'ច័ន្ទ', 'អង្គារ', 'ពុធ', 'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍'];
    const KhmerMonths = ['មករា', 'កុម្ភៈ', 'មិនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ'];

    const date = new Date(rawDate);
    const month = date.getMonth();
    const day = date.getDay();
    const daym = this.toKhNum(date.getDate());
    const year = this.toKhNum(date.getFullYear());
    
    return ('ថ្ងៃ '+KhmerDays[day]+' ទី '+daym+' '+KhmerMonths[month]+' '+year);
  }

  clock(){
    var period = 'ព្រឹក';
    var today = new Date();
    var h = today.getHours();
    if(h>12){
      h = h-12;
      period = 'ល្ងាច';
    }
    var m = today.getMinutes();
    var s = today.getSeconds();
    h = utility.toKhNum(h);
    m = utility.toKhNum(utility.checkTime(m));
    s = utility.toKhNum(utility.checkTime(s));
  
    document.getElementById('kh-clock').innerHTML = h + " : " + m + " : " + s+' '+period;
    var t = setTimeout(utility.clock, 500);
  }
  
  checkTime(i) {
    if (i < 10){i = "0" + i};  
    return i;
  }

}//end class

const utility = new Utility();

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}
body{
  font:14px Vidaloka, OdorMeanChey;
}
a{
  color:#e20000;
  text-decoration: none;
}
a:hover{
  opacity:.7;
}
.region{
  max-width: 1100px;
  margin:0 auto;
}
#header{
  background:#e20000;
  color:white;
}
#header .top-menu-outer{
  padding:5px 0;
  border-bottom: 5px solid black;
}
#header .top-menu{
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}
#header .top-menu .time{
  text-align: right;
}
#header .title-outer{
  background: #3d3d3d;
  padding: 10px 0;
}
#header .site-title{
  display: grid;
  grid-template-columns:auto auto auto;
  align-items: center;
  font:50px/1.75 Anton, Moul;
  text-shadow:0px 0px 0 rgb(231,231,231), 
  1px 1px 0 rgb(216,216,216), 
  2px 2px 0 rgb(202,202,202), 
  3px 3px 0 rgb(187,187,187), 
  4px 4px 0 rgb(173,173,173), 
  5px 5px 0 rgb(158,158,158), 
  6px 6px 0 rgb(144,144,144), 
  7px 7px 6px rgba(0,0,0,0.6), 
  7px 7px 1px rgba(0,0,0,0.5), 
  0px 0px 6px rgba(0,0,0,.2);
}
#header .site-title a{
  color:white;
}
#header .site-title img{
  width: 150px;
}
#header .site-title .tvlive{
  float: right;
}
#header .site-title .news{
  margin: 0 auto;
  width:120px;
}
#header .main-menu-outer{
  background: black;
}
.topnav {
  background-color:transparent;
  overflow: hidden;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  font: 16px/1.5 Oswald, Bayon;
}
.topnav #house{
  padding-top:0;
  padding-bottom:10px;
}
.topnav #house img{
  width: 40px;
  position: relative;
  top:5px;
}
.topnav a:hover {
  background-color:rgb(34, 34, 34);
}
.topnav a.active {
  background-color: rgb(46, 46, 46);
  color: white;
}
.topnav .icon {
  display: none;
}
.footer{
  padding: 30px 0;
  text-align:center;
}
@media only screen and (max-width:600px){
  #header .top-menu{
    padding: 0 10px;
    grid-template-columns: 100%;
  }
  #header .top-menu span,
  #header .top-menu .time{
    text-align:center;
  }
  #header .site-title{
    grid-template-columns:100%;
    text-align:center;
  }
  #header .site-title .tvlive{
    float: none;
  }
  #header .site-title .news{
    margin: 10px auto;
  }
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

GitHub: "https://github.com/Sokhavuth/multimedia
Heroku: https://khmerweb-multimedia.herokuapp.com/