JSFiddle - React, Tailwind, and code Playground

by louvalman

HTML

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Layout #1 LOUVALMAN</title>
    <meta name="simple layout ld" content="A simple layout - louvalman">
    <meta name="louvalman" content="LD">

    <meta property="og:title" content="A simple layout - louvalman">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.simplelay.netlify.com">
    <meta property="og:description" content="A simple layout - louvalman">
    <meta property="og:image" content="image.png">

    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/thinline.css">
</head>

<body>
    <header>
        <div id="sidenavid" class="sidenavclass">
            <a href="#" class="closeicon">
                <h1 class="h1-top" aria-hidden="true">h1 title</h1>
            </a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
        </div>
        <div id="main">
            <nav id="navbar">
                <span onclick="toggleNav()">
                    <div class="navbar-brand">
                        <i onclick="toggleIcon(this)" class="fa fa-bars fa-2x"></i>
                    </div>
                </span>
                <ul class="nav-list" id="navlist">
                    <li class="nav-list-items"><a href="#">Home</a></li>
                    <li class="nav-list-items dropdown"><a href="#">Products</a>
                        <div class="dropdown-content">
                            <a href="#">Product #1</a>
                            <a href="#">Product #2</a>
                        </div>
                    </li>
      ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@100;200;300;500&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --Lato: "Lato", light;
    --Lato2: "Lato", regular;
    --Montserrat: "Montserrat", thin;
    --Montserrat2: "Montserrat", medium;
    --light-black: #1e1e1e;
    --hover-color: #92e0a5;
    --text-color: #1e1e1e;
    --bggradient: #e3f4f1;
    --bggradient2: linear-gradient(220.55deg, #665da1 0%, #418CB7 100%);
    --light-gray: rgba(255, 255, 255, 0.877)
}

html {
    background: var(--bggradient);
    height: 100%;
}

body {
    margin: 0vmin 0vmin;
}

#navbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;

}

#navbar.sticky {
    position: fixed;
    top: 0;
    box-shadow: 5px -1px 6px 5px #dad7d7;
    clip-path: inset(-5px -5px -200px -0px);
    background-color: #e3f4f1;
    transition: 0.5s;
    z-index: 1000;
}

.navbarOffsetMargin {
    padding-top: 80px;
}

header .navbar-brand {
    color: var(--text-color);
    margin-right: auto;
    margin-left: 6vmin;
    font-size: 10px;
}

header .navbar-brand i {
    height: auto;
    user-select: none;
}

header .navbar-brand:hover {
    color: var(--hover-color);
    transition: 0.5s;
}

header .icons {
    height: 50px;
    width: 50px;
}

header .nav-list {
    list-style-type: none;
    overflow: hidden;
    display: flex;
    margin-right: 6vmin;
    margin-left: auto;
}

header li a {
    display: block;
    font-family: var(--Lato);
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 2vmin;
}

header li a:hover {
    color: var(--hover-color);
    transition: 0.5s;
    text-decoration: none;
}

.dropdown-content {
    background-color: var(--hover-color);
    display: none;
    position: absolute;
    background: var(--text-color);
    min-width: 100px;
    box-shadow: 0px 2px 15px 0px...

JavaScript

let sectionMain = document.getElementById("section-main");
let navbar = document.getElementById("navbar");
let navPos = navbar.getBoundingClientRect().top;

window.addEventListener("scroll", e => {
  let viewportHeight = window.innerHeight;
  let scrollPos = window.scrollY;
  if (scrollPos > navPos) {
    navbar.classList.add('sticky');
    sectionMain.classList.add('navbarOffsetMargin');
  } else {
    navbar.classList.remove('sticky');
    sectionMain.classList.remove('navbarOffsetMargin');
  }
});

window.addEventListener("scroll", e => {
  let viewportHeight = window.innerHeight;
  let scrollPos = window.scrollY;
  if (scrollPos > navPos) {
    sidenavid.classList.add('sticky');
  } else {
    sidenavid.classList.remove('sticky');
  }
});

function toggleNav() {
  var element = document.getElementById("sidenavid");
  if (element.style.width == "350px") {
    element.style.width = "0px";
  } else {
    element.style.width = "350px";
  }
  var element = document.getElementById("main");
  if (element.style.marginLeft == "350px") {
    element.style.marginLeft = "0px";
  } else {
    element.style.marginLeft = "350px";
  }
  }


  function toggleIcon(x) {
    x.classList.toggle("fa-xmark");
    x.classList.toggle("fa-bars");
  }