Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header class="header">
  <div class="header__logo-wrapper">
    <img class="header__logo" src="https://goo.gl/KVbqEF" />
    <span class="header__logo-text">Documentation</span>
  </div>
  <select class="header__select" onChange="goToLocation()">
    <optgroup label="Introduction">
      <option value="introduction">Introduction</option>
    </optgroup>
    <optgroup label="Objects">
      <option value="objects">Objects</option>
      <option value="basic_types">Basic Types</option>
      <option value="attributes">Attributes</option>
      <option value="special_compound_objects">Special compound objects</option>
    </optgroup>
    <optgroup label="Evaluation of expressions">
      <option value="evaluation_of_expressions">Evaluation of expressions</option>
      <option value="simple_evaluation">Simple evaluation</option>
      <option value="control_structures">Control structures</option>
      <option value="elementary_arithmetic_operations">Elementary arithmetic operations</option>
      <option value="indexing">Indexing</option>
      <option value="scope_of_variables">Scope of variables</option>
    </optgroup>
    <optgroup label="Function">
      <option value="functions">Functions</option>
      <option value="writing_functions">Writing functions</option>
      <option value="functions_as_objects">Functions as objects</option>
      <option value="evaluation">Evaluation</option>
    </optgroup>
    <optgroup label="Object-oriented programming">
      <option value="object-oriented_programming">Object-oriented programming</option>
      <option value="definition">Definition</option>
      <option value="inheritance">Inheritance</option>
      <option value="method_dispatching">Method dispatching</option>
      <option value="usemethod">UseMethod</option>
      <option value="nextmethod">NextMethod</option>
      <option value="group_methods">Group methods</option>
      <option value="writing_methods">Writing methods</option>
    </optgroup>
    <optgroup label="Reference">
      <option value="reference">Reference</option>
    </optgroup>
  </select>
</header>
<div class="sidebar">
  <nav class="sidebar__nav" id="navbar">
    <header class="sidebar__header">R Documentation</header>
    <ul class="sidebar__list">
      <li class="sidebar__item">
        <a class="nav-link sidebar__link sidebar__link--header" href="#introduction">Introduction</a>
      </li>
      <li class="sidebar__item">
        <a class="nav-link sidebar__link sidebar__link--header" href="#objects">Objects</a>
        <ul class="sidebar__list">
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#basic_types">Basic Types</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#attributes">Attributes</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#special_compound_objects">Special compound objects</a>
          </li>
        </ul>
      </li>
      <li class="sidebar__item">
        <a class="nav-link sidebar__link sidebar__link--header" href="#evaluation_of_expressions">Evaluation of expressions</a>
        <ul class="sidebar__list">
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#simple_evaluation">Simple evaluation</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#control_structures">Control structures</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#elementary_arithmetic_operations">Elementary arithmetic operations</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#indexing">Indexing</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#scope_of_variables">Scope of variables</a>
          </li>
        </ul>
      </li>
      <li class="sidebar__item">
        <a class="nav-link sidebar__link sidebar__link--header" href="#functions">Functions</a>
        <ul class="sidebar__list">
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#writing_functions">Writing functions</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#functions_as_objects">Functions as objects</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#evaluation">Evaluation</a>
          </li>
        </ul>
      </li>
      <li class="sidebar__item">
        <a class="nav-link sidebar__link sidebar__link--header" href="#object-oriented_programming">Object-oriented programming</a>
        <ul class="sidebar__list">
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#definition">Definition</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#inheritance">Inheritance</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#method_dispatching">Method dispatching</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#usemethod">UseMethod</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#nextmethod">NextMethod</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#group_methods">Group methods</a>
          </li>
          <li class="sidebar__item">
            <a class="nav-link sidebar__link" href="#writing_methods">Writing methods</a>
          </li>
        </ul>
      </li>
      <li class="sidebar__item sidebar__link--header">
        <a class="nav-link sidebar__link sidebar__link--header" href="#reference">Reference</a>
      </li>
    </ul>
  </nav>
