sidenav.css

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Serif:wght@400;700&display=swap'); */

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}

   /* Mockup Content */

.topnav {
   /* --- content */
   font-family: 'Noto Serif', 'Times New Roman', serif;
   font-size: 18px;
   font-weight: bold;
   /* --- aligning */
   text-align: center;
   line-height: 54px;
   word-spacing: 18px;
}

.main {
   /* --- content */
   font-size: 90px;
   /* --- aligning */
   text-align: center;
   padding-top: 108px;
}

.footer {
   /* --- content */
   font-family: 'Noto Serif', 'Times New Roman', serif;
   font-size: 45px;
   /* --- aligning */
   text-align: center;
   line-height: 450px;
   word-spacing: 21px;
}

   /* Common Container */

.container {
   /* --- sizing */
   display: block;
   max-width: 720px;
   padding: 0 15px;
   /* --- positioning */
   margin: 0 auto;
}

   /* Extra Padding */

.sidenav {
   padding-top: 15px;
   padding-bottom: 39px;
}

   /* Sidenav Filter */

.sidenav-filter {
   /* --- coloring */
   background: royalblue;
   /* --- positioning */
   margin: 24px 0;
   /* --- aligning */
   word-spacing: -5px;
}

#sidenav-input {
   /* --- coloring */
   border: 1px solid royalblue;
   /* --- sizing */
   width: calc(100% - 48px);
   height: 45px;
}

#sidenav-input::placeholder {
   color: lightgray;
}

#sidenav-button {
   /* --- coloring */
   color: white;
   background: royalblue;
   border: 1px solid royalblue;
   /* --- sizing */
   width: 48px;
   height: 42px;
   /* --- */
   cursor: pointer;
}

   /* Filter's Content */

#sidenav-input {
   /* --- content */
   font-size: 16px;
   /* --- aligning */
   line-height: 45px;
   padding: 0 15px;
}

#sidenav-button {
   font-size: 18px;
   font-weight: bold;
}

   /* Sidenav Navlist */

.sidenav-header,
.sidenav-link {
   display: block;
   padding: 9px 15px;
}

.sidenav-link {
   padding-left: 39px;
}

.sidenav-link {
   color: royalblue;
}

.sidenav-link:hover {
   color: dodgerblue;
}

.sidenav-link.hidden {
   display: none;
}

   /* Navlist's Content */

.sidenav-navlist {
   counter-reset: nthLink;
}

.sidenav-navlist > .sidenav-link::before {
   counter-increment: nthLink;
   content: counter(nthLink) ". ";
}

.sidenav-header,
.sidenav-link {
   font-family: 'Noto Sans', Arial, sans-serif;
   text-decoration: none;
}

.sidenav-header {
   font-weight: bold;
}