Last active
June 8, 2020 10:10
-
-
Save ReeceM/7991e46088c0e218f15089ddc390fcc1 to your computer and use it in GitHub Desktop.
Tailwindcss/ui collapsing sidebar links
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div> | |
| <a | |
| href="#" | |
| @click="open = !open" | |
| :class="open ? 'bg-gray-200' : ''" | |
| class="mt-3 -mx-3 px-3 py-1 flex items-center justify-between text-sm font-medium hover:bg-gray-300 rounded-lg" | |
| > | |
| <span class="inline-flex w-full hover:text-gray-900 text-gray-500"> | |
| <slot name="icon"> | |
| <div class="h-5 w-5"></div> | |
| </slot> | |
| <span class="ml-2 text-sm font-semibold text-gray-900">{{ collapseText }}</span> | |
| <!-- collapse arrow thingy --> | |
| <svg | |
| class="ml-auto h-6 w-6 stroke-current" | |
| :style="open ? 'transform: rotate(180deg);' : ''" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| > | |
| <path | |
| d="M16 10l-4 4-4-4" | |
| stroke-width="2" | |
| stroke-linecap="rounded" | |
| stroke-linejoin="rounded" | |
| /> | |
| </svg> | |
| </span> | |
| <!-- <span class="inline-block px-3 text-center bg-gray-300 text-gray-700 rounded-full py-1 text-xs leading-none font-semibold">3</span> --> | |
| </a> | |
| <transition | |
| enter-class="opacity-0 scale-90" | |
| enter-active-class="ease-in transition-slow" | |
| enter-to-class="opacity-100 scale-100" | |
| leave-class="opacity-100 scale-100" | |
| leave-active-class="ease-out transition-slow" | |
| leave-to-class="opacity-0 scale-90" | |
| > | |
| <div | |
| v-if="open" | |
| id="sub_section" | |
| class="flex flex-col p-2 ml-3 mt-2 border-l-2 border-gray-600" | |
| > | |
| <slot /> | |
| </div> | |
| </transition> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| data() { | |
| return { | |
| open: false | |
| }; | |
| }, | |
| props: { | |
| collapseText: { | |
| type: String, | |
| default: '' | |
| }, | |
| }, | |
| }; | |
| </script> | |
| <style> | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <a | |
| :href="href" | |
| :class="activeClass" | |
| class="p-1 rounded flex leading-loose items-center hover:bg-gray-300" | |
| > | |
| <span class="inline-flex"> | |
| <slot name="icon"> | |
| <!-- <svg | |
| class="fill-current h-5 w-5 text-gray-700" | |
| viewBox="0 0 512 512" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0032 37.332v96a5.337 5.337 0 005.332 5.336h160a5.338 5.338 0 005.336-5.336v-96A5.337 5.337 0 00197.332 32zm0 0M197.332 512h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0032 250.668v224A5.336 5.336 0 0037.332 480h160a5.337 5.337 0 005.336-5.332v-224a5.338 5.338 0 00-5.336-5.336zm0 0M474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 00-5.336 5.336v96a5.337 5.337 0 005.336 5.332h160a5.336 5.336 0 005.332-5.332v-96a5.337 5.337 0 00-5.332-5.336zm0 0M474.668 298.668h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 00-5.336 5.332v224a5.338 5.338 0 005.336 5.336h160a5.337 5.337 0 005.332-5.336v-224A5.336 5.336 0 00474.668 32zm0 0" | |
| /> | |
| </svg> --> | |
| <div class="h-5 w-5"></div> | |
| </slot> | |
| <span class="ml-2 text-xs font-medium text-gray-900"><slot/></span> | |
| </span> | |
| <span | |
| v-if="tagValue != null" | |
| class="inline-block px-3 text-center rounded-full py-1 text-xs leading-none font-semibold" | |
| :class="tagStyle" | |
| > | |
| {{ $tagValue }} | |
| </span> | |
| </a> | |
| </template> | |
| <script> | |
| export default { | |
| props: { | |
| tagValue: { | |
| type: [String, Number], | |
| default: null | |
| }, | |
| tagStyle: { | |
| type: String, | |
| default: 'bg-gray-300 text-gray-700' | |
| }, | |
| href: { | |
| type: String, | |
| defaul: "#" | |
| }, | |
| isActive: { | |
| type: Boolean, | |
| default: false, | |
| } | |
| }, | |
| computed: { | |
| activeClass() { | |
| return this.isActive ? 'bg-gray-200' : '' | |
| } | |
| }, | |
| }; | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <sidebar-link :is-active="true" href="#"> | |
| <slot slot="icon"> | |
| <svg class="fill-current h-5 w-5 text-gray-700" viewBox="0 0 512 512"> | |
| <path | |
| d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0032 37.332v96a5.337 5.337 0 005.332 5.336h160a5.338 5.338 0 005.336-5.336v-96A5.337 5.337 0 00197.332 32zm0 0M197.332 512h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0032 250.668v224A5.336 5.336 0 0037.332 480h160a5.337 5.337 0 005.336-5.332v-224a5.338 5.338 0 00-5.336-5.336zm0 0M474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 00-5.336 5.336v96a5.337 5.337 0 005.336 5.332h160a5.336 5.336 0 005.332-5.332v-96a5.337 5.337 0 00-5.332-5.336zm0 0M474.668 298.668h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 00-5.336 5.332v224a5.338 5.338 0 005.336 5.336h160a5.337 5.337 0 005.332-5.336v-224A5.336 5.336 0 00474.668 32zm0 0" /> | |
| </svg> | |
| </slot> | |
| Dashboard | |
| </sidebar-link> | |
| <collapse collapse-text="Inspection"> | |
| <slot slot="icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-5 w-5 text-gray-700" | |
| viewBox="0 0 16 16"> | |
| <path d="M0 0h12.708v.723H0V0z" /> | |
| <path d="M11.983 0h.755v13.077h-.755V0zM0 0h.694v13.514H0V0z" /> | |
| <path | |
| d="M2.762 12.49c.103-.121.332-.106.332-.106h12.285s.347-.015.483.106c-.294.27-.619.587-.619.587H2.686v-.346s-.012-.138.076-.241z" /> | |
| <path | |
| d="M15.243 13.077s.325-.317.62-.587c.12.12.145.307.135.497-.002.03.002.06 0 .09C15.854 15.42 14.908 16 13.236 16v-.693c1.494 0 2.007-.874 2.007-2.23zM1.69 15.307h11.546V16H1.69v-.693z" /> | |
| <path | |
| d="M2.686 13.077h.695c-.378 4.219-3.11 3.42-3.381.437h.694c.74 3.27 1.887 1.431 1.992-.437zM6.089 7.757s1.868-2.175 3.077-3.558c.082-.093.38-.338.666-.093.286.245.146.508.026.648C8.567 6.264 6.52 8.59 6.52 8.59s-.173.185-.407.185c-.233 0-.456-.185-.456-.185s-.932-.684-1.524-1.256c0 0-.3-.336 0-.626.3-.289.647 0 .647 0L6.09 7.757z" /> | |
| </svg> | |
| </slot> | |
| <collapse-link href="#reports"> | |
| <slot slot="icon"> | |
| <svg class="fill-current text-gray-900 h-5 w-5" viewBox="0 0 20 20"> | |
| <path | |
| d="M17.896,12.706v-0.005v-0.003L15.855,2.507c-0.046-0.24-0.255-0.413-0.5-0.413H4.899c-0.24,0-0.447,0.166-0.498,0.4L2.106,12.696c-0.008,0.035-0.013,0.071-0.013,0.107v4.593c0,0.28,0.229,0.51,0.51,0.51h14.792c0.28,0,0.51-0.229,0.51-0.51v-4.593C17.906,12.77,17.904,12.737,17.896,12.706 M5.31,3.114h9.625l1.842,9.179h-4.481c-0.28,0-0.51,0.229-0.51,0.511c0,0.703-1.081,1.546-1.785,1.546c-0.704,0-1.785-0.843-1.785-1.546c0-0.281-0.229-0.511-0.51-0.511H3.239L5.31,3.114zM16.886,16.886H3.114v-3.572H7.25c0.235,1.021,1.658,2.032,2.75,2.032c1.092,0,2.515-1.012,2.749-2.032h4.137V16.886z"> | |
| </path> | |
| </svg> | |
| </slot> | |
| Submissions | |
| </collapse-link> | |
| <collapse-link> | |
| <slot slot="icon"> | |
| <svg class="fill-current h-5 w-5 text-gray-900" viewBox="0 0 20 20"> | |
| <path | |
| d="M10.25,2.375c-4.212,0-7.625,3.413-7.625,7.625s3.413,7.625,7.625,7.625s7.625-3.413,7.625-7.625S14.462,2.375,10.25,2.375M10.651,16.811v-0.403c0-0.221-0.181-0.401-0.401-0.401s-0.401,0.181-0.401,0.401v0.403c-3.443-0.201-6.208-2.966-6.409-6.409h0.404c0.22,0,0.401-0.181,0.401-0.401S4.063,9.599,3.843,9.599H3.439C3.64,6.155,6.405,3.391,9.849,3.19v0.403c0,0.22,0.181,0.401,0.401,0.401s0.401-0.181,0.401-0.401V3.19c3.443,0.201,6.208,2.965,6.409,6.409h-0.404c-0.22,0-0.4,0.181-0.4,0.401s0.181,0.401,0.4,0.401h0.404C16.859,13.845,14.095,16.609,10.651,16.811 M12.662,12.412c-0.156,0.156-0.409,0.159-0.568,0l-2.127-2.129C9.986,10.302,9.849,10.192,9.849,10V5.184c0-0.221,0.181-0.401,0.401-0.401s0.401,0.181,0.401,0.401v4.651l2.011,2.008C12.818,12.001,12.818,12.256,12.662,12.412"> | |
| </path> | |
| </svg> | |
| </slot> | |
| Schedules | |
| </collapse-link> | |
| <collapse-link> | |
| <slot slot="icon"> | |
| <svg class="fill-current h-5 w-5 text-gray-900" viewBox="0 0 20 20"> | |
| <path | |
| d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"> | |
| </path> | |
| </svg> | |
| </slot> | |
| Result Analytics | |
| </collapse-link> | |
| <collapse-link href="#"> | |
| <slot slot="icon"> | |
| <svg class="fill-current h-5 w-5 text-gray-700"> | |
| <path | |
| d="M6.75 2.5H2.583v.833H6.75V2.5zM3.417 4.167h-.834V5h.834v-.833zM5.083 4.167H4.25V5h.833v-.833z" | |
| fill="#000" /> | |
| <path | |
| d="M15.795 3.455L12.46.122A.417.417 0 0012.167 0H1.333C.643 0 .083.56.083 1.25v17.5c0 .69.56 1.25 1.25 1.25h13.334c.69 0 1.25-.56 1.25-1.25v-15a.417.417 0 00-.122-.295zm-.712 15.295c0 .23-.186.417-.416.417H1.333a.417.417 0 01-.416-.417V1.25c0-.23.186-.417.416-.417h10.661l3.09 3.09V18.75z" | |
| fill="#000" /> | |
| <path | |
| d="M13 3.333a.417.417 0 01-.417-.416v-2.5h-.833v2.5c0 .69.56 1.25 1.25 1.25h.833v-.834H13zM13.417 14.167h-.834V15h.834v-.833zM11.75 14.167h-.833V15h.833v-.833zM9.25 14.167H2.583V15H9.25v-.833zM13.417 16.25H2.583v.833h10.834v-.833zM12.583 6.25H3.417a.833.833 0 00-.834.833v5c0 .46.373.834.834.834h9.166c.46 0 .834-.373.834-.834v-5a.833.833 0 00-.834-.833zm0 5.833H3.417v-5h9.166v5z" /> | |
| </svg> | |
| </slot> | |
| Manage Forms | |
| </collapse-link> | |
| </collapse> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment