Skip to content

Instantly share code, notes, and snippets.

@DavidColby

DavidColby/sidebar.html Secret

Last active June 27, 2022 05:21
Show Gist options
  • Save DavidColby/46b0684c7c166995830098596a3a192a to your computer and use it in GitHub Desktop.
Save DavidColby/46b0684c7c166995830098596a3a192a to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind + Stimulus Sidebar
Raw
sidebar.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapsible sidebar with Stimulus and Tailwind</title>
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
<script>
(() => {
const application = Stimulus.Application.start()
application.register("sidebar", class extends Stimulus.Controller {
static get targets() {
return [ "sidebarContainer", "icon", "link" ]
}
toggle() {
if (this.sidebarContainerTarget.dataset.expanded === "1") {
this.collapse()
} else {
this.expand()
}
}
collapse() {
this.sidebarContainerTarget.classList.remove("sm:w-1/5")
this.sidebarContainerTarget.dataset.expanded = "0"
this.iconTarget.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
`
this.linkTargets.forEach(link => {
link.classList.add("sr-only")
})
}
expand() {
this.sidebarContainerTarget.classList.add("sm:w-1/5")
this.sidebarContainerTarget.dataset.expanded = "1"
this.iconTarget.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
`
this.linkTargets.forEach(link => {
link.classList.remove("sr-only")
})
}
})
})()
</script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="flex">
<aside class="sm:w-1/5 bg-blue-500 min-h-screen" data-sidebar-target="sidebarContainer" data-expanded="1" data-controller="sidebar">
<div class="sticky top-0 pt-12 px-2 w-full">
<div class="absolute right-2 top-2 cursor-pointer" data-action="click->sidebar#toggle" data-sidebar-target="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
</div>
<nav>
<ul class="flex flex-col overflow-hidden space-y-2">
<li class="hover:text-gray-200 h-8">
<a href="#" class="flex items-center h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span data-sidebar-target="link">
Home
</span>
</a>
</li>
<li class="hover:text-gray-200 h-8">
<a href="#" class="flex items-center h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<span data-sidebar-target="link">
Learn
</span>
</a>
</li>
<li class="hover:text-gray-200 h-8">
<a href="#" class="flex items-center h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span data-sidebar-target="link">
About
</span>
</a>
</li>
<li class="flex items-center hover:text-gray-200 h-8">
<a href="#" class="flex items-center h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
<span data-sidebar-target="link">
Contact
</span>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<main class="sm:w-4/5 p-4 pt-12 px-8">
<div class="max-w-prose space-y-4">
<!-- From https://climate.nasa.gov/evidence/ -->
<p>Earth's climate has changed throughout history. Just in the last 650,000 years there have been seven cycles of glacial advance and retreat, with the abrupt end of the last ice age about 11,700 years ago marking the beginning of the modern climate era — and of human civilization. Most of these climate changes are attributed to very small variations in Earth’s orbit that change the amount of solar energy our planet receives.</p>
<p>The current warming trend is of particular significance because most of it is extremely likely (greater than 95% probability) to be the result of human activity since the mid-20th century and proceeding at a rate that is unprecedented over millennia.</p>
<p>Earth-orbiting satellites and other technological advances have enabled scientists to see the big picture, collecting many different types of information about our planet and its climate on a global scale. This body of data, collected over many years, reveals the signals of a changing climate.</p>
<p>The heat-trapping nature of carbon dioxide and other gases was demonstrated in the mid-19th century. Their ability to affect the transfer of infrared energy through the atmosphere is the scientific basis of many instruments flown by NASA. There is no question that increased levels of greenhouse gases must cause Earth to warm in response.</p>
<p>Ice cores drawn from Greenland, Antarctica, and tropical mountain glaciers show that Earth’s climate responds to changes in greenhouse gas levels. Ancient evidence can also be found in tree rings, ocean sediments, coral reefs, and layers of sedimentary rocks. This ancient, or paleoclimate, evidence reveals that current warming is occurring roughly ten times faster than the average rate of ice-age-recovery warming. Carbon dioxide from human activity is increasing more than 250 times faster than it did from natural sources after the last Ice Age</p>
<p>The planet's average surface temperature has risen about 2.12 degrees Fahrenheit (1.18 degrees Celsius) since the late 19th century, a change driven largely by increased carbon dioxide emissions into the atmosphere and other human activities.4 Most of the warming occurred in the past 40 years, with the seven most recent years being the warmest. The years 2016 and 2020 are tied for the warmest year on record.</p>
<p>The ocean has absorbed much of this increased heat, with the top 100 meters (about 328 feet) of ocean showing warming of more than 0.6 degrees Fahrenheit (0.33 degrees Celsius) since 1969. Earth stores 90% of the extra energy in the ocean.</p>
</div>
</main>
</div>
</div>
</body>
</html>
@ericmp33
Copy link

ericmp33 commented May 26, 2022 •
edited
Loading

Hi, I literally copied the code and opened the HTML file in the browser, but I'm getting this error in the JS console in the DevTools:

test.html:10

Uncaught TypeError: Cannot read properties of undefined (reading 'start')
    at test.html:10:50
    at test.html:51:9

@abidullah667
Copy link

Facing the same issue like in above comments.
Uncaught TypeError: Cannot read properties of undefined (reading 'start')

@umar-bilal-bsf
Copy link

umar-bilal-bsf commented Jun 27, 2022 •
edited
Loading

Old Stimulus has been deprecated, so you need to replace <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script> with <script src="https://unpkg.com/@hotwired/stimulus@3.0.1/dist/stimulus.umd.js"></script> and it will work fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment