Register-Layout

index.html

<header>
  <div></div>
  <div></div>
  <div id="theme-switch">
    <span id=sun></span>
    <span id=moon></span>
  </div>
</header>

<main>
  <nav>
    <div class="nav-head">
      <a href="#home" class="icon home active"></a>
      <a href="#search" class="icon search"></a>
    </div>
    <div class="nav-content">
      <a href="#a">A</a>
      <a href="#b">B</a>
      <a href="#c">C</a>
      <a href="#d">D</a>
      <a href="#e">E</a>
      <a href="#f">F</a>
      <a href="#g">G</a>
      <a href="#h">H</a>
      <a href="#i">I</a>
      <a href="#j">J</a>
      <a href="#k">K</a>
      <a href="#l">L</a>
      <a href="#m">M</a>
      <a href="#n">N</a>
      <a href="#o">O</a>
      <a href="#p">P</a>
      <a href="#q">Q</a>
      <a href="#r">R</a>
      <a href="#s">S</a>
      <a href="#t">T</a>
      <a href="#u">U</a>
      <a href="#v">V</a>
      <a href="#w">W</a>
      <a href="#x">X</a>
      <a href="#y">Y</a>
      <a href="#z">Z</a>
    </div>
  </nav>
  <article>
    <h1>#HOME</h1>
  </article>
</main>
<footer>

</footer>

register-layout.markdown

Register-Layout

A Pen by Kolja on CodePen.

License.

script.js

// elements
const navigationElement = document.querySelector("nav");
const allNavElements = document.querySelectorAll("nav a");
const NavHeadElement = document.querySelector(".nav-head");
const NavContentElement = document.querySelector(".nav-content");
const alphabetNavElements = document.querySelectorAll(".nav-content a");
const main = document.querySelector("main");
const article = document.querySelector("article");

// variables

window.onload = function () {
  setHeights();
  colorMode();
  addSVGs();
};

window.onresize = function () {
  setHeights();
};

/**
 *
 * add eventListener for all elements in navigation
 *
 */
for (const navElement of allNavElements) {
  navElement.addEventListener("click", navClick);
}

/**
 *
 * get the click on the navigation register and set the active register
 *
 */
function navClick(el) {
  // remove active class
  try {
    document.querySelector("nav a.active").classList.remove("active");
  } catch {}
  // add active class to current navElement
  el.target.classList.add("active");
  // just for demo
  document.querySelector(
    "article h1"
  ).innerHTML = el.target.attributes.href.value.toUpperCase();
}

function addSVGs() {
  const svg_array = [
    {
      name: "sun",
      element: "#sun",
      svg:
        '<svg width="24" height="24" viewBox="0 0 24 24" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3V4M12 20V21M21 12H20M4 12H3M18.364 18.364L17.6569 17.6569M6.34315 6.34315L5.63604 5.63604M18.364 5.63609L17.6569 6.3432M6.3432 17.6569L5.63609 18.364M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" /></svg>'
    },
    {
      name: "moon",
      element: "#moon",
      svg:
        '<svg width="24" height="24" viewBox="0 0 24 24" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3542 15.3542C19.3176 15.7708 18.1856 16.0001 17 16.0001C12.0294 16.0001 8 11.9706 8 7.00006C8 5.81449 8.22924 4.68246 8.64581 3.64587C5.33648 4.9758 3 8.21507 3 12.0001C3 16.9706 7.02944 21.0001 12 21.0001C15.785 21.0001 19.0243 18.6636 20.3542 15.3542Z" /></svg>'
    },
    {
      name: "home",
      element: ".home",
      svg:
        '<svg width="24" height="24" viewBox="0 0 24 24" stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15" /></svg >'
    },
    {
      name: "search",
      element: ".search",
      svg:
        '<svg width="24" height="24" viewBox="0 0 24 24"  stroke="#4A5568" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" /></svg>'
    }
  ];

  svg_array.forEach((svg) => {
    document.querySelector(svg.element).innerHTML = svg.svg;
  });
}

/**
 *
 * defines the height of the register tabs
 * and after that the height of the main element
 *
 */
function setHeights() {
  let newRegisterCount;

  // get height of nav-head element
  let navHeadElementHeight = NavHeadElement.offsetHeight;
  // console.log('navHeadElementHeight', navHeadElementHeight);

  // get height of nav-content element
  currentNavContentHeight = NavContentElement.offsetHeight;
  // console.log('currentNavContentHeight', currentNavContentHeight)

  // get height of the first register element (they all has the same height)
  let curtrentRegisterHeight = alphabetNavElements[0].offsetHeight;
  // console.log('curtrentRegisterHeight', curtrentRegisterHeight)

  // get visible register count
  let registerCount = currentNavContentHeight / curtrentRegisterHeight;
  // console.log('registerCount', registerCount)

  // round registerCount to get an integer value
  let registerCountRound = Math.round(registerCount);
  // console.log('registerCountRound', registerCountRound)

  // parse registerCount to integer value
  let registerCountInt = parseInt(registerCount);
  // console.log('registerCountInt', registerCountInt)

  // set newRegisterCount from rounded (bigger) or parseInt (smaller) value
  if (registerCountInt === registerCountRound) {
    newRegisterCount = registerCountInt;
  } else {
    newRegisterCount = registerCountRound;
  }
  // console.log('newRegisterCount', newRegisterCount)

  // calculate newRegisterHeight
  let newRegisterHeight = currentNavContentHeight / newRegisterCount;
  // console.log('newRegisterHeight', newRegisterHeight)

  // set newRegisterHeight to all elements
  for (const el of alphabetNavElements) {
    el.style.height = newRegisterHeight + "px";
  }
}

/**
 *
 * set light and dark mode switch
 *
 */
function colorMode() {
  if (window.localStorage.getItem("WDW_colorMode")) {
    document.documentElement.setAttribute(
      "data-theme",
      window.localStorage.getItem("WDW_colorMode")
    );
  } else if (
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches
  ) {
    document.documentElement.setAttribute("data-theme", "dark");
    window.localStorage.setItem("WDW_colorMode", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    window.localStorage.setItem("WDW_colorMode", "light");
  }
  // Switch between `dark` and `light`
  document.getElementById("theme-switch").onclick = function () {
    var switchToTheme =
      document.documentElement.getAttribute("data-theme") === "dark"
        ? "light"
        : "dark";
    // Set our currenet theme to the new one
    window.localStorage.setItem("WDW_colorMode", switchToTheme);
    document.documentElement.setAttribute("data-theme", switchToTheme);
  };
}

/**
 *
 * claculate rem to pixel
 *
 */
function convertRemToPixels(rem) {
  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
}

style.css

::-webkit-scrollbar {
  display: none;
}

* {
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;
  transition: all 0.5s;
}

/* https://gist.github.com/manuel-io/4c2f3062447d37848f0ea8fb9020b895 */
:root {
  /* DIMENSIONS */
  --header-height: 50px;
  --footer-height: 25px;
  --register-width: 3rem;
  --main-width: 800px;
  --main-max-width: 90vw;
  --nav-head-element-height: 3rem;
  --nav-content-element-height: 4rem;

  /* DEFAULT COLORS */
  --bg-main: rgb(176, 176, 176);
  --bg-content: rgb(130, 130, 130);
  --bg-tab: rgb(100, 100, 100);
  --border-color-main: rgb(57, 57, 57);
  --border-color-sec: rgb(173, 173, 173);
  --bg-header: rgb(24, 24, 24);
  --bg-subheader: rgb(32, 32, 32);
  --text-color: #ccc;
  --text-hover-color: rgb(173, 173, 173);
  --main-shadow: 5px 5px 8px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
  --bg-main: rgb(226, 226, 226);
  --bg-content: rgb(251, 251, 251);
  --bg-tab: rgb(212, 212, 212);
  --border-color-main: rgb(57, 57, 57);
  --border-color-sec: rgb(173, 173, 173);
  --bg-header: rgb(24, 24, 24);
  --bg-subheader: rgb(32, 32, 32);
  --text-color: rgb(58, 58, 58);
  --text-hover-color: rgb(173, 173, 173);
  --main-shadow: 5px 5px 8px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
  --bg-main: rgb(85, 85, 85);
  --bg-content: rgb(130, 130, 130);
  --bg-tab: rgb(100, 100, 100);
  --border-color-main: rgb(57, 57, 57);
  --border-color-sec: rgb(72, 72, 72);
  --bg-header: rgb(24, 24, 24);
  --bg-subheader: rgb(32, 32, 32);
  --text-color: #ccc;
  --text-hover-color: rgb(173, 173, 173);
  --main-shadow: 5px 5px 8px 2px rgba(0, 0, 0, 0.2);
}

/* PAGE LAYOUT */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  color: var(--text-color);
  background: var(--bg-main);
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma,
    Sans-Serif;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 400;
}

