288 lines
12 KiB
HTML
288 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head>
|
|
<title>Manage Your Menu - Persimmon Quilts</title>
|
|
<link rel='canonical' href='https://persimmonquilts.com/post/manage-your-menu/' />
|
|
<meta charset='utf-8'>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
|
<meta name='description' content='Define a sidebar menu' />
|
|
<meta name='theme-color' content='#FD3519' />
|
|
|
|
|
|
<meta name="generator" content="Hugo 0.104.3" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://persimmonquilts.com/sass/style.min.eabe1aa4bd266a15f7b39b122bd6a5cc75cb067e5373631ac21d7815d6240d6f.css" integrity="sha256-6r4apL0mahX3s5sSK9alzHXLBn5Tc2Mawh14FdYkDW8=" media="screen">
|
|
<link rel="stylesheet" href="https://persimmonquilts.com/syntax.min.css" integrity="" media="screen">
|
|
|
|
<meta property="og:title" content="Manage Your Menu" />
|
|
<meta property="og:description" content="Define a sidebar menu" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://persimmonquilts.com/post/manage-your-menu/" /><meta property="article:section" content="post" />
|
|
<meta property="article:published_time" content="2019-05-02T19:06:29+02:00" />
|
|
<meta property="article:modified_time" content="2019-05-02T19:06:29+02:00" />
|
|
|
|
|
|
<meta itemprop="name" content="Manage Your Menu">
|
|
<meta itemprop="description" content="Define a sidebar menu"><meta itemprop="datePublished" content="2019-05-02T19:06:29+02:00" />
|
|
<meta itemprop="dateModified" content="2019-05-02T19:06:29+02:00" />
|
|
<meta itemprop="wordCount" content="93">
|
|
<meta itemprop="keywords" content="" />
|
|
</head>
|
|
<body>
|
|
|
|
<header style="background-image:linear-gradient(
|
|
rgba(0,0,0,0.4),rgba(0,0,0,0.4)
|
|
),url('https://persimmonquilts.com/images/sidebar.jpg')">
|
|
<div class="intro">
|
|
<div class="logo-container">
|
|
<a href="/">
|
|
<img src='https://persimmonquilts.com/images/circle_logo.jpg' alt="Profile Contact" class="rounded-logo">
|
|
</a>
|
|
</div>
|
|
<h2>Hi, I'm LeAnn Weaver</h2>
|
|
<h3>Sharing my work & passion for quilting through longarm quilting, patterns, and designing.</h3>
|
|
<div class="menu">
|
|
|
|
|
|
<p>
|
|
<a href="/about/">
|
|
About
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/">
|
|
Home
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="https://pinterest.com/persimmonquilts">
|
|
Portfolio
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/contact/">
|
|
Contact
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/photos/">
|
|
Photos
|
|
</a>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="socials">
|
|
|
|
|
|
<a href="https://facebook.com/persimmon.quilts" class="social-link" target="_blank" rel="noopener" ><div class="icon">
|
|
<svg width="35px" height="35px" viewBox="0 0 115 115" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img">
|
|
|
|
<path d="M115 12.321v90.358c0 6.802-5.519 12.321-12.321 12.321H80.782V69.513h15.556l2.233-17.352H80.782V41.07c0-5.03 1.387-8.445 8.6-8.445h9.19V17.122c-1.592-.206-7.034-.693-13.4-.693-13.246 0-22.333 8.086-22.333 22.948v12.81H47.232v17.352h15.633V115H12.321C5.52 115 0 109.481 0 102.679V12.32C0 5.52 5.519 0 12.321 0h90.358C109.48 0 115 5.519 115 12.321z" />
|
|
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mobile-header">
|
|
<p> Persimmon Quilts </p>
|
|
<div class="hamburger">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay-menu">
|
|
<header>
|
|
<div class="intro">
|
|
<div class="logo-container">
|
|
<a href="/">
|
|
<img src='https://persimmonquilts.com/images/circle_logo.jpg' alt="Profile Contact" class="rounded-logo">
|
|
</a>
|
|
</div>
|
|
<h2>Hi, I'm LeAnn Weaver</h2>
|
|
<h3>Sharing my work & passion for quilting through longarm quilting, patterns, and designing.</h3>
|
|
<div class="menu">
|
|
|
|
|
|
<p>
|
|
<a href="/about/">
|
|
About
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/">
|
|
Home
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="https://pinterest.com/persimmonquilts">
|
|
Portfolio
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/contact/">
|
|
Contact
|
|
</a>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/photos/">
|
|
Photos
|
|
</a>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="socials">
|
|
|
|
|
|
<a href="https://facebook.com/persimmon.quilts" class="social-link" target="_blank" rel="noopener" ><div class="icon">
|
|
<svg width="35px" height="35px" viewBox="0 0 115 115" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img">
|
|
|
|
<path d="M115 12.321v90.358c0 6.802-5.519 12.321-12.321 12.321H80.782V69.513h15.556l2.233-17.352H80.782V41.07c0-5.03 1.387-8.445 8.6-8.445h9.19V17.122c-1.592-.206-7.034-.693-13.4-.693-13.246 0-22.333 8.086-22.333 22.948v12.81H47.232v17.352h15.633V115H12.321C5.52 115 0 109.481 0 102.679V12.32C0 5.52 5.519 0 12.321 0h90.358C109.48 0 115 5.519 115 12.321z" />
|
|
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
|
|
<div class="breadcrumb">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span >
|
|
<a href="https://persimmonquilts.com/">Persimmon Quilts</a>
|
|
/
|
|
</span>
|
|
|
|
|
|
<span >
|
|
<a href="https://persimmonquilts.com/post/">POST</a>
|
|
/
|
|
</span>
|
|
|
|
|
|
<span class="active">
|
|
<a href="https://persimmonquilts.com/post/manage-your-menu/">Manage Your Menu</a>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
<main id="content" class="post">
|
|
|
|
<h1>Manage Your Menu</h1>
|
|
<div class="reading-time">
|
|
<div class="icon">
|
|
<svg width="18px" height="18px" viewBox="0 0 115 115" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img">
|
|
|
|
<path d="M57.5 11C29.05 11 6 34.05 6 62.5S29.05 114 57.5 114 109 90.95 109 62.5 85.95 11 57.5 11zm0 93.032c-22.947 0-41.532-18.585-41.532-41.532 0-22.947 18.585-41.532 41.532-41.532 22.947 0 41.532 18.585 41.532 41.532 0 22.947-18.585 41.532-41.532 41.532zm12.833-21.68L52.703 69.54a2.508 2.508 0 0 1-1.018-2.015V33.427a2.5 2.5 0 0 1 2.492-2.492h6.646a2.5 2.5 0 0 1 2.492 2.492v29.426l13.871 10.092c1.122.81 1.35 2.368.54 3.49l-3.904 5.377a2.51 2.51 0 0 1-3.489.54z"/>
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
<span>1 minutes</span>
|
|
</div>
|
|
|
|
<div class="published-date">
|
|
<div class="icon">
|
|
<svg width="18px" height="18px" viewBox="0 0 115 115" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img">
|
|
|
|
<path d="M77.577 51.23a1.807 1.807 0 0 0-2.2.342l-27.562 27.79a1.807 1.807 0 0 1-2.2.342l-14.008-9.702a1.807 1.807 0 0 0-2.2.342l-1.952 1.968c-.287.22-.456.568-.455.936.001.37.172.716.46.934L45.637 86.77a1.807 1.807 0 0 0 2.2-.342l31.709-31.97c.287-.22.456-.567.455-.936a1.175 1.175 0 0 0-.46-.933l-1.963-1.36z"/><path d="M97.304 20H80.512c-.041.34-.063.683-.064 1.026a5.986 5.986 0 0 0 1.256 4.1c.054.003.103.02.157.025a4.881 4.881 0 0 1 1.865-.025c3.05.562 4.984 3.907 4.32 7.47-.666 3.563-3.678 5.996-6.728 5.433a4.932 4.932 0 0 1-2.437-1.258c-6.018-1.378-10.445-7.795-10.445-15.745 0-.347.023-.685.04-1.026H34.579c-.041.34-.063.683-.064 1.026a5.986 5.986 0 0 0 1.256 4.1c.054.003.103.02.157.025a4.881 4.881 0 0 1 1.865-.025c3.05.562 4.984 3.907 4.32 7.47-.666 3.563-3.678 5.996-6.728 5.433a4.932 4.932 0 0 1-2.437-1.258c-6.018-1.378-10.445-7.795-10.445-15.745 0-.22.019-.434.025-.652a9.788 9.788 0 0 0-5.697 4.471 9.683 9.683 0 0 0-2.65 4.764L1.158 92.871c-.965 4.689 2.6 8.503 7.948 8.503h6.334v2.673c-.077 5.41 4.263 9.861 9.705 9.953h72.16c5.438-.095 9.774-4.546 9.694-9.953V29.953c.08-5.407-4.256-9.858-9.695-9.953zM10.078 96.653c-2.378 0-3.964-1.697-3.535-3.782L16.637 43.84h80.787L87.331 92.871a5.254 5.254 0 0 1-5.091 3.782H10.078zm91.535 7.394c.036 2.403-1.891 4.382-4.308 4.424h-72.16c-2.42-.04-4.352-2.018-4.32-4.424v-2.673h60.443c5.348 0 10.484-3.814 11.449-8.503l8.897-43.215v54.391z"/><path d="M34.814 33c1.243 0 2.251-1.057 2.251-2.36 0-1.305-1.008-2.362-2.25-2.362-2.04 0-4.313-3.194-4.313-7.778s2.272-7.778 4.312-7.778c1.227 0 2.536 1.163 3.386 3.084H43C41.716 11.19 38.578 8 34.814 8 29.871 8 26 13.49 26 20.5c0 7.009 3.871 12.5 8.814 12.5z"/>
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
<span>May 2, 2019</span>
|
|
</div>
|
|
|
|
<p>Menu in the sidebar can be defined within the <code>config.toml</code> or directly in the files.
|
|
I prefer the config file approach, as this menu is pretty simple.</p>
|
|
<p>The following setup will define 3 URLs in your sidebar menu, in order of weight.</p>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-TOML" data-lang="TOML"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">menu</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"about"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">"About"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s2">"About section"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"/about/"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">-120</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"portfolio"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">"Portfolio"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s2">"Portfolio"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"/portfolio/"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">-110</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">"blog"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">"Post"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s2">"Blog section"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">"/post/"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">weight</span> <span class="p">=</span> <span class="mi">-100</span>
|
|
</span></span></code></pre></div>
|
|
|
|
</main>
|
|
</div>
|
|
<footer>
|
|
<div class="footer-wrapper">
|
|
<p>Powered by <a href="https://gohugo.io/" target="_blank" rel="external">Hugo</a>.</p>
|
|
<p>© LeAnn Weaver</p>
|
|
</div>
|
|
</footer>
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,600|Raleway:400,400i,600" rel="stylesheet">
|
|
|
|
<script type="text/javascript">
|
|
document.querySelector('.mobile-header').addEventListener('click', function () {
|
|
var om = document.querySelector(".overlay-menu");
|
|
if (document.querySelector('.hamburger').classList.contains("cross")) {
|
|
document.querySelector('.hamburger').classList.remove("cross");
|
|
om.style.display = "none";
|
|
om.style.width = "0%";
|
|
om.style.height = "0%";
|
|
}
|
|
else {
|
|
document.querySelector('.hamburger').classList.add("cross");
|
|
om.style.width = "100%";
|
|
om.style.height = "100vh";
|
|
om.style.display = "block";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|