0
\$\begingroup\$

So I've created this Header to include in all my PHP files, and think everything works as it should for now. But since it's the first time I'm creating one, I wanted to have it reviewed just to learn from you guys.

LocalStorage doesn't work on stackoverflow, so to try this the example code have to be downloaded into your own pc. I have some SVG files on my pc that I use, but since I don't have access to them on stackoverflow I just copied some random URLs into my scss file.

the header is mostly just a menu with a light/dark mode toggle (this is where localStorage come into the picture), but does this code look good, or is there any hidden problems with it?

Example code

// check for saved 'darkModeCookie' in localStorage
let darkModeCookie = localStorage.getItem('darkModeCookie');

const darkModeToggle = document.querySelector('#dark-mode-toggle');

const enableDarkMode = () => {
    // 1. Add the class to the body
    document.body.classList.add('darkmodescss');
    // 2. Update darkModeCookie in localStorage
    localStorage.setItem('darkModeCookie', 'enabled');
}

const disableDarkMode = () => {
    // 1. Remove the class from the body
    document.body.classList.remove('darkmodescss');
    // 2. Update darkModeCookie in localStorage
    localStorage.setItem('darkModeCookie', null);
}

// If the user already visited and enabled darkModeCookie, start things off with it on
if (darkModeCookie === 'enabled') {
    enableDarkMode();
}

// When someone clicks the button
darkModeToggle.addEventListener('click', () => {
    // Get their darkModeCookie setting
    darkModeCookie = localStorage.getItem('darkModeCookie');

    // If it not current enabled, enable it
    if (darkModeCookie !== 'enabled') {
        enableDarkMode();
        // If it has been enabled, turn it off
    } else {
        disableDarkMode();
    }
});

function menuToggle() {
    var x = document.getElementById("burgerMenu");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
:root {
    /* Static Colors*/
    --clr-heading-footer: #4C5BA0;
    --clr-button: #4C5BA0;
    --clr-nav-color: #8D90A1;
    /* Dark Theme */
    --clr-bg-dark: #2F2F35;
    --clr-card-bg-dark: #3A3B41;
    --clr-card-body-text-dark: #8D90A1;
    --clr-card-title-text-dark: #D3D3D9;
    --clr-nav-activ-color-dark: #D3D3D9;
    --clr-nav-hover-color-dark: #D3D3D9;
    --dark-moon: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png") center no-repeat;
    --dark-hover-moon: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png") center no-repeat;
    /* (Default) Light Theme */
    --clr-bg-light: #E1E1E1;
    --clr-nav-activ-color-light: #3A3B41;
    --clr-nav-hover-color-light: #3A3B41;
    --light-sun: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png") center no-repeat;
    --light-hover-sun: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png") center no-repeat;
    /* (Default) Set Colors */
    --foreground: var(--clr-bg-dark);
    --background: var(--clr-bg-light);
    --activ-mode-icon: var(--light-sun);
    --activ-hover-mode-icon: var(--light-hover-sun);
    --selected-nav-page: var(--clr-nav-activ-color-light);
    --hover-nav: var(--clr-nav-hover-color-light);
    /* (Default) Page Settings */
    height: 100%;
    font-family: 'Montserrat';
    padding: 0% 12%;
}

.darkmodescss {
    /* Used as classList.add('darkmodescss') by js/toggletheme.js
    Replaces the (Default) Light Theme parameters with Dark Theme */
    --foreground: var(--clr-bg-light);
    --background: var(--clr-bg-dark);
    --activ-mode-icon: var(--dark-moon);
    --activ-hover-mode-icon: var(--dark-hover-moon);
    --selected-nav-page: var(--clr-nav-activ-color-dark);
    --hover-nav: var(--clr-nav-hover-color-dark);
    --clr-icon-width: var(--clr-icon-width);
    --clr-icon-height: var(--clr-icon-height);
}

body {
    background: var(--background);
    color: var(--foreground);
}

.logo-style {
    /* Logo Style */
    font-style: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.438rem;
    letter-spacing: 0.05em;
    color: #4C5BA0;
}


/*
    Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav a:hover {
    color: var(--hover-nav);
}

.topnav a.active {
    color: var(--selected-nav-page);
}

.right-nav {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
}

.nav-icon {
    /* Navigation Icon Sizing - SVG Only */
    width: 2em;
    height: 2em;
    padding: 0.09rem 0.15rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.disp_mode {
    /* (Default) Dark / Light Mode - Icon Handling */
    background: var(--activ-mode-icon) no-repeat;
}

.disp_mode:hover {
    /* (Hover) Dark / Light Mode - Icon Handling */
    background: var(--activ-hover-mode-icon) no-repeat;
}

.topnav-menu {
    /* Burger Menu Content*/
    width: 100%;
    overflow: hidden;
    padding: 0.09rem 0.30rem;
}

.topnav-menu ul {
    /* Burger Menu Content*/
    float: right;
    list-style-type: none;
}

.topnav-menu a {
    color: var(--clr-nav-color);
    text-align: center;
    padding: 0.09rem 0.30rem;
    text-decoration: none;
    font-size: 1.063rem;
}

.topnav-menu a:hover {
    color: var(--hover-nav);
}

.topnav-menu a.active {
    color: var(--selected-nav-page);
}


/*
    Navigation Burger Menu
*/

.line-one {
    width: 1.875rem;
}

.line-two {
    width: 1.875rem;
}

.line-three {
    width: 1.875rem;
}

.burger-menu div {
    width: 1.875rem;
    height: 0.25rem;
    background-color: var(--clr-nav-color);
    margin: 0.313rem 0;
    border-radius: 1.563rem;
}

.burger-menu {
    width: 1.875rem;
}

.burger-menu:hover div {
    width: 1.875rem;
    background-color: var(--hover-nav);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Metrics</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
    <header>
        <div class="topnav">
            <div class="left-nav">
                <a href="#home"><p class="logo-style">Metrics</p></a>
            </div>
            <div class="right-nav">
                <a href="#home" class="active">Home</a>
                <a href="#archives">Archives</a>
                <a href="#coverage">Coverage</a>
                <button type="button" class="dark-mode-toggle disp_mode nav-icon" id="dark-mode-toggle"></button>
                <a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
                    <div class="line-one"></div>
                    <div class="line-two"></div>
                    <div class="line-three"></div>
                </a>
            </div>
        </div>
        <!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
        <div class="topnav-menu" id="burgerMenu" style="display: none;">
            <ul>
                <li><a href="#item1">item1</a></li>
                <li><a href="#item2">item2</a></li>
                <li><a href="#item3">item3</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.