header {
  flex-shrink: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-main);
}

main {
  flex-grow: 1;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: var(--main-max-width);
  width: var(--main-width);
  height: calc(100vh - var(--footer-height) - var(--header-height));
  margin-inline: auto;
  border-radius: 0.5rem;
  box-shadow: var(--main-shadow);
}

footer {
  flex-shrink: 0;
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* COMMON */
a,
a:hover {
  text-decoration: none;
  color: var(--text-color);
}

/* NAVIGARION */
nav {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
}

nav .nav-head {
  position: absolute;
  z-index: 10;
}

nav .nav-head > a {
  height: var(--nav-head-element-height);
}

nav .nav-content {
  position: relative;
  /* padding-top: .5rem; */
  top: calc(2 * var(--nav-head-element-height) - 1px);
  height: calc(100% - 2 * var(--nav-head-element-height) + 1px);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

nav .nav-content > a {
  height: var(--nav-content-element-height);
}

/* TRY let the nav-content scroll a little higher than the previous tab to avoud sharp edges */
/* nav .nav-content a:first-of-type {margin-top: 5px;position: relative;top: .5rem;} */

/* NAVIGATION REGISTER LINKS */
nav a {
  display: flex;
  align-items: center;
  justify-content: start;
  width: var(--register-width);
  padding-left: 35%;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5rem;
  background-color: var(--bg-tab);
  border: 1px solid var(--border-color-sec);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-top: none;
  scroll-snap-stop: normal;
  scroll-snap-align: start;
  transition: all 0.5s;
}

nav a:first-of-type {
  border-top: 1px solid var(--border-color-sec);
}

nav a svg {
  stroke: var(--text-color);
  margin-left: -5px;
  pointer-events: none;
}

nav a.active {
  border-right: none;
  background-color: var(--bg-content);
  color: var(--bg-header);
}

nav a.active svg {
  stroke: var(--bg-header);
}

nav a:not(.active):hover {
  opacity: 0.5;
  transition: opacity 0.5s;
}

nav a:not(.active):hover svg {
  stroke: var(--text-hover-color);
}

/* ARTICLE */
article {
  width: 100%;
  height: calc(100%);
  overflow: hidden;
  background-color: var(--bg-content);
  border: 1px solid var(--border-color-sec);
  border-left: none;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  position: relative;
}

article img {
  display: block;
  max-width: 90%;
  width: 600px;
  height: auto;
  margin-inline: auto;
}

article h1,
article h2 {
  text-align: center;
  color: var(--bg-header);
}

/* THEME-SWITCH */
#theme-switch svg {
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin-right: 1rem;
  stroke: var(--text-color);
}

#theme-switch svg:hover {
  stroke: var(--text-hover-color);
}

[data-theme="dark"] #moon {
  display: none;
}

[data-theme="light"] #sun {
  display: none;
}