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;
}
}
Top comments (0)