<!--views/admin/header.php-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title><?php echo $blogTitle.' - '.$pageTitle ?></title>
        <script src="public/scripts/jQuery.js"></script>
        <link href="public/fonts/setup.css" rel="stylesheet" ></link>
        <link href="public/images/site_logo.png" rel="icon" ></link>
        <link href="public/styles/global.css" rel="stylesheet"></link>
        <link href="public/styles/admin/header.css" rel="stylesheet"></link>
    </head>
    <body>
    <div class='site'>

    <div class="Header">
        <div class='wrapper region'>
            <div class='logo'>
                <?php echo $pageTitle ?>
            </div>
            <form class='search'>
                <select name='category'>
                    <option>ការផ្សាយ</option>
                </select>
                <input type='text' />
                <input type='submit' value='ស្វែង​រក' />
            </form>
            <div class='logout'>
                <a href='./'>ទំព័រ​មុខ<a> | <a href='./admin_logout'>ចេញ​ក្រៅ</a>
            </div>
        </div>
    </div>

 

/*public/styles/admin/header.css*/
.region{
    max-width: 1200px;
}

.site{
    margin-top: 0;
}

.Header{
    background: var(--background-dark);
}

.Header .wrapper{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    padding: 5px;
}

.Header .wrapper .logo{
    font: 35px/1.5 Anton, Limonf3;
}

.Header .wrapper .search{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Header .wrapper .search input, 
.Header .wrapper .search select{
    font: var(--body-font);
    padding: 3px 10px;
}

.Header .wrapper .logout{
    text-align: right;
    font-size: 18px;
}

.Header .wrapper .logout a{
    color: white;
}

.Main{
    margin-top: 30px;
    display: grid;
    grid-template-columns: 25% auto;
}

 

GitHub: https://github.com/Sokhavuth/gazetta

Heroku: https://khmerweb-gazetta.herokuapp.com/