webdev_finalprojects/header.php at main · mikoaf/webdev_finalprojects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<style>

    .badge{
        background: green;
    }
    /* Mobile responsive */
    .navBar {
        /* border: solid 2px red; */
    }

    .toggle-mobile{
        display: none;
        background: #439cef;
        height: 30px;
        width: 30px;
        margin: 8px 15px;
        border: solid 1px grey;
        border-radius: 8px;
        padding: 4px;
        cursor: pointer;
    }

    .toggle-mobile:hover{
        background: #3e88ef;
    }

    .toggle-mobile hr{
        margin: 3px 0;
    }

    @media (max-width:725px){
        .navBar{
            display: none;
            position: fixed;
            top: 85px;
            width: 100%;
            background: white;
            min-height: 100vh;
        }

        .navBar ul{
            flex-direction: column;
            gap: 30px;
            text-align: center;
            width: 100%;
        }

        .navBar ul li{
            padding: 10px 0;
        }

        .toggle-mobile{
            display: block;
        }
    }
</style>

<header id="header">
    <div>
        <img id="header-logo" src="img/logo_ardu.png" alt="logo" width=80px height=100px>
    </div>

    <div class="toggle-mobile">
        <hr>
        <hr>
        <hr>
    </div>

    <nav class="navBar">
        <ul>
            <li><a href="?">Home</a></li>
            <?php
            echo $is_login ?
            '<li><a href="?keranjang">Keranjang</a><span class="badge" id="jumlah_item_keranjang"><?=$jumlah_item_keranjang?></span></li>' :
            '';
            ?>
            <?php
            echo $is_login ?
            "<li><a href=\"?logout\" onclick=\"return-confirm('Yakin mau Sign-Out?')\">Sign-Out</a></li>" :
            '<li><a href="?login">Sign-In</a></li>';
            ?>
            <?php
            echo $is_login ?
            "" :
            '<li><a href="?signup">Sign-Up</a></li>';
            ?>
        </ul>
    </nav>
</header>

<script>
    $(function(){
        $('.toggle-mobile').click(function(){
            $('.navBar').slideToggle();
        })
    })
</script>