</div>
<main class="main" id="main-doc">
  <section class="main-section section" id="introduction">
    <header class="section__header">Introduction</header>
    <div class="section__left-col">
      <header class="section__title">Introduction</header>
      <p>R is a system for statistical computation and graphics. It provides, among other things, a programming language, high level graphics, interfaces to other languages and debugging facilities. This manual details and defines the R language.</p>
      <p>The R language is a dialect of S which was designed in the 1980s and has been in widespread use in the statistical community since. Its principal designer, John M. Chambers, was awarded the 1998 ACM Software Systems Award for S.</p>
      <p>The language syntax has a superficial similarity with C, but the semantics are of the FPL (functional programming language) variety with stronger affinities with Lisp and APL. In particular, it allows “computing on the language”, which in turn makes it possible to write functions that take expressions as input, something that is often useful for statistical modeling and graphics.</p>
      <p>It is possible to get quite far using R interactively, executing simple expressions from the command line. Some users may never need to go beyond that level, others will want to write their own functions either in an ad hoc fashion to systematize repetitive work or with the perspective of writing add-on packages for new functionality.</p>
      <p>The purpose of this manual is to document the language per se. That is, the objects that it works on, and the details of the expression evaluation process, which are useful to know when programming R functions. Major subsystems for specific tasks, such as graphics, are only briefly described in this manual and will be documented separately.</p>
      <p>Although much of the text will equally apply to S, there are also some substantial differences, and in order not to confuse the issue we shall concentrate on describing R.</p>
      <p>The design of the language contains a number of fine points and common pitfalls which may surprise the user. Most of these are due to consistency considerations at a deeper level, as we shall explain. There are also a number of useful shortcuts and idioms, which allow the user to express quite complicated operations succinctly. Many of these become natural once one is familiar with the underlying concepts. In some cases, there are multiple ways of performing a task, but some of the techniques will rely on the language implementation, and others work at a higher level of abstraction. In such cases we shall indicate the preferred usage.</p>
      <p>Some familiarity with R is assumed. This is not an introduction to R but rather a programmers’ reference manual. Other manuals provide complementary information: in particular Preface in An Introduction to R provides an introduction to R and System and foreign language interfaces in Writing R Extensions details how to extend R using compiled code.</p>
    </div>
    <div class="section__right-col">
    </div>
  </section>
  <section class="main-section section" id="objects">
    <header class="section__header">Objects</header>
    <div class="section__left-col">
      <header class="section__title">Objects</header>
      <p>In every computer language variables provide a means of accessing the data stored in memory. R does not provide direct access to the computer’s memory but rather provides a number of specialized data structures we will refer to as objects. These objects are referred to through symbols or variables. In R, however, the symbols are themselves objects and can be manipulated in the same way as any other object. This is different from many other languages and has wide ranging effects.</p>
      <p>In this chapter we provide preliminary descriptions of the various data structures provided in R. More detailed discussions of many of them will be found in the subsequent chapters. The R specific function typeof returns the type of an R object. Note that in the C code underlying R, all objects are pointers to a structure with typedef SEXPREC; the different R data types are represented in C by SEXPTYPE, which determines how the information in the various parts of the structure is used.</p>
      <p>The following table describes the possible values returned by typeof and what they are.</p>
      <div class="section__two-column">
        <ul class="section__list">
          <li>"NULL"</li>
          <li>"symbol"</li>
          <li>"pairlist"</li>
          <li>"clousure"</li>
          <li>"environment"</li>
          <li>"promise"</li>
          <li>"language"</li>
          <li>"special"</li>
          <li>"builtin"</li>
          <li>"char"</li>
          <li>"logical"</li>
          <li>"integer"</li>
          <li>"double"</li>
          <li>"complex"</li>
          <li>"character"</li>
          <li>"..."</li>
          <li>"any"</li>
          <li>"expression"</li>
          <li>"list"</li>
          <li>"bytecode"</li>
          <li>"externalptr"</li>
          <li>"weakref"</li>
          <li>"raw"</li>
          <li>"S4"</li>
        </ul>
        <ul class="section__list section__list--col-2">
          <li>"NULL"</li>
          <li>"a variable name"</li>
          <li>"a pairlist object (mainly internal)"</li>
          <li>"a function"</li>
          <li>"an environment"</li>
          <li>"an object used to implement lazy evaluation"</li>
          <li>"an R language construct"</li>
          <li>"an internal function that does not evaluate its arguments"</li>
          <li>"an internal function that evaluates its arguments"</li>
          <li>"a ‘scalar’ string object (internal only) ***"</li>
          <li>"a vector containing logical values"</li>
          <li>"a vector containing integer values"</li>
          <li>"a vector containing real values"</li>
          <li>"a vector containing complex values"</li>
          <li>"a vector containing character values"</li>
          <li>"the special variable length argument ***"</li>
          <li>"a special type that matches all types: there are no objects of this type"</li>
          <li>"an expression object"</li>
          <li>"a list"</li>
          <li>"byte code (internal only) ***"</li>
          <li>an external pointer object</li>
          <li>"a weak reference object"</li>
          <li>"a vector containing bytes"</li>
          <li>"an S4 object which is not a simple object"</li>
        </ul>
      </div>
    </div>
    <div class="section__right-col">
  </section>
  <section class="main-section section" id="basic_types">
    <header class="section__header">Basic Types</header>
    <div class="section__left-col">
      <header class="section__title">Basic Types</header>
      <h4>Vector objects</h4>
      <p>Vectors can be thought of as contiguous cells containing data. Cells are accessed through indexing operations such as x[5]. More details are given in Indexing.</p>
      <p>R has six basic (‘atomic’) vector types: logical, integer, real, complex, string (or character) and raw. The modes and storage modes for the different vector types are listed in the following table.</p>
      <table class="section__table">
        <tr>
          <th>typeof</th>
          <th>mode</th>
          <th>storage.mode</th>
        </tr>
        <tr>
          <td>logical</td>
          <td>logical</td>
          <td>logical</td>
        </tr>
        <tr>
          <td>integer</td>
          <td>numeric</td>
          <td>integer</td>
        </tr>
        <tr>
          <td>double</td>
          <td>numeric</td>
          <td>double</td>
        </tr>
        <tr>
          <td>complex</td>
          <td>complex</td>
          <td>complex</td>
        </tr>
        <tr>
          <td>character</td>
          <td>character</td>
          <td>character</td>
        </tr>
        <tr>
          <td>raw</td>
          <td>raw</td>
          <td>raw</td>
        </tr>        
      </table>
      <p>Single numbers, such as 4.2, and strings, such as "four point two" are still vectors, of length 1; there are no more basic types. Vectors with length zero are possible (and useful).</p>
      <p>String vectors have mode and storage mode "character". A single element of a character vector is often referred to as a character string.</p>
    </div>
    <div class="section__right-col">
    </div>
  </section>
  <section class="main-section section" id="attributes">
    <header class="section__header">Attributes</header>
    <div class="section__left-col">
      <header class="section__title">Attributes</header>
      <p>All objects except NULL can have one or more attributes attached to them. Attributes are stored as a pairlist where all elements are named, but should be thought of as a set of name=value pairs. A listing of the attributes can be obtained using attributes and set by <code>attributes&lt;-</code>, individual components are accessed using attr and <code>attr&lt;-</code>.</p>
      <p>Some attributes have special accessor functions (e.g. <code>levels&lt;-</code> for factors) and these should be used when available. In addition to hiding details of implementation they may perform additional operations. R attempts to intercept calls to <code>attr&lt;-</code> and to <code>attributes&lt;-</code> that involve the special attributes and enforces the consistency checks.</p>
      <p>Matrices and arrays are simply vectors with the attribute dim and optionally dimnames attached to the vector.</p>
      <p>Attributes are used to implement the class structure used in R. If an object has a class attribute then that attribute will be examined during evaluation. The class structure in R is described in detail in Object-oriented programming.</p>
      <h4>Names</h4>
      <p>A names attribute, when present, labels the individual elements of a vector or list. When an object is printed the names attribute, when present, is used to label the elements. The names attribute can also be used for indexing purposes, for example, quantile(x)["25%"].</p>
      <p>One may get and set the names using names and <code>names&lt;-</code> constructions. The latter will perform the necessary consistency checks to ensure that the names attribute has the proper type and length.</p>
      <p>Pairlists and one-dimensional arrays are treated specially. For pairlist objects, a virtual names attribute is used; the names attribute is really constructed from the tags of the list components. For one-dimensional arrays the names attribute really accesses dimnames[[1]].</p>
    </div>
    <div class="section__right-col">
    </div>
  </section>
  <section class="main-section section" id="special_compound_objects">
    <header class="section__header">Special Compound Objects</header>
    <div class="section__left-col">
      <header class="section__title">Special Compound Objects</header>
      <h4>Factors</h4>
      <p>Factors are used to describe items that can have a finite number of values (gender, social class, etc.). A factor has a levels attribute and class "factor". Optionally, it may also contain a contrasts attribute which controls the parametrisation used when the factor is used in a modeling functions.</p>
      <p>A factor may be purely nominal or may have ordered categories. In the latter case, it should be defined as such and have a class vector c("ordered"," factor").</p>
      <p>Factors are currently implemented using an integer array to specify the actual levels and a second array of names that are mapped to the integers. Rather unfortunately users often make use of the implementation in order to make some calculations easier. This, however, is an implementation issue and is not guaranteed to hold in all implementations of R.</p>
    </div>
    <div class="section__right-col">
    </div>
  </section>
  <section class="main-section section" id="evaluation_of_expressions">
    <header class="section__header">Evaluation of Expressions</header>
    <div class="section__left-col">
      <header class="section__title">Evaluation of Expressions</header>
      <p>When a user types a command at the prompt (or when an expression is read from a file) the first thing that happens to it is that the command is transformed by the parser into an internal representation. The evaluator executes parsed R expressions and returns the value of the expression. All expressions have a value. This is the core of the language.</p>
      <p>This chapter describes the basic mechanisms of the evaluator, but avoids discussion of specific functions or groups of functions which are described in separate chapters later on or where the help pages should be sufficient documentation.</p>
      <p>Users can construct expressions and invoke the evaluator on them.</p>
    </div>
    <div class="section__right-col">
    </div>
    <div class="section__left-col">
      <h4>Constants</h4>
      <p>Any number typed directly at the prompt is a constant and is evaluated.</p>
    </div>
    <div class="section__right-col">
      <pre><code>
> 1
[1] 1</code>
      </pre>
    </div>
    <div class="section__left-col">
      <p>Perhaps unexpectedly, the number returned from the expression 1 is a numeric. In most cases, the difference between an integer and a numeric value will be unimportant as R will do the right thing when using the numbers. There are, however, times when we would like to explicitly create an integer value for a constant. We can do this by calling the function as.integer or using various other techniques. But perhaps the simplest approach is to qualify our constant with the suffix character ‘L’. For example, to create the integer value 1, we might use.</p>
    </div>
    <div class="section__right-col">
      <pre>
      <code>
> 1L
[1]</code>
      </pre>
    </div>    
    <div class="section__left-col">
      <h4>Symbol lookup</h4>
      <p>When a new variable is created it must have a name so it can be referenced and it usually has a value. The name itself is a symbol. When a symbol is evaluated its value is returned. Later we shall explain in detail how to determine the value associated with a symbol.</p>
    </div>
    <div class="section__right-col">
      <pre>
      <code>
> y &lt;- 4
> y
[1] 4</code>
      </pre>
    </div>
    <div class="section__left-col">
      <h4>Function calls</h4>
      <p>Most of the computations carried out in R involve the evaluation of functions. We will also refer to this as function invocation. Functions are invoked by name with a list of arguments separated by commas.</p>
    </div>
    <div class="section__right-col">
      <pre>
      <code>
