Blog Engine with Fresh: Home Menu & Header

Table of Contents

Sokhavuth TIN ・ Aug 9 ・ 2 min read

GitHub: https://github.com/Sokhavuth/deno-fresh
Deno Deploy: https://khmerweb-fresh.deno.dev

// components/front/home.jsx

/** @jsx h */
import { h } from "preact";
import Base from "../base.jsx";


function HomeJsx(props){ 
    return(
        <section class="Home">
            <link href="/styles/front/home.css" rel="stylesheet" />
            <script src="/scripts/menu.js"></script>
            <header>
                <div class="inner region">
                    <div class="title"><a href="/">{ props.data.setting.site_title }</a></div>
                    <form action="search" method="post">
                        <select class="category" name="frontSearch">
                            <option>Posts</option>
                            <option>Books</option>
                        </select>
                        <input type="text" name="q" required placeholder="Search" />
                        <input type="submit" value="Submit" />
                    </form>
                    <div class="login">
                        <a href="/login">Login</a> | <a href="#">Register</a>
                    </div>
                </div>
            </header>
            <div class="menu">
                <div class="inner region">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
                    <link rel="stylesheet" href="/styles/front/menu.css" />

                    <div class="topnav" id="myTopnav" dangerouslySetInnerHTML={{__html: `
                        <a href="/" class="active">Home</a>
                        <a href="#news">News</a>
                        <a href="#contact">Contact</a>
                        <a href="#about">About</a>
                        <a href="javascript:void(0);" class="icon" onclick="mobileMenu()">
                            <i class="fa fa-bars"></i>
                        </a>
                    `}}/>
                </div>
            </div>
        </section>
    )
}


export default function Home(props){
    props.data.page = HomeJsx;
    return(
        <Base data={props.data} />
    )
}

// static/scripts/menu.js


function mobileMenu(){
    const x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
    x.className += " responsive";
    } else {
    x.className = "topnav";
    }
}

/* static/styles/front/menu.css */

.Home .menu{
    background: #333;
}

.Home .menu .topnav {
    background-color: #333;
    overflow: hidden;
}

.Home .menu .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 17px;
}

.Home .menu .topnav a:hover {
    background-color: #ddd;
    color: black;
}

.Home .menu .topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.Home .menu .topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .Home .menu .topnav a:not(:first-child) {display: none;}
    .Home .menu .topnav a.icon {
      float: right;
      display: block;
    }
}

@media screen and (max-width: 600px) {
    .Home .menu .topnav.responsive {position: relative;}
    .Home .menu .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .Home .menu .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}