> mean(1:10)
[1] 5.5</code>
      </pre>
    </div>
    <div class="section__left-col">
      <h4>Switch</h4>
      <p>Technically speaking, switch is just another function, but its semantics are close to those of control structures of other programming languages.</p>
      <p>The syntax is.</p>
    </div>
    <div class="section__right-col">
      <pre>
      <code>
switch (statement, list)</code>
      </pre>
    </div>
    <div class="section__left-col">
      <p>where the elements of list may be named. First, statement is evaluated and the result, value, obtained. If value is a number between 1 and the length of list then the corresponding element of list is evaluated and the result returned. If value is too large or too small NULL is returned.</p>
    </div>
    <div class="section__right-col">
      <pre><code>
> x &lt;- 3
> switch(x, 2+2, mean(1:10), rnorm(5))
[1]  2.2903605  2.3271663 -0.7060073  1.3622045 -0.2892720
> switch(2, 2+2, mean(1:10), rnorm(5))
[1] 5.5
> switch(6, 2+2, mean(1:10), rnorm(5))
NULL</code>
      </pre>
    </div>
    <div class="section__left-col">
      <p>If value is a character vector then the element of ‘...’ with a name that exactly matches value is evaluated. If there is no match a single unnamed argument will be used as a default. If no default is specified, NULL is returned.</p>
    </div>
    <div class="section__right-col">
      <pre><code>
> y &lt;- "fruit"
> switch(y, fruit = "banana", vegetable = "broccoli", "Neither")
[1] "banana"
> y &lt;- "meat"
> switch(y, fruit = "banana", vegetable = "broccoli", "Neither")
[1] "Neither"</code>
      </pre>
    </div>
    <div class="section__left-col">
      <p>A common use of switch is to branch according to the character value of one of the arguments to a function.</p>
    </div>
    <div class="section__right-col">
      <pre><code>
> centre &lt;- function(x, type) {
+ switch(type,
+        mean = mean(x),
+        median = median(x),
+        trimmed = mean(x, trim = .1))
+ }
> x &lt;- rcauchy(10)
> centre(x, "mean")
[1] 0.8760325
> centre(x, "median")
[1] 0.5360891
> centre(x, "trimmed")
[1] 0.6086504</code>
      </pre>
    </div>
  </section>
  <section class="main-section section" id="simple_evaluation">
    <header class="section__header">Simple Evaluation</header></section>
  <section class="main-section section" id="control_structures">
    <header class="section__header">Control Structures</header></section>
  <section class="main-section section" id="elementary_arithmetic_operations">
    <header class="section__header">Elementary Arithmetic Operations</header></section>
  <section class="main-section section" id="indexing">
    <header class="section__header">Indexing</header></section>
  <section class="main-section section" id="scope_of_variables">
    <header class="section__header">Scope of Variables</header></section>
  <section class="main-section section" id="functions">
    <header class="section__header">Functions</header></section>
  <section class="main-section section" id="writing_functions">
    <header class="section__header">Writing Functions</header></section>
  <section class="main-section section" id="functions_as_objects">
    <header class="section__header">Functions as Objects</header></section>
  <section class="main-section section" id="evaluation">
    <header class="section__header">Evaluation</header></section>
  <section class="main-section section" id="object-oriented_programming">
    <header class="section__header">Object-oriented Programming</header></section>
  <section class="main-section section" id="definition">
    <header class="section__header">Definition</header></section>
  <section class="main-section section" id="inheritance">
    <header class="section__header">Inheritance</header></section>
  <section class="main-section section" id="method_dispatching">
    <header class="section__header">Method Dispatching</header></section>
  <section class="main-section section" id="usemethod">
    <header class="section__header">UseMethod</header></section>
  <section class="main-section section" id="nextmethod">
    <header class="section__header">NextMethod</header></section>
  <section class="main-section section" id="group_methods">
    <header class="section__header">Group Methods</header></section>
  <section class="main-section section" id="writing_methods">
    <header class="section__header">Writing Methods</header></section>
  <section class="main-section section" id="reference">
    <header class="section__header">Reference</header>
    <div class="section__left-col">
      <header class="section__title">Reference</header>
      <p>All the documentation on this page is taken from <a href="https://cran.r-project.org/doc/manuals/r-release/R-lang.html">R Language Definition</a>.</p>
    </div>
    <div class="section__right-col">
    </div>
    </section>
</main>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

.header {
  align-items: center;
  background-color: #fafcfc;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
}
.header__logo-wrapper {
  align-items: center;
  display: flex;
}
.header__logo {
  display: block;
  height: auto;
  max-height: 30px;
  max-width: 100%;
}
.header__logo-text {
  margin-left: 15px;
}
.header__select {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 5px 15px;
}

.sidebar {
  display: none;
}
.sidebar__header {
  display: none;
}


.main {
  margin-top: 71px;
  padding: 5px 30px;
}

.section__header {
  display: none;
}
.section__title {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
}
.section__list {
  list-style: none;
  padding: 0;
}
.section__two-column {
  display: flex;  
}
.section__list--col-2 {
  margin-left: 30px;
}
.section__table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
.section__table td, .section__table th {
  padding: 8px;
}
.section__table tr:nth-child(even) {
  background-color: #fafafa;
}
.section__right-col {
  background-color: #2d2d2d;
  padding-left: 20px;
}

code {
  color: #fafafa;
  word-wrap: break-word;
  white-space: pre-line;
}

@media only screen and (min-width: 768px) {
  .main {
    padding: 0 0 0 30px;
  }
  .section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .section__left-col, .section__right-col {
    flex: 1;
  }
  .section__left-col {
    padding-right: 30px;
  }
}


@media only screen and (min-width: 1224px) {
  .header {
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    left: 0;
    padding: 20px;
    position: fixed;
    top: 0;
    width: 280px;
  }
  .header__select {
    display: none;
  }
  
  .sidebar {
    background-color: #fafcfc;
    border-right: 1px solid #f0f0f0;
    bottom: 0;
    display: block;
    left: 0;
    overflow: auto;
    margin: 0;
    padding: 15px 0;
    position: fixed;
    top: 71px;
    width: 320px;
  }
  .sidebar__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }
  .sidebar__link {
    display: block;
    color: #444;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: capitalize;
  }
  .sidebar__link:hover {
    text-decoration: underline;
  }
  .sidebar__link--header {
    color: #999;
    font-size: 14px;
    text-transform: uppercase;
  }
  
  .main {
    margin-left: 320px;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}
            
          
!
            
              const select = document.querySelector('.header__select')


function goToLocation() {
  window.location.hash = select.options[select.selectedIndex].value
  window.scrollBy(0, -80)